Icicle

nested spend (linear)

A sunburst unrolled flat. Harder to love, much easier to compare siblings.

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

// Icicle — a sunburst unrolled. Same data, but labels stay horizontal,
// which is the right trade when names are long.

const data = {
  name: 'Portfolio',
  children: [
    { name: 'Customer', children: [
      { name: 'Quote Engine',      value: 1240 },
      { name: 'Broker Portal',     value: 890  },
      { name: 'Customer Portal',   value: 1120 },
      { name: 'Contact Centre',    value: 1680 },
      { name: 'Campaign Manager',  value: 260  },
    ]},
    { name: 'Policy', children: [
      { name: 'Policy Admin Core', value: 4820 },
      { name: 'Legacy Ledger',     value: 1360 },
      { name: 'Underwriting',      value: 1140 },
      { name: 'Risk Scoring',      value: 520  },
    ]},
    { name: 'Claims', children: [
      { name: 'Claims Handling',   value: 2140 },
      { name: 'Fraud Detection',   value: 680  },
      { name: 'Supplier Network',  value: 410  },
    ]},
    { name: 'Enterprise', children: [
      { name: 'Data Lakehouse',    value: 1840 },
      { name: 'BI & Reporting',    value: 720  },
      { name: 'Cloud Platform',    value: 2960 },
      { name: 'Network Core',      value: 1340 },
    ]},
  ],
};

const root = d3.partition().size([height, width])(
  d3.hierarchy(data)
    .sum(d => d.value || 0)
    .sort((a, b) => b.value - a.value),
);

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', [0, 0, width, height])
    .attr('width', width)
    .attr('height', height)
    .attr('font-family', 'system-ui, sans-serif')
    .attr('font-size', 11);

const cell = svg.selectAll('g')
  .data(root.descendants())
  .join('g')
    .attr('transform', d => `translate(${d.y0},${d.x0})`);

cell.append('rect')
    .attr('width', d => Math.max(0, d.y1 - d.y0 - 1))
    .attr('height', d => Math.max(0, d.x1 - d.x0 - 1))
    .attr('rx', 2)
    .attr('fill', d => d.depth === 0 ? theme.muted : color(topOf(d)))
    .attr('fill-opacity', d => d.depth <= 1 ? 0.95 : 0.6);

cell.append('text')
    .attr('x', 6)
    .attr('y', d => (d.x1 - d.x0) / 2)
    .attr('dy', '0.35em')
    .attr('fill', theme.mode === 'dark' ? '#ffffff' : '#1a1a1a')
    .attr('display', d => (d.x1 - d.x0) > 14 ? null : 'none')
    .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.
• 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.
• 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.