Treemap

[Configuration Manual]

Introduction

A treemap is a statistical chart displaying tree-structured data using nested rectangles of different sizes. In a treemap, parent-child hierarchy is represented by the nesting of rectangles. Within the same level, all rectangles are arranged consecutively without gaps, and their sum of areas represents the overall size. The area of an individual rectangle is determined by its proportion at the same level.

Treemaps require tree-structured data (at least one parent node) and weighted child nodes. For tree-structured data without weights, use tree-structure diagrams or radial tree diagrams for representation.

Chart Composition

The treemap is mainly composed of rectangle elements representing hierarchical structures, tooltip information, and other components.

Rectangle elements are the basic elements of the treemap, and relevant drawing configurations are essential:

• treemapChart.type: Chart type, the type of bar/column/strip chart is 'treemap'
• treemapChart.data: Data source for chart drawing
• treemapChart.categoryField: Value field, mapping different chart elements
• treemapChart.valueField: Node weight field, mapping the size of the chart elements

Tooltip information and other components that assist in chart presentation are optional configurations with default effects and functions:

• treemapChart.tooltip: Tooltip, displayed by default during interactions, detailed configuration see VChart Tooltip Component Configuration
• More component configurations can be found at VChart treemapChart Configuration

Getting Started

Key Configurations

• categoryField declares the categorical field, usually node names
• valueField declares the value field, usually node weights

Treemap Features

Data

In treemaps, data is usually hierarchical in structure, in the form of:

data: [
  {
    name: 'area',
    values: [
      {
        name: 'A',
        children: [
          { name: 'A-a', value: 1 },
          { name: 'A-b', value: 2 }
        ]
      },
      {
        name: 'B',
        children: [
          { name: 'B-a', value: 3 },
          { name: 'B-b', value: 4 }
        ]
      }
    ]
  }
];

Chart Layout

Rectangle Split

• Split method The essence of the treemap algorithm is to divide the rectangular area and then divide the subdivided areas again until the smallest areas are obtained. In VChart, the division method can be specified by treeMapChart.splitType: 'binary' | 'dice' | 'slice' | 'sliceDice' | 'squarify', with a default value of 'binary'.

• 'binary': Recursively splits the specified node into a nearly balanced binary tree, with horizontal split for wide rectangles and vertical split for high rectangles.
• 'dice': Horizontally divide the rectangular area specified by x0, y0, x1, y1 according to the value of each child node of the specified node. Child nodes are positioned in order, starting from the left edge (x0) of the given rectangle. If the sum of the child node values is less than the value of the specified node (i.e., if the specified node has a nonzero internal value), the remaining space will be positioned at the right edge (x1) of the given rectangle.
• 'slice': Similar to 'dice', but with vertical direction splitting.
• 'sliceDice': Nodes with odd depth use 'slice'; nodes with even depth use 'dice'.
• 'squarify': As far as possible, divide the rectangle according to a specific aspect ratio.

• Split ratio treemapChart.aspectRatio: It can be configured for each split ratio. The default value is (1 + Math.sqrt(5)) / 2, which is about 1.618

Hierarchical Display

• Gap width between two same-level nodes: treemapChart.gapWidth
• Hierarchy margin: nodePadding
• Maximum display level: maxDepth
• When the area (px * px) is smaller than the set value, the node will be hidden: minVisibleArea
• When the area (px * px) is smaller than the set value, the child nodes will be hidden: minChildrenVisibleArea

Chart Interaction

Drag and Zoom

Since treemaps usually display large amounts of data and complex hierarchical structures, VChart provides drag and zoom interactions specifically for treemaps. To enable drag and zoom, configure treemapChart.roam: true.

Drill Down

The drill-down feature allows users to click on a parent category to dig deeper into subcategory information in treemaps, Circle Packing, and sunburst charts that display different levels of sub-data. Through the drill-down feature, users can view details level by level, explore the details of data hierarchies, and better understand the relationships and differences between data, resulting in higher quality analytical conclusions.

By configuring treemapChart.drill: true and treemapChart.drillField, you can enable the drill-down feature and configure the field used for drill-down (the drill-down field will use autogenerated unique keys by default, but the drillField needs to be configured when using the API for drilling).