Charts — Tree Diagram — 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/tree-diagram

TreeDiagram

charts

import { TreeDiagram } from "semiotic"

Wraps: StreamNetworkFrame

TreeDiagram visualizes hierarchical data structures using a variety of layouts. Pass a nested JSON object and choose from tree, cluster, treemap, partition, or circle-packing algorithms. TreeDiagram is ideal for organizational charts, file systems, taxonomies, and any data with parent-child relationships.

Quick Start

The simplest tree diagram requires just a data object with nested children arrays.

Skip to data table

import { TreeDiagram } from "semiotic" const frameProps = { /* --- Data --- */ data: { name: "CEO", children: [ { name: "VP Engineering", children: [ { name: "Frontend Lead", children: [...] }, { name: "Backend Lead", children: [...] }, ], }, { name: "VP Design", children: [...] }, { name: "VP Marketing", children: [...] }, ], } } export default () => { return <TreeDiagram {...frameProps} /> }

Examples

Horizontal Dendrogram

Use layout="cluster" withorientation="horizontal" for a dendrogram that flows left to right. Enable colorByDepth to visually distinguish hierarchy levels.

Skip to data table

import { TreeDiagram } from "semiotic" const frameProps = { /* --- Data --- */ data: orgData, /* --- Layout --- */ orientation: "horizontal", layout: "cluster", /* --- Customize --- */ colorByDepth: true } export default () => { return <TreeDiagram {...frameProps} /> }

Radial Tree

Set orientation="radial" to arrange nodes in a circular layout, which works well for wide hierarchies and makes efficient use of space.

Skip to data table

import { TreeDiagram } from "semiotic" const frameProps = { /* --- Data --- */ data: orgData, /* --- Layout --- */ orientation: "radial", layout: "tree", /* --- Customize --- */ colorByDepth: true, nodeSize: 6 } export default () => { return <TreeDiagram {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`data`	object	Yes	—	Hierarchical data object with a children property (or custom accessor).
`layout`	"tree" \| "cluster" \| "partition" \| "treemap" \| "circlepack"	—	`"tree"`	Tree layout algorithm. Different layouts suit different data and use cases.
`orientation`	"vertical" \| "horizontal" \| "radial"	—	`"vertical"`	Projection orientation: top-to-bottom, left-to-right, or circular.
`childrenAccessor`	string \| function	—	`"children"`	Field name or function to access children array from each node.
`valueAccessor`	string \| function	—	`"value"`	Field name or function to access node value. Used by treemap, circlepack, and partition layouts 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 name or custom colors array.
`colorByDepth`	boolean	—	`false`	Color nodes by their depth level in the hierarchy.
`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.
`edgeStyle`	"line" \| "curve"	—	`"curve"`	Edge rendering style: straight lines or curved connectors.
`nodeLabel`	string \| function	—	`(uses nodeIdAccessor)`	Label accessor for nodes.
`showLabels`	boolean	—	`true`	Show node labels.
`nodeSize`	number	—	`5`	Node circle radius for tree and cluster layouts.
`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: 50, bottom: 50, left: 50, right: 50 }`	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). Nodes stay upright and links lie on the ground; elevation can lift nodes by a field. 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. Escape hatch to the full Frame API.

When to Use the Frame

Use StreamNetworkFrame directly for custom node rendering, animations, or mixed layouts. TreeDiagram delegates to a configuredStreamNetworkFrame.

Chart (simple)

JSX

import { TreeDiagram } from "semiotic" <TreeDiagram data={hierarchyData} layout="cluster" orientation="horizontal" colorByDepth={true} showLabels={true} nodeSize={6} />

Frame (full control)

JSX

import { StreamNetworkFrame } from "semiotic" <StreamNetworkFrame edges={hierarchyData} nodeIDAccessor="name" networkType={{ type: "cluster", projection: "horizontal" }} hierarchyChildren={d => d.children} nodeStyle={d => ({ fill: depthColorScale(d.depth), stroke: "black", strokeWidth: 1 })} edgeStyle={() => ({ stroke: "#999", fill: "none" })} nodeSizeAccessor={() => 6} nodeLabels={d => d.name} hoverAnnotation={true} size={[600, 600]} />

The frameProps prop on TreeDiagram lets you pass any StreamNetworkFrame prop without fully graduating:

JSX

// Use frameProps as an escape hatch <TreeDiagram data={orgChart} layout="tree" orientation="vertical" frameProps={{ nodeStyle: () => ({ fill: "white", stroke: "#333", strokeWidth: 1 }), nodeSize: 10, annotations: [ { type: "node", name: "CEO", label: "You are here" } ] }} />

ForceDirectedGraph — force-directed layout for general network visualization
SankeyDiagram — flow diagram showing magnitude of movement between nodes
ChordDiagram — circular layout for showing bidirectional flow between entities
StreamNetworkFrame — the underlying Frame with full control over every rendering detail
Tooltips — custom tooltip content and positioning