import { TreeDiagram } from "semiotic"
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.
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.
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.
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. |
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. |
frameProps | object | — | — | Additional StreamNetworkFrame props for advanced customization. Escape hatch to the full Frame API. |
Graduating to the Frame
When you need more control — custom node rendering, animations, or mixed layouts — graduate toStreamNetworkFrame directly. EveryTreeDiagram is just a configuredStreamNetworkFrame under the hood.
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={{ customNodeIcon: ({ d }) => ( <g> <rect x={-30} y={-12} width={60} height={24} rx={4} fill="white" stroke="#333" /> <text textAnchor="middle" dy={4} fontSize={10}>{d.name}</text> </g> ), 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