Sunburst

// Sunburst — a treemap that keeps the hierarchy legible.
// Angle is proportional to value, so a ring segment's width is its share of
// the parent. Good for "where does the money go" at two or three levels.

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 radius = Math.min(width, height) / 2 - 20;

const root = d3.partition().size([2 * Math.PI, radius])(
  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 arc = d3.arc()
    .startAngle(d => d.x0)
    .endAngle(d => d.x1)
    .padAngle(0.005)
    .padRadius(radius / 2)
    .innerRadius(d => d.y0)
    .outerRadius(d => d.y1 - 1);

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', 10);

svg.append('g')
  .selectAll('path')
  .data(root.descendants().filter(d => d.depth))
  .join('path')
    .attr('d', arc)
    .attr('fill', d => color(topOf(d)))
    // Leaves sit lighter than their parent ring so the levels separate
    // without needing a second colour scale.
    .attr('fill-opacity', d => d.depth === 1 ? 0.95 : 0.6)
    .attr('stroke', theme.background)
    .attr('stroke-width', 0.5);

// Label only segments with room for text — an unreadable label is worse
// than none, and rotated 4px slivers are what make sunbursts look cheap.
svg.append('g')
    .attr('pointer-events', 'none')
    .attr('text-anchor', 'middle')
    .attr('fill', theme.foreground)
  .selectAll('text')
  .data(root.descendants().filter(d => d.depth && (d.x1 - d.x0) > 0.06))
  .join('text')
    .attr('transform', d => {
      const angle = (d.x0 + d.x1) / 2 * 180 / Math.PI - 90;
      const r = (d.y0 + d.y1) / 2;
      return `rotate(${angle}) translate(${r},0) rotate(${angle > 90 ? 180 : 0})`;
    })
    .attr('dy', '0.35em')
    .text(d => d.data.name);

svg.append('text')
    .attr('text-anchor', 'middle')
    .attr('fill', theme.muted)
    .attr('font-size', 12)
    .text(`£${d3.format(',')(root.value)}k`);