Parallel coordinates

multi-criteria

Multi-criteria comparison: for option analysis.

Parallel coordinates — multi-criteria: rendered example
Rendered by Gnomon from the source below. No edits.

The source

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

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

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