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 ​

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 message for cases when there is no data.

Initial data loading ​

Show Skeleton during initial loading. If the chart has a title, display it to inform users about what's loading. Refer to Skeleton for more details.

Use the --skeleton-bg color token for the skeleton's background.

Refer to Error & n/a widget states for all other "empty states".