Charts — Treemap — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · Full AI Reference · schema.json · API Reference · Examples

View on GitHub · npx -p semiotic semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/charts/treemap

Treemap

charts

import { Treemap } from "semiotic"

Wraps: StreamNetworkFrame

Treemap visualizes hierarchical data as nested rectangles. Each rectangle's area is proportional to its value, making it easy to spot the largest and smallest items in a hierarchy. It wrapsStreamNetworkFrame withnetworkType="treemap".

Quick Start

Pass hierarchical data with children arrays andvalue fields on leaf nodes. The treemap layout sizes each cell proportionally.

Skip to data table

import { Treemap } from "semiotic" const frameProps = { /* --- Data --- */ data: { name: "Budget", children: [ { name: "Engineering", children: [ { name: "Frontend", value: 180 }, { name: "Backend", value: 220 }, { name: "DevOps", value: 80 } ]}, { name: "Marketing", children: [ { name: "Digital", value: 150 }, { name: "Content", value: 90 }, { name: "Events", value: 60 } ]}, { name: "Sales", children: [ { name: "Direct", value: 200 }, { name: "Channel", value: 130 } ]}, { name: "HR", value: 120 } ] }, /* --- Process --- */ valueAccessor: "value", nodeIdAccessor: "name", /* --- Customize --- */ colorBy: "name" } export default () => { return <Treemap {...frameProps} /> }

Examples

Color by Depth

Use colorByDepth to automatically color nodes based on their level in the hierarchy.

Skip to data table

import { Treemap } from "semiotic" const frameProps = { /* --- Data --- */ data: hierarchyData, /* --- Process --- */ valueAccessor: "value", nodeIdAccessor: "name", /* --- Customize --- */ colorByDepth: true } export default () => { return <Treemap {...frameProps} /> }

All Labels

Use labelMode="all" to label both top-level groups and leaf cells. Parent labels appear as bold headers; leaf labels are centered in each cell.

Skip to data table

import { Treemap } from "semiotic" const frameProps = { /* --- Data --- */ data: hierarchyData, /* --- Size --- */ padding: 3, /* --- Process --- */ valueAccessor: "value", nodeIdAccessor: "name", /* --- Customize --- */ colorBy: "name", labelMode: "all" } export default () => { return <Treemap {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`data`	object	Yes	—	Hierarchical data structure with children and values.
`childrenAccessor`	string \| function	—	`"children"`	Field name or function to access children array.
`valueAccessor`	string \| function	—	`"value"`	Field name or function to access node value for sizing.
`nodeIdAccessor`	string \| function	—	`"name"`	Field name or function to access node identifier.
`colorBy`	string \| function	—	—	Field name or function to determine node color.
`colorScheme`	string \| array	—	`"category10"`	Color scheme for nodes or custom colors array.
`colorByDepth`	boolean	—	`false`	Color nodes by hierarchy depth level.
`showLegend`	boolean	—	`true (when colorBy set)`	Show a categorical legend for colorBy.
`legendPosition`	"right" \| "left" \| "top" \| "bottom"	—	`"right"`	Position the legend around the plot.
`legendInteraction`	"highlight" \| "isolate" \| "none"	—	`"none"`	Highlight or isolate categories from the legend.
`showLabels`	boolean	—	`true`	Show labels on treemap cells.
`labelMode`	"leaf" \| "parent" \| "all"	—	`"leaf"`	Which nodes to label. "leaf" labels only leaf nodes, "parent" labels depth-1 group headers, "all" labels everything.
`nodeLabel`	string \| function	—	`nodeIdAccessor`	Node label accessor.
`padding`	number	—	`4`	Padding between parent and child rectangles (pixels). Makes parent containers visible.
`paddingTop`	number	—	`0 (18 when labelMode="parent")`	Extra padding at the top of parent nodes. Provides space for parent label text.
`enableHover`	boolean	—	`true`	Enable hover annotations.
`tooltip`	object \| function	—	—	Tooltip configuration or render function.
`width`	number	—	`600`	Chart width in pixels.
`height`	number	—	`600`	Chart height in pixels.
`margin`	object	—	`{ top: 10, bottom: 10, left: 10, right: 10 }`	Margin around the chart area.
`title`	string	—	—	Chart title displayed at the top.
`perspective`	string \| object	—	`"flat"`	Parallel projection applied after layout: "isometric", "pixel", "dimetric", "military", "cabinet", or a config object (elevation, ground grid/plate, regions, edges.route, labels, transition). Cells lie on the ground; marks: "extrude" raises leaf cells into prisms while containers stay flat. Layout is unchanged; tooltips and keyboard focus follow the projected marks. Use for categorical or topological positions, not measured ones.See Perspective.
`frameProps`	object	—	—	Additional StreamNetworkFrame props for advanced customization.

When to Use the Frame

Use StreamNetworkFrame directly for custom node rendering, filtered nodes, or edge display, withnetworkType={{ type: "treemap" }}.

Chart (simple)

JSX

import { Treemap } from "semiotic" <Treemap data={hierarchyData} valueAccessor="value" colorBy="name" showLabels />

Frame (full control)

JSX

import { StreamNetworkFrame } from "semiotic" <StreamNetworkFrame edges={hierarchyData} networkType={{ type: "treemap" }} nodeIDAccessor="name" nodeStyle={d => ({ fill: colorScale(d.name), stroke: "#fff" })} hierarchyChildren={d => d.children} hierarchySum={d => d.value} hoverAnnotation={true} size={[600, 600]} />

CirclePack — nested circles as an alternative hierarchical layout
TreeDiagram — node-link diagrams for showing structural relationships
StreamNetworkFrame — the underlying Frame with full control over every rendering detail