Circle packing

nested size

Circle packing. Nested size when the nesting matters more than reading exact areas.

Circle packing — nested size: rendered example
Rendered by Gnomon from the source below. No edits.

The source

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

// Circle packing — nesting where relative *area* is the message.
// Weaker than a treemap for precise comparison, stronger for "which of these
// groups is enormous".

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.pack().size([width - 4, height - 4]).padding(4)(
  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', 10)
    .attr('text-anchor', 'middle');

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

node.append('circle')
    .attr('r', d => d.r)
    .attr('fill', d => d.depth === 0 ? 'none' : color(topOf(d)))
    .attr('fill-opacity', d => d.children ? 0.15 : 0.85)
    .attr('stroke', d => d.children ? color(topOf(d)) : 'none')
    .attr('stroke-opacity', 0.5);

// Group names above their circle, leaf names inside — the two never collide.
node.filter(d => d.depth === 1)
  .append('text')
    .attr('y', d => -d.r - 5)
    .attr('fill', d => color(topOf(d)))
    .attr('font-size', 12)
    .text(d => d.data.name);

node.filter(d => !d.children && d.r > 16)
  .append('text')
    .attr('dy', '0.35em')
    .attr('fill', theme.mode === 'dark' ? '#ffffff' : '#1a1a1a')
    .text(d => d.data.name.length > 14 ? d.data.name.slice(0, 13) + '…' : d.data.name);

Render this offline

This template ships in Gnomon and renders on your machine, with no account and nothing sent to a server. The browser editor is free and needs no install.

Get GnomonOpen the browser editor

Others in D3 visualisations