Radial Tree chart

Description ​

Radial Tree chart is a radial chart for visual organization of information, one of the versions of MindMap. Such a chart in focus always has one central element (idea, phrase, keyword), which starts the search for new related ideas / topics / keywords.

Use this chart when:

• you need to visualize related ideas / topics / keywords;
• you need a tool for pre-analytical hierarchical visualization of ideas/themes/keywords.

Appearance ​

Basic rules for visualizing data as a Radial Tree:

• There should always be one idea/topic/keyword in the center. Build the rest of the chart from it.
• Keep it simple. The simpler the visualization, the more readable and understandable it is.
• There should be as much space as possible for such a chart. Otherwise, the data will be difficult to read.

Appearance example	Styles and sizes
	The recommended minimum chart size is 600px (don't make it smaller).

Value's styles ​

Default state ​

• Stroke width – 1px.
• Default size of the circle bullet – 8px * 8px.
• Font size – 14px (--fs-200).
• In the default state, use 400 hue colors. For example, --blue-400, --red-400, --green-400 , etc.

Active state ​

• Size of the circle bullet in the active state – 16px * 16px.
• You can place an icon of M size inside the circle bullet in the active state.

Legend ​

For cases where you need to group data using colors on a chart, add a legend next to the chart. This will make it easier for users to read the data.

Tooltip ​

This chart doesn't need tooltip.

Interaction ​

State	Appearance example	Styles
Default		In the default state, use 400 hue colors. For example, --blue-400, --red-400, --green-400 , etc.
Hover		For the text's hover state use the next color hue. For example, --blue-500, --red-500, --green-500 , etc. Don’t change the color of the additional line and the circle bullet.
Active		In the active state, the text has the same color as on hover, but changes its font-weight to 700. For example, --blue-500, --red-500, --green-500 , etc. The circle bullet grows to 16px * 16px size. You can place an icon inside the bullet if needed.

Animation ​

All values appears from the center with ease-in and 200ms delay.

The transparency of values appearance changes from 0 to 100 with ease-in and 200ms delay.

Edge cases ​

Here you will find the states for some specific cases. All other "empty states" for widgets are specified in Error & n/a widget states.

Case	Appearance example
One value
Two values
Few values. If there are very few values, then they are evenly distributed around the entire circle relative to the central value in a clockwise direction.
Very long main element. Don't fold the long center value into ellipsis. Wrap it on the second line.
No data. Show a special WidgetEmpty message for cases when there is no data.
N/a. Show a special WidgetEmpty message for cases when data isn't available.
Initial loading. Show the skeleton for this state. If the chart has a title, it should be displayed while the chart is loading. The user must understand what exactly is being loaded and whether they should wait for it.