Treemap

// Treemap — the default answer to "what do we spend IT on".
// `tile(d3.treemapSquarify)` keeps rectangles close to square, which is what
// makes areas comparable by eye.

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.treemap()
    .tile(d3.treemapSquarify)
    .size([width, height - 24])
    .paddingTop(19)
    .paddingInner(2)
    .round(true)(
  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 fmt = d3.format(',');

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 group = svg.selectAll('g.group')
  .data(root.descendants().filter(d => d.depth === 1))
  .join('g')
    .attr('class', 'group')
    .attr('transform', d => `translate(${d.x0},${d.y0})`);

group.append('rect')
    .attr('width', d => d.x1 - d.x0)
    .attr('height', d => d.y1 - d.y0)
    .attr('rx', 3)
    .attr('fill', d => color(d.data.name))
    .attr('fill-opacity', 0.18);

group.append('text')
    .attr('x', 5)
    .attr('y', 13)
    .attr('fill', d => color(d.data.name))
    .attr('font-weight', 600)
    .text(d => `${d.data.name} · £${fmt(d.value)}k`);

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

leaf.append('rect')
    .attr('width', d => Math.max(0, d.x1 - d.x0))
    .attr('height', d => Math.max(0, d.y1 - d.y0))
    .attr('rx', 2)
    .attr('fill', d => color(topOf(d)))
    .attr('fill-opacity', 0.85);

leaf.append('text')
    .attr('x', 5)
    .attr('y', 14)
    .attr('fill', theme.mode === 'dark' ? '#ffffff' : '#1a1a1a')
    .attr('display', d => (d.x1 - d.x0) > 70 && (d.y1 - d.y0) > 24 ? null : 'none')
    .text(d => d.data.name);

leaf.append('text')
    .attr('x', 5)
    .attr('y', 28)
    .attr('fill', theme.mode === 'dark' ? '#ffffffbb' : '#1a1a1abb')
    .attr('display', d => (d.x1 - d.x0) > 70 && (d.y1 - d.y0) > 40 ? null : 'none')
    .text(d => `£${fmt(d.value)}k`);

svg.append('text')
    .attr('x', 0)
    .attr('y', height - 6)
    .attr('fill', theme.muted)
    .text(`Total £${fmt(root.value)}k · area = annual run cost`);