Radial tree

structure (radial)

The same tree bent into a circle. Fits more depth on a slide, costs you easy comparison.

• Format.d3
• Length69 lines
• Includesnone

The source

69 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.

// Radial tree — the same layout as a tidy tree, wrapped into a circle.
// Fits far more leaves in the same pane; costs you the easy left-to-right
// read of depth.

const data = {
  name: 'root',
  children: [
    { name: 'ingest', children: [
      { name: 'events' }, { name: 'batch' }, { name: 'cdc' }, { name: 'api' },
    ]},
    { name: 'store', children: [
      { name: 'bronze' }, { name: 'silver' }, { name: 'gold' },
      { name: 'archive' }, { name: 'vault' },
    ]},
    { name: 'serve', children: [
      { name: 'bi' }, { name: 'ml' }, { name: 'reverse-etl' }, { name: 'exports' },
    ]},
    { name: 'govern', children: [
      { name: 'catalog' }, { name: 'lineage' }, { name: 'quality' },
      { name: 'access' },
    ]},
  ],
};

const radius = Math.min(width, height) / 2 - 80;

const root = d3.tree()
    .size([2 * Math.PI, radius])
    .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth)(
  d3.hierarchy(data).sort((a, b) => d3.ascending(a.data.name, b.data.name)),
);

const color = d3.scaleOrdinal(data.children.map(c => c.name), theme.palette);
const topOf = d => d.ancestors().find(a => a.depth === 1)?.data.name ?? '';

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

svg.append('g')
    .attr('fill', 'none')
    .attr('stroke-opacity', 0.5)
    .attr('stroke-width', 1.5)
  .selectAll('path')
  .data(root.links())
  .join('path')
    .attr('stroke', d => d.target.depth === 1 ? theme.muted : color(topOf(d.target)))
    .attr('d', d3.linkRadial().angle(d => d.x).radius(d => d.y));

const node = svg.append('g')
  .selectAll('g')
  .data(root.descendants())
  .join('g')
    .attr('transform', d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`);

node.append('circle')
    .attr('r', d => d.depth === 0 ? 5 : 3.5)
    .attr('fill', d => d.depth === 0 ? theme.foreground : color(topOf(d)));

node.append('text')
    .attr('dy', '0.31em')
    .attr('x', d => (d.x < Math.PI) === !d.children ? 7 : -7)
    .attr('text-anchor', d => (d.x < Math.PI) === !d.children ? 'start' : 'end')
    .attr('transform', d => d.x >= Math.PI ? 'rotate(180)' : null)
    .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.
• Tidy tree — structureA tidy tree. The default for anything with one parent per node.
• 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.