Parallel coordinates

// Parallel coordinates — one line per option, one vertical axis per
// criterion. The tool for "we scored six vendors on five dimensions"; crossing
// lines between two axes mean those criteria trade off against each other.

const dimensions = [
  { key: 'cost',     label: 'Cost (£k)',    invert: true  },
  { key: 'latency',  label: 'p95 (ms)',     invert: true  },
  { key: 'coverage', label: 'Feature fit',  invert: false },
  { key: 'maturity', label: 'Maturity',     invert: false },
  { key: 'lockIn',   label: 'Lock-in risk', invert: true  },
];

const options = [
  { name: 'Build in-house', cost: 820, latency: 180, coverage: 9, maturity: 4, lockIn: 1 },
  { name: 'Vendor A',       cost: 340, latency: 120, coverage: 7, maturity: 9, lockIn: 8 },
  { name: 'Vendor B',       cost: 260, latency: 260, coverage: 6, maturity: 7, lockIn: 6 },
  { name: 'Vendor C',       cost: 610, latency:  90, coverage: 8, maturity: 8, lockIn: 7 },
  { name: 'Open source',    cost: 150, latency: 240, coverage: 5, maturity: 6, lockIn: 2 },
  { name: 'Hybrid',         cost: 480, latency: 140, coverage: 8, maturity: 6, lockIn: 4 },
];

const margin = { top: 54, right: 150, bottom: 40, left: 60 };
const x = d3.scalePoint()
    .domain(dimensions.map(d => d.key))
    .range([margin.left, width - margin.right]);

// "Invert" flips the axis so that up is always better — without it, a reader
// has to remember which axes are good-high and which are good-low.
const y = new Map(dimensions.map(dim => {
  const extent = d3.extent(options, o => o[dim.key]);
  const range = dim.invert
    ? [margin.top, height - margin.bottom]
    : [height - margin.bottom, margin.top];
  return [dim.key, d3.scaleLinear().domain(extent).nice().range(range)];
}));

const color = d3.scaleOrdinal(options.map(o => o.name), theme.palette);
const line = d3.line()
    .x(([key]) => x(key))
    .y(([key, value]) => y.get(key)(value))
    .curve(d3.curveMonotoneX);

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

svg.append('g')
    .attr('fill', 'none')
    .attr('stroke-width', 2)
    .attr('stroke-opacity', 0.8)
  .selectAll('path')
  .data(options)
  .join('path')
    .attr('stroke', d => color(d.name))
    .attr('d', d => line(dimensions.map(dim => [dim.key, d[dim.key]])));

svg.append('g')
  .selectAll('g')
  .data(dimensions)
  .join('g')
    .attr('transform', d => `translate(${x(d.key)},0)`)
    .each(function (d) {
      d3.select(this).call(d3.axisLeft(y.get(d.key)).ticks(5));
    })
    .call(g => g.selectAll('text').attr('fill', theme.muted))
    .call(g => g.selectAll('line').attr('stroke', theme.muted))
    .call(g => g.selectAll('.domain').attr('stroke', theme.muted))
    .append('text')
      .attr('y', margin.top - 22)
      .attr('text-anchor', 'middle')
      .attr('fill', theme.foreground)
      .attr('font-weight', 600)
      .text(d => d.label);

svg.append('text')
    .attr('x', margin.left)
    .attr('y', 22)
    .attr('fill', theme.muted)
    .text('every axis oriented so higher = better');

const legend = svg.append('g')
    .attr('transform', `translate(${width - margin.right + 24},${margin.top})`);
legend.selectAll('g')
  .data(options)
  .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));