TreeMap

A TreeMap in REAVIZ displays hierarchical data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. The area of each leaf node’s rectangle is proportional to a specified data dimension, and the color often represents a separate data dimension.

Where to use:

Visualize Hierarchical Data: Ideal for displaying hierarchical data structures.
Show Proportional Values: Useful for showing how different parts of a whole compare in size.
Highlight Data Dimensions: Great for highlighting multiple data dimensions, such as size and color.

Quick Start

To create a treemap chart, use import the TreeMap and give it data. The chart will automatically configure itself with the default options exposed via props.

import { TreeMap } from 'reaviz';


export default function App() {
return (
  <TreeMap
    height={400}
    width={400}
    data={[
      { key: 'AWS', data: 100 },
      { key: 'SendGrid', data: 45 },
      { key: 'Okta', data: 75 },
      { key: 'Twillo', data: 25 }
    ]}
  />
);
}

import { TreeMap } from 'reaviz';

export default function App() {
return (
  <TreeMap
    height={400}
    width={400}
    data={[
      { key: 'AWS', data: 100 },
      { key: 'SendGrid', data: 45 },
      { key: 'Okta', data: 75 },
      { key: 'Twillo', data: 25 }
    ]}
  />
);
}

Examples

API

TreeMap

Name	Type	Default
`data`	`ChartShallowDataShape[] \| ChartNestedDataShape[]` Data the chart will receive to render.	`[]`
`series`	`ReactElement<TreeMapSeriesProps, FC<Partial<TreeMapSeriesProps>>>` The series component that renders the components.	`<TreeMapSeries />`
`paddingInner`	`number` Inner padding for the treemap.	`5`
`paddingOuter`	`number` Outer padding for the treemap.	`5`
`paddingTop`	`number` Padding top for the treemap. This is used for the title spacing in nested situations.	`30`
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

TreeMapSeries

Name	Type	Default
`id`	`string` Id set by the parent.
`data`	`any[]` The internal data object built by d3
`animated`	`boolean` Whether the chart is animated or not.	`true`
`colorScheme`	`ColorSchemeType` Color scheme for the chart.	`'cybertron'`
`rect`	`ReactElement<TreeMapRectProps, FC<Partial<TreeMapRectProps>>>` Rect element to be rendered.	`<TreeMapRect />`
`label`	`ReactElement<TreeMapLabelProps, FC<Partial<TreeMapLabelProps>>>` Label element to be rendered.	`<TreeMapLabel />`

TreeMapLabel

Name	Type	Default
`id`	`string` Id set by the parent.
`data`	`any` The internal data object built by d3
`fontSize`	`number` Font size of the text.	`14`
`fontFamily`	`string` Font family of the text.	`'sans-serif'`
`fill`	`string` Fill of the text.	`'#FFF'`
`wrap`	`boolean` Should wrap text or not.	`true`
`placement`	`"start" \| "middle" \| "end"` Placement of the text.	`'start'`

TreeMapRect

Name	Type	Default
`data`	`any` The internal data object built by d3
`id`	`string` Id set by the parent.
`fill`	`string` Fill for the rect.
`animated`	`boolean` Whether the chart is animated or not.
`cursor`	`string` Cursor for the element.	`'pointer'`
`tooltip`	`ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>> \| null` Tooltip element.	`<ChartTooltip />`
`onClick`	`(event: any, data: any) => void` Event for when the arc is clicked.
`onMouseEnter`	`(event: any, data: any) => void` Event for when the arc has mouse enter.
`onMouseLeave`	`(event: any, data: any) => void` Event for when the arc has mouse leave.