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.
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).|
- Stroke width – 1px.
- Default size of the circle bullet –
8px * 8px.
- Font size – 14px (
- In the default state, use 400 hue colors. For example,
- 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.
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.
This chart doesn't need tooltip.
|Default||In the default state, use 400 hue colors. For example, |
|Hover||For the text's hover state use the next color hue. For example, |
|Active||In the active state, the text has the same color as on hover, but changes its font-weight to 700. For example, |
All values appears from the center with
The transparency of values appearance changes from 0 to 100 with
Here you will find the states for some specific cases. All other "empty states" for widgets are specified in Error & n/a widget states.
|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.|