Tree Map Chart

In this article, we will explain how to create and customize a Annotation chart. So let's get started!

A tree chart is a graphical representation of a data tree that allows you to visually explore the hierarchical relationships between different data points. In a tree chart, each node can have one parent (except for the root node, which has no parents) and zero or more children. The root node is typically the starting point of the tree, and all other nodes branch off from it.

Here is an example of a table map chart and sample data:

This tree map chart shows data on the populations and per-capita of various counties within different cities and countries. The rectangles are nested to represent the hierarchical structure of the data, with the size of each rectangle representing the population and the color representing the per-capita of the corresponding region . The user can hover over each rectangle to see the name and metrics of the region.

Sample data:

Child Node	Parent Node	Population (k)	Percapita ($)
World		0	0
North America	World	0	0
United States	North America	0	0
California	United States	0	0
Los Angeles	California	10,206	62,641
San Francisco	California	884	62,641
San Diego	California	3,333	62,641
New York	United States	0	0
New York City	New York	8,175	62,641
Buffalo	New York	260	62,641
Rochester	New York	207	62,641
Asia	World	0	0
South America	World	0	0
Africa	World	0	0
China	Asia	0	0
Fujian	China	0	0
Xiamen	Fujian	4,110	10,261
Fuzhou	Fujian	7,190	10,261
Quanzhou	Fujian	9,360	10,261
India	Asia	0	0
Tamil Nadu	India	0	0
Chennai	Tamil Nadu	8,653	2,059
Coimbatore	Tamil Nadu	2,356	2,059
Madurai	Tamil Nadu	1,754	2,059
Indonesia	Asia	0	0
Java	Indonesia	0	0
Jakarta	Java	10,575	4,295
Surabaya	Java	3,567	4,295
Bandung	Java	2,473	4,295
Brazil	South America	0	0
Sao Paulo	Brazil	0	0
Sao Paulo City	Sao Paulo	21,650	9,731
Rio de Janeiro	Sao Paulo	6,722	9,731
Belo Horizonte	Sao Paulo	5,604	9,731
South Africa	Africa	0	0
Gauteng	South Africa	0	0
Johannesburg	Gauteng	4,434	14,437
Pretoria	Gauteng	2,216	14,437
Soweto	Gauteng	1,296	14,437
Egypt	Africa	0	0
Cairo	Egypt	0	0
Cairo City	Cairo	9,772	3,452
Giza	Cairo	3,862	3,452
Alexandria	Cairo	4,301	3,452

How-to build a line chart?

1. Navigate to Add New Chart screen

2. Select data source

3. Select "Table Map Chart" type from gallery

4. Configure and customize the chart to create the desired visualization.

Tree map chart configuration:

The configuration shown illustrates how to map the two nodes, population and per-capita to create a tree map chart:

In addition to mapping nodes, to create a tree chart, you will need to assign values to each node that determine its size and color. The sizes and colors are relative to all other nodes in the chart, so you can use them to highlight certain nodes or groups of nodes.

If a node is a leaf node (i.e., it has no children), you can specify its size and color. If it is not a leaf node, it will be displayed as a bounding box for leaf nodes. This helps to visually group nodes and make it easier to understand the relationships between them.

The default behavior of a tree chart is to move down the tree when a user left-clicks a node, and to move back up the tree when a user right-clicks the chart. This allows you to easily navigate through the tree and explore the data.

Please note:

• Remember to set one node as the root with "null" in the parent node column.

• Make sure that all parent and child nodes are unique, with no self-references. For example, if mapping New York State to New York City, use "New York City" as the child node and "New York State" as the parent node.

• Make sure that all child nodes have a parent node.

Tree map chart customization options

Infinity offers many customization options for your table map chart. To access these options, click on the customize tab in the chart builder screen. This will display a list of customization options.

Here is a list of notable customization options for the line chart.

Feature	Description
Aggregation	To create an aggregation, click on the data series chip in the data mapping section and choose the desired aggregation. There are various aggregation options available based on the data type.
Renaming the Data Series	To rename a data series, click on the data series chip in the data mapping section. A pop-up will appear, allowing you to change the name and any aggregation options.
Colors	There are a few options for setting the colors for your rectangles and hierarchies. First, you can use "max," "medium," and "min" colors to set the colors of the color scale. Similarly, you can change the colors of rectangles when highlighted using "maxhighlight," "minhighlight," and "mediumhighlight."
Other	Max Depth: Specify the maximum number of levels that you want to display in the current view. Any levels beyond this limit will be flattened into the current plane. If your tree has more levels than the specified limit, you will need to navigate up or down in the tree to view them. Max Post Depth: You can set the number of levels of nodes beyond "maxDepth" to display in a "hinted" fashion:

There are a few useful tips to keep in mind when using tree map charts:

1. Make sure to clearly label the chart and include a descriptive title.

2. Use a clear and readable font for the labels and data values to make it easier for readers to understand the chart.

3. Use appropriate coloring and shading to differentiate between the different data points and to make the chart visually appealing.

4. Consider using hover-over text or other interactive elements to help users explore the data and understand the relationships between the different data points.