Hierarchy Charts

Visualize nested relationships and tree-structured data. These charts transform parent-child data into spatial layouts that reveal structure, proportion, and depth. Choose treemaps for size comparisons, sunbursts for drilling into levels, and dendrograms for classification trees.

Data Format

Hierarchy charts accept data in two formats:

Tabular Format (Recommended)

data:
  source: '[{"id": "root", "parent": null, "value": 100}, {"id": "child1", "parent": "root", "value": 60}]'
hierarchy:
  id: id
  parent: parent
  value: value

Nested Format

data:
  source: '{"name": "root", "children": [{"name": "child1", "value": 60}]}'

Treemap

Pack hierarchical data into nested rectangles where area represents value. Treemaps maximize space efficiency, displaying thousands of nodes in a compact form. Use them for file system sizes, budget breakdowns, or any nested data where you want to compare sizes while preserving hierarchical context.

Configuration

Parameter	Type	Default	Description
type	string	-	'treemap'
hierarchy.id	string	'id'	Node identifier field
hierarchy.parent	string	'parent'	Parent reference field
hierarchy.value	string	'value'	Size value field
padding	number	2	Padding between cells
tile	string	'squarify'	Tiling algorithm
round	boolean	true	Round to pixel boundaries
colorScheme	string	'schemeTableau10'	Color palette

Tiling Algorithms

• squarify - Squarified rectangles (default)
• binary - Binary split
• slice - Horizontal slices
• dice - Vertical slices
• sliceDice - Alternating slice/dice

Basic Example

View Source

type: treemap
engine: d3
title: File Sizes
colorScheme: schemeTableau10
width: 550
height: 400
hierarchy:
  id: name
  parent: parent
  value: size
data:
  source: '[{"name": "root", "parent": null, "size": 0}, {"name": "src", "parent": "root", "size": 0}, {"name": "lib", "parent": "root", "size": 0}, {"name": "index.ts", "parent": "src", "size": 450}, {"name": "utils.ts", "parent": "src", "size": 280}, {"name": "types.ts", "parent": "src", "size": 120}, {"name": "d3.js", "parent": "lib", "size": 380}, {"name": "lodash.js", "parent": "lib", "size": 220}]'

Sunburst

Arrange hierarchy levels as concentric rings radiating from a central root. Sunbursts reveal hierarchical structure through angular position and depth through radius. They excel at showing how categories subdivide across multiple levels, making them ideal for organizational breakdowns, category taxonomies, and drill-down exploration.

Configuration

Parameter	Type	Default	Description
type	string	-	'sunburst'
hierarchy.id	string	'id'	Node identifier field
hierarchy.parent	string	'parent'	Parent reference field
hierarchy.value	string	'value'	Size value field
innerRadius	number	0	Inner radius (for donut center)
padAngle	number	0.005	Gap between segments
colorScheme	string	'schemeTableau10'	Color palette

Basic Example

View Source

type: sunburst
engine: d3
title: Category Breakdown
width: 450
height: 450
hierarchy:
  id: name
  parent: parent
  value: sales
data:
  source: '[{"name": "Total", "parent": null, "sales": 0}, {"name": "Electronics", "parent": "Total", "sales": 0}, {"name": "Clothing", "parent": "Total", "sales": 0}, {"name": "Phones", "parent": "Electronics", "sales": 450}, {"name": "Laptops", "parent": "Electronics", "sales": 380}, {"name": "Tablets", "parent": "Electronics", "sales": 220}, {"name": "Shirts", "parent": "Clothing", "sales": 180}, {"name": "Pants", "parent": "Clothing", "sales": 150}, {"name": "Shoes", "parent": "Clothing", "sales": 200}]'

Circle Packing

Nest circles within circles to show containment relationships. Circle packing creates an organic, bubble-like aesthetic that emphasizes the grouping of elements within larger containers. The layout works well for showing module dependencies, organizational structures, or any hierarchy where the visual metaphor of containment matters more than precise size comparison.

Configuration

Parameter	Type	Default	Description
type	string	-	'circle-packing'
hierarchy.id	string	'id'	Node identifier field
hierarchy.parent	string	'parent'	Parent reference field
hierarchy.value	string	'value'	Size value field
padding	number	3	Padding between circles
colorScheme	string	'schemeTableau10'	Color palette

Basic Example

View Source

type: circle-packing
engine: d3
title: Module Dependencies
width: 500
height: 500
hierarchy:
  id: name
  parent: parent
  value: size
data:
  source: '[{"name": "app", "parent": null, "size": 0}, {"name": "core", "parent": "app", "size": 0}, {"name": "ui", "parent": "app", "size": 0}, {"name": "utils", "parent": "core", "size": 150}, {"name": "config", "parent": "core", "size": 80}, {"name": "buttons", "parent": "ui", "size": 120}, {"name": "forms", "parent": "ui", "size": 200}, {"name": "icons", "parent": "ui", "size": 90}]'

Dendrogram

Draw tree structures as branching diagrams with nodes connected by lines. Dendrograms emphasize the relationships and distances between nodes, making them the standard choice for clustering results, phylogenetic trees, and organizational hierarchies where connection paths matter more than node sizes.

Configuration

Parameter	Type	Default	Description
type	string	-	'dendrogram'
hierarchy.id	string	'id'	Node identifier field
hierarchy.parent	string	'parent'	Parent reference field
orientation	string	'horizontal'	Layout direction
linkStyle	string	'curve'	Link curve style
colorScheme	string	'schemeTableau10'	Color palette

Basic Example

View Source

type: dendrogram
engine: d3
title: Classification Tree
orientation: horizontal
width: 550
height: 400
hierarchy:
  id: name
  parent: parent
data:
  source: '[{"name": "Animals", "parent": null}, {"name": "Mammals", "parent": "Animals"}, {"name": "Birds", "parent": "Animals"}, {"name": "Dogs", "parent": "Mammals"}, {"name": "Cats", "parent": "Mammals"}, {"name": "Eagles", "parent": "Birds"}, {"name": "Sparrows", "parent": "Birds"}]'

Icicle

Partition a hierarchy into stacked rectangular segments that flow from root to leaves. Icicle charts resemble treemaps rotated 90 degrees, with levels stacking horizontally or vertically. They preserve the tree structure more explicitly than treemaps, making navigation from parent to child intuitive.

Configuration

Parameter	Type	Default	Description
type	string	-	'icicle'
hierarchy.id	string	'id'	Node identifier field
hierarchy.parent	string	'parent'	Parent reference field
hierarchy.value	string	'value'	Size value field
orientation	string	'vertical'	Layout direction
padding	number	1	Gap between cells
colorScheme	string	'schemeTableau10'	Color palette

Basic Example

View Source

type: icicle
engine: d3
title: Directory Structure
orientation: vertical
width: 550
height: 400
hierarchy:
  id: name
  parent: parent
  value: size
data:
  source: '[{"name": "project", "parent": null, "size": 0}, {"name": "src", "parent": "project", "size": 0}, {"name": "tests", "parent": "project", "size": 0}, {"name": "main.ts", "parent": "src", "size": 300}, {"name": "app.ts", "parent": "src", "size": 250}, {"name": "helpers.ts", "parent": "src", "size": 150}, {"name": "main.test.ts", "parent": "tests", "size": 180}, {"name": "app.test.ts", "parent": "tests", "size": 120}]'

Tidy Tree

Lay out tree nodes with optimized spacing that prevents overlap while maintaining compact form. Tidy trees produce cleaner, more readable results than basic dendrograms, especially for trees with uneven branch depths. Use them for org charts, decision trees, and any hierarchy where readability matters.

Configuration

Parameter	Type	Default	Description
type	string	-	'tidy-tree'
hierarchy.id	string	'id'	Node identifier field
hierarchy.parent	string	'parent'	Parent reference field
orientation	string	'horizontal'	Layout direction
nodeSize	array	[20, 100]	Node spacing [height, width]
colorScheme	string	'schemeTableau10'	Color palette

Basic Example

View Source

type: tidy-tree
engine: d3
title: Organization Chart
orientation: horizontal
width: 600
height: 400
hierarchy:
  id: name
  parent: parent
data:
  source: '[{"name": "CEO", "parent": null}, {"name": "CTO", "parent": "CEO"}, {"name": "CFO", "parent": "CEO"}, {"name": "VP Engineering", "parent": "CTO"}, {"name": "VP Product", "parent": "CTO"}, {"name": "Controller", "parent": "CFO"}, {"name": "Treasurer", "parent": "CFO"}]'

---

Type Aliases

Primary	Aliases
treemap	tree-map, hierarchy/treemap
sunburst	radial-tree, hierarchy/sunburst
circle-packing	packed-circles, hierarchy/circle-packing
dendrogram	cluster, hierarchy/dendrogram
icicle	partition, hierarchy/icicle
tidy-tree	tree, hierarchy/tidy-tree