Radar

capability scoring

Capability scoring across axes. Fine for one subject, misleading with four overlaid.

Radar — capability scoring: rendered example
Rendered by Gnomon from the source below. No edits.

The source

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

// 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));

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