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 (opens in a new tab)

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

TreeMapSeries (opens in a new tab)

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

TreeMapLabel (opens in a new tab)

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

TreeMapRect (opens in a new tab)

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

Sparkline Venn Diagram