Charts · Hierarchies & dimensions

SquarifiedTreemap

Nested rectangles, area by value, drillable through `rootId` and `onRootChange`. Family: Hierarchies & dimensions · chart 50 of 60.

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › IT services	8,252, 44.3% of Administration
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals

Report an issue with this chart

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › IT services	8,252, 44.3% of Administration
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals

mode="precision"

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › IT services	8,252, 44.3% of Administration
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals

substrate="green"

City budget
node	amount
City budget	69,364
City budget › Public works	19,197, 27.7% of City budget
City budget › Public works › Street lighting	8,015, 41.8% of Public works
City budget › Public works › Bridges	6,154, 32.1% of Public works
City budget › Public works › Water mains	2,878, 15% of Public works
City budget › Public works › Water mains › Water mains: staff	2,069, 71.9% of Water mains
City budget › Public works › Water mains › Water mains: materials	809, 28.1% of Water mains
City budget › Public works › Roads	2,150, 11.2% of Public works
City budget › Public works › Roads › Roads: staff	1,760, 81.9% of Roads
City budget › Public works › Roads › Roads: materials	390, 18.1% of Roads
City budget › Administration	18,611, 26.8% of City budget
City budget › Administration › IT services	8,252, 44.3% of Administration
City budget › Administration › Payroll	6,768, 36.4% of Administration
City budget › Administration › Records	3,591, 19.3% of Administration
City budget › Administration › Records › Records: staff	3,281, 91.4% of Records
City budget › Administration › Records › Records: materials	310, 8.6% of Records
City budget › Safety	13,294, 19.2% of City budget
City budget › Safety › Emergency planning	6,265, 47.1% of Safety
City budget › Safety › Lifeguards	5,224, 39.3% of Safety
City budget › Safety › Lifeguards › Lifeguards: materials	2,953, 56.5% of Lifeguards
City budget › Safety › Lifeguards › Lifeguards: staff	2,271, 43.5% of Lifeguards
City budget › Safety › Fire service	1,805, 13.6% of Safety
City budget › Parks	10,626, 15.3% of City budget
City budget › Parks › Playgrounds	5,030, 47.3% of Parks
City budget › Parks › Playgrounds › Playgrounds: materials	2,865, 57% of Playgrounds
City budget › Parks › Playgrounds › Playgrounds: staff	2,165, 43% of Playgrounds
City budget › Parks › Tree care	2,835, 26.7% of Parks
City budget › Parks › Sports fields	2,761, 26% of Parks
City budget › Parks › Sports fields › Sports fields: staff	2,455, 88.9% of Sports fields
City budget › Parks › Sports fields › Sports fields: materials	306, 11.1% of Sports fields
City budget › Culture	7,636, 11% of City budget
City budget › Culture › Libraries	3,177, 41.6% of Culture
City budget › Culture › Libraries › Libraries: materials	2,265, 71.3% of Libraries
City budget › Culture › Libraries › Libraries: staff	912, 28.7% of Libraries
City budget › Culture › Museum	2,999, 39.3% of Culture
City budget › Culture › Festivals	1,460, 19.1% of Culture
City budget › Culture › Festivals › Festivals: staff	1,275, 87.3% of Festivals
City budget › Culture › Festivals › Festivals: materials	185, 12.7% of Festivals

ground="cyanotype"

Example

The chart above, in each framework. Pick a framework once and every example on the site follows it. One row per node, linked to its parent. Click a node to drill down.

shell

npm install @silverpoint/react @silverpoint/grounds @silverpoint/fonts

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SquarifiedTreemap } from '@silverpoint/react/squarified-treemap';

const data = [
  { id: 'budget', parent: null, name: 'City budget' },
  { id: 'works', parent: 'budget', name: 'Public works' },
  { id: 'works-01', parent: 'works', name: 'Roads' },
  { id: 'works-01-a', parent: 'works-01', name: 'Roads: staff', amount: 1760 },
  { id: 'works-01-b', parent: 'works-01', name: 'Roads: materials', amount: 390 },
  { id: 'works-02', parent: 'works', name: 'Bridges', amount: 6154 },
  { id: 'works-03', parent: 'works', name: 'Water mains' },
  { id: 'works-03-a', parent: 'works-03', name: 'Water mains: staff', amount: 2069 },
  { id: 'works-03-b', parent: 'works-03', name: 'Water mains: materials', amount: 809 },
  { id: 'works-04', parent: 'works', name: 'Street lighting', amount: 8015 },
  { id: 'parks', parent: 'budget', name: 'Parks' },
  { id: 'parks-05', parent: 'parks', name: 'Playgrounds' },
  // … 26 more rows of the same shape
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <SquarifiedTreemap
        data={data}
        idKey="id"
        parentKey="parent"
        labelKey="name"
        valueKey="amount"
        title="City budget"
      />
    </div>
  );
}

shell

npm install @silverpoint/vue @silverpoint/grounds @silverpoint/fonts

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpSquarifiedTreemap } from '@silverpoint/vue/squarified-treemap';

const data = [
  { id: 'budget', parent: null, name: 'City budget' },
  { id: 'works', parent: 'budget', name: 'Public works' },
  { id: 'works-01', parent: 'works', name: 'Roads' },
  { id: 'works-01-a', parent: 'works-01', name: 'Roads: staff', amount: 1760 },
  { id: 'works-01-b', parent: 'works-01', name: 'Roads: materials', amount: 390 },
  { id: 'works-02', parent: 'works', name: 'Bridges', amount: 6154 },
  { id: 'works-03', parent: 'works', name: 'Water mains' },
  { id: 'works-03-a', parent: 'works-03', name: 'Water mains: staff', amount: 2069 },
  { id: 'works-03-b', parent: 'works-03', name: 'Water mains: materials', amount: 809 },
  { id: 'works-04', parent: 'works', name: 'Street lighting', amount: 8015 },
  { id: 'parks', parent: 'budget', name: 'Parks' },
  { id: 'parks-05', parent: 'parks', name: 'Playgrounds' },
  // … 26 more rows of the same shape
];
</script>

<template>
  <div style="width: 480px">
    <SpSquarifiedTreemap
      :data="data"
      id-key="id"
      parent-key="parent"
      label-key="name"
      value-key="amount"
      title="City budget"
    />
  </div>
</template>

shell

npm install @silverpoint/angular @silverpoint/grounds @silverpoint/fonts

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';

import { Component } from '@angular/core';
import { SpSquarifiedTreemap } from '@silverpoint/angular/squarified-treemap';

@Component({
  selector: 'app-root',
  imports: [SpSquarifiedTreemap],
  template: `
    <div style="width: 480px">
      <sp-squarified-treemap
        [data]="data"
        idKey="id"
        parentKey="parent"
        labelKey="name"
        valueKey="amount"
        title="City budget"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { id: 'budget', parent: null, name: 'City budget' },
    { id: 'works', parent: 'budget', name: 'Public works' },
    { id: 'works-01', parent: 'works', name: 'Roads' },
    { id: 'works-01-a', parent: 'works-01', name: 'Roads: staff', amount: 1760 },
    { id: 'works-01-b', parent: 'works-01', name: 'Roads: materials', amount: 390 },
    { id: 'works-02', parent: 'works', name: 'Bridges', amount: 6154 },
    { id: 'works-03', parent: 'works', name: 'Water mains' },
    { id: 'works-03-a', parent: 'works-03', name: 'Water mains: staff', amount: 2069 },
    { id: 'works-03-b', parent: 'works-03', name: 'Water mains: materials', amount: 809 },
    { id: 'works-04', parent: 'works', name: 'Street lighting', amount: 8015 },
    { id: 'parks', parent: 'budget', name: 'Parks' },
    { id: 'parks-05', parent: 'parks', name: 'Playgrounds' },
    // … 26 more rows of the same shape
  ];
}

shell

pip install reflex-silverpoint-react

python

import reflex as rx
from reflex_silverpoint_react import squarified_treemap

DATA = [
    {"id": "budget", "parent": None, "name": "City budget"},
    {"id": "works", "parent": "budget", "name": "Public works"},
    {"id": "works-01", "parent": "works", "name": "Roads"},
    {"id": "works-01-a", "parent": "works-01", "name": "Roads: staff", "amount": 1760},
    {"id": "works-01-b", "parent": "works-01", "name": "Roads: materials", "amount": 390},
    {"id": "works-02", "parent": "works", "name": "Bridges", "amount": 6154},
    {"id": "works-03", "parent": "works", "name": "Water mains"},
    {"id": "works-03-a", "parent": "works-03", "name": "Water mains: staff", "amount": 2069},
    {"id": "works-03-b", "parent": "works-03", "name": "Water mains: materials", "amount": 809},
    {"id": "works-04", "parent": "works", "name": "Street lighting", "amount": 8015},
    {"id": "parks", "parent": "budget", "name": "Parks"},
    {"id": "parks-05", "parent": "parks", "name": "Playgrounds"},
    # … 26 more rows of the same shape
]


def index() -> rx.Component:
    return rx.box(
        squarified_treemap(
            data=DATA,
            id_key="id",
            parent_key="parent",
            label_key="name",
            value_key="amount",
            title="City budget",
        ),
        width="480px",
    )


app = rx.App()
app.add_page(index)

Import

Each chart has its own subpath, so a bundle only carries the charts it uses. Every adapter also exports every chart from its barrel.

Framework	Import
React	`import { SquarifiedTreemap } from '@silverpoint/react/squarified-treemap';`
Vue	`import { SpSquarifiedTreemap } from '@silverpoint/vue/squarified-treemap';`
Angular	`import { SpSquarifiedTreemap } from '@silverpoint/angular/squarified-treemap'; // <sp-squarified-treemap>`
Reflex	`from reflex_silverpoint_react import squarified_treemap`

Props

The props SquarifiedTreemap adds to the ones every chart takes. Accessor props (…Key, keys, names) name fields of your rows and are ignored without data.

React / Angular	Vue	Reflex	Type	Description
`idKey`	`id-key`	`id_key`	`Accessor<string>`	—
`parentKey`	`parent-key`	`parent_key`	`Accessor<string \| null \| undefined>`	`null` for the root.
`labelKey`	`label-key`	`label_key`	`Accessor<string \| null \| undefined>`	—
`valueKey`	`value-key`	`value_key`	`Accessor<number \| null \| undefined>`	Read on leaves; an internal node is the sum of its children.
`depth`	`depth`	`depth`	`number`	Levels drawn below the root; all by default.
`rootId`	`root-id`	`root_id`	`string \| null`	The node drawn as root, controlled; the data root by default.
`onRootChange`	`on-root-change`	`on_root_change`	`(id: string \| null) => void`	A node asked to be drawn as root (`None`: back to the top); pass it back as `root_id`.

Common props

Every chart also takes these. Framework conventions: camelCase in React and Angular, kebab-case in Vue templates, snake_case in Reflex. Read more about them.

Show the 22 common props

React / Angular	Vue	Reflex	Type	Description
`data`	`data`	`data`	`readonly Datum[]`	Rows to draw. If omitted, the demo dataset is rendered (REQ-093) and the accessor props (`…_key`, `keys`, `names`) are ignored.
`ground`	`ground`	`ground`	`GroundRef`	Style ground: `silverpoint` or `cyanotype`, or a ground object. Defaults to the app provider's, or `silverpoint`.
`substrate`	`substrate`	`substrate`	`SubstrateName`	Prepared substrate within the ground (REQ-046).
`mode`	`mode`	`mode`	`InkMode`	`ink` by default; `precision` disables inking (REQ-021).
`seed`	`seed`	`seed`	`Seed`	Seed. If omitted, it is derived from `id` stably (REQ-003).
`id`	`id`	`id`	`string`	Stable identifier. If omitted, it is generated deterministically.
`height`	`height`	`height`	`number`	Height of the drawing area in px. Width is the container's unless pinned.
`width`	`width`	`width`	`number`	—
`chrome`	`chrome`	`chrome`	`'card' \| 'bare'`	`card` draws the full frame; `bare` only the drawing area (REQ-095).
`hatchFill`	`hatch-fill`	`hatch_fill`	`'tile' \| 'per-shape'`	How areas are filled (REQ-029).
`title`	`title`	`title`	`string`	—
`badge`	`badge`	`badge`	`string`	—
`value`	`value`	`value`	`string \| number`	—
`unit`	`unit`	`unit`	`string`	—
`footerLeft`	`footer-left`	`footer_left`	`string`	—
`footerRight`	`footer-right`	`footer_right`	`string`	—
`label`	`label`	`label`	`string`	Accessible name. If omitted, it is derived from `title` (REQ-120).
`description`	`description`	`description`	`string`	Long description for screen readers (REQ-120).
`dataTable`	`data-table`	`data_table`	`'visible' \| 'hidden' \| 'none'`	Tabular alternative; `hidden` leaves it for assistive technology only (REQ-121).
`locale`	`locale`	`locale`	`string`	—
`numberFormat`	`number-format`	`number_format`	`Intl.NumberFormatOptions`	—
`className`	`class-name`	`class_name`	`string`	—

Pointer and keyboard exploration are built in. The item under the pointer or focus is reported, and a click, Enter or Space selects it. The item is { seriesKey, index, datum, value, point: { x, y } }.

Framework	Active item	Selection	Custom readout
React	`onActiveChange`	`onSelect`	`tooltip={(item, readout) => …}`
Vue	`@active-change`	`@select`	`<template #tooltip>`
Angular	`(activeChange)`	`(select)`	`<ng-template spTooltip>`
Reflex	`on_active_change`	`on_select`	`tooltip=tooltip_template(…)`

Interaction and readouts →

SquarifiedTreemap also drills down under your control: a click, Enter or Space on a node emits its id (its parent's from the drawn root, null at the top), and you pass it back as the root. The chart above does exactly that.

Framework	Root in	Root asked for
React	`rootId`	`onRootChange`
Vue	`:root-id`	`@root-change`
Angular	`[rootId]`	`(rootChange)`
Reflex	`root_id`	`on_root_change`

Drill-down & hierarchies →

Report it

Found something wrong with SquarifiedTreemap? Open an issue on GitHub — the form comes pre-filled with the chart and the version.

SquarifiedTreemap

Example

Import

Props

Common props

Events