Tidy tree

structure

A tidy tree. The default for anything with one parent per node.

• Format.d3
• Length68 lines
• Includesnone

The source

68 lines of D3 JavaScript, and uses only the bundled D3 build. Copy it, or open the template inside Gnomon and render it as it is.

// Tidy tree — Reingold–Tilford. The layout for an org chart, a decision
// tree, or any structure where depth means something.

const data = {
  name: 'Platform',
  children: [
    { name: 'Experience', children: [
      { name: 'Web' }, { name: 'Mobile' }, { name: 'Design system' },
    ]},
    { name: 'Domain', children: [
      { name: 'Orders', children: [{ name: 'Fulfilment' }, { name: 'Returns' }] },
      { name: 'Catalogue' },
      { name: 'Payments', children: [{ name: 'Ledger' }, { name: 'Payouts' }] },
    ]},
    { name: 'Platform', children: [
      { name: 'Data' }, { name: 'Infra' }, { name: 'Security' },
    ]},
  ],
};

const root = d3.hierarchy(data);
const dx = 26;
const dy = (width - 200) / (root.height + 1);
d3.tree().nodeSize([dx, dy])(root);

// Node coordinates come out centred on zero; measure the extent and set the
// viewBox from it rather than guessing a translate.
let x0 = Infinity;
let x1 = -Infinity;
root.each(d => {
  if (d.x > x1) x1 = d.x;
  if (d.x < x0) x0 = d.x;
});
const boxHeight = x1 - x0 + dx * 2;

const svg = d3.select(container).append('svg')
    .attr('viewBox', [-dy / 2, x0 - dx, width, boxHeight])
    .attr('width', width)
    .attr('height', boxHeight)
    .attr('font-family', 'system-ui, sans-serif')
    .attr('font-size', 11);

svg.append('g')
    .attr('fill', 'none')
    .attr('stroke', theme.muted)
    .attr('stroke-opacity', 0.5)
    .attr('stroke-width', 1.5)
  .selectAll('path')
  .data(root.links())
  .join('path')
    .attr('d', d3.linkHorizontal().x(d => d.y).y(d => d.x));

const node = svg.append('g')
  .selectAll('g')
  .data(root.descendants())
  .join('g')
    .attr('transform', d => `translate(${d.y},${d.x})`);

node.append('circle')
    .attr('r', 4)
    .attr('fill', d => d.children ? theme.accent : theme.palette[4]);

node.append('text')
    .attr('dy', '0.32em')
    .attr('x', d => d.children ? -8 : 8)
    .attr('text-anchor', d => d.children ? 'end' : 'start')
    .attr('fill', theme.foreground)
    .text(d => d.data.name);

Others in D3 visualisations

• Sankey — request flowFlow with volume. The best chart here for "where does it all go".
• Chord — service interactionWho talks to whom, when the traffic is bidirectional.
• Arc diagram — dependenciesNodes on one axis, arcs above. Readable where a force graph is not, provided the ordering means something.
• Adjacency matrix — couplingAdjacency matrix. Unfashionable, and better than a force graph for dense dependencies.
• Edge bundling — module importsHierarchical edge bundling. For import graphs big enough that straight edges become a hairball.
• Sunburst — nested spendNested hierarchy, radially. Prettier than an icicle, harder to compare.
• Icicle — nested spend (linear)A sunburst unrolled flat. Harder to love, much easier to compare siblings.
• Circle packing — nested sizeCircle packing. Nested size when the nesting matters more than reading exact areas.
• Treemap — portfolio costNested size. Good for cost, storage, lines of code.
• Radial tree — structure (radial)The same tree bent into a circle. Fits more depth on a slide, costs you easy comparison.
• Dendrogram — clusteringClustering, with join height carrying the distance. Not merely a tree with curves.
• Indented tree — file/spec outlineA file or spec outline. The chart that looks like the thing it describes.
• Force graph — service mapService map. Use for clusters, not for reading individual edges.
• Force graph — disjoint clustersForce graph that keeps unconnected clusters apart rather than flinging them off screen.
• Force graph — radial tiersForce layout pinned to rings, so tier is a position instead of a colour legend.
• Directed graph — call directionDirected edges with arrowheads. For when direction is the question, not just adjacency.
• Force tree — blast radiusBlast radius from one node: what breaks if this goes.
• Calendar heatmap — daily activityDaily activity over a year: deploys, incidents, commits.
• Streamgraph — shifting mixShifting composition over time. Good for the mix, poor for reading any single value.
• Gantt — delivery roadmapDelivery roadmap, rendered from data.
• Radar — capability scoringCapability scoring across axes. Fine for one subject, misleading with four overlaid.
• Bullet chart — target vs actualTarget against actual, in one line. The chart a gauge wishes it were.
• Beeswarm — distribution by groupEvery point, grouped, without the overplotting a strip plot suffers.
• Horizon chart — many series, little spaceMany series in little space. Takes a moment to learn, then very dense.
• Slope chart — before and afterBefore and after, two points, one line each. Devastatingly clear.
• Parallel coordinates — multi-criteriaMulti-criteria comparison: for option analysis.
• Box plot — latency distributionLatency distribution. The chart that shows the tail a mean hides.
• Grouped bar — category comparisonCategory comparison. Unglamorous, and usually the right answer.
• Multi-line — metrics over timeMetrics over time. Keep it under about five series, or switch to horizon.