Radar

// Radar chart — several subjects scored on the same axes.
// Honest caveat: area is not meaningful (it changes with axis order), so use
// it for shape comparison, not for "which is bigger".

const axes = ['Security', 'Scalability', 'Cost', 'Usability', 'Observability', 'Portability'];
const subjects = [
  { name: 'Current state', values: [2, 2, 3, 3, 1, 2] },
  { name: 'Target state',  values: [5, 4, 3, 4, 5, 4] },
  { name: 'Vendor A',      values: [4, 5, 2, 3, 4, 2] },
];
const MAX = 5;

const radius = Math.min(width, height) / 2 - 90;
const angle = i => (i / axes.length) * 2 * Math.PI - Math.PI / 2;
const r = d3.scaleLinear().domain([0, MAX]).range([0, radius]);
const color = d3.scaleOrdinal(subjects.map(s => s.name), theme.palette);

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', theme.muted)
    .attr('stroke-opacity', 0.25)
  .selectAll('circle')
  .data(d3.range(1, MAX + 1))
  .join('circle')
    .attr('r', d => r(d));

svg.append('g')
    .attr('stroke', theme.muted)
    .attr('stroke-opacity', 0.35)
  .selectAll('line')
  .data(axes)
  .join('line')
    .attr('x1', 0).attr('y1', 0)
    .attr('x2', (_, i) => Math.cos(angle(i)) * radius)
    .attr('y2', (_, i) => Math.sin(angle(i)) * radius);

svg.append('g')
    .attr('fill', theme.foreground)
    .attr('text-anchor', 'middle')
  .selectAll('text')
  .data(axes)
  .join('text')
    .attr('x', (_, i) => Math.cos(angle(i)) * (radius + 22))
    .attr('y', (_, i) => Math.sin(angle(i)) * (radius + 22))
    .attr('dy', '0.35em')
    .text(d => d);

// curveLinearClosed joins the last point back to the first; without it the
// polygon has a gap at 12 o'clock.
const line = d3.lineRadial()
    .curve(d3.curveLinearClosed)
    .angle((_, i) => (i / axes.length) * 2 * Math.PI)
    .radius(d => r(d));

svg.append('g')
  .selectAll('path')
  .data(subjects)
  .join('path')
    .attr('d', d => line(d.values))
    .attr('fill', d => color(d.name))
    .attr('fill-opacity', 0.15)
    .attr('stroke', d => color(d.name))
    .attr('stroke-width', 2);

const legend = svg.append('g')
    .attr('transform', `translate(${-width / 2 + 16},${-height / 2 + 20})`);
legend.selectAll('g')
  .data(subjects)
  .join('g')
    .attr('transform', (_, i) => `translate(0,${i * 18})`)
    .call(g => g.append('rect')
        .attr('width', 11).attr('height', 11).attr('rx', 2)
        .attr('fill', d => color(d.name)))
    .call(g => g.append('text')
        .attr('x', 16).attr('y', 9)
        .attr('fill', theme.foreground).text(d => d.name));