Gantt

delivery roadmap

Delivery roadmap, rendered from data.

Gantt — delivery roadmap: rendered example
Rendered by Gnomon from the source below. No edits.

The source

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

// Gantt / roadmap — bars on a time axis, grouped by workstream.
// Dependencies are drawn as elbow connectors, which is what separates a
// roadmap from a list of coloured rectangles.

const tasks = [
  { id: 'discovery', stream: 'Foundations', label: 'Discovery',        start: '2026-01-05', end: '2026-02-13' },
  { id: 'platform',  stream: 'Foundations', label: 'Platform build',   start: '2026-02-16', end: '2026-05-01', after: 'discovery' },
  { id: 'identity',  stream: 'Foundations', label: 'Identity',         start: '2026-03-02', end: '2026-04-24' },

  { id: 'orders',    stream: 'Domain',      label: 'Orders service',   start: '2026-04-06', end: '2026-07-03', after: 'platform' },
  { id: 'payments',  stream: 'Domain',      label: 'Payments',         start: '2026-05-11', end: '2026-08-07' },
  { id: 'catalogue', stream: 'Domain',      label: 'Catalogue',        start: '2026-06-01', end: '2026-08-28' },

  { id: 'pilot',     stream: 'Rollout',     label: 'Pilot',            start: '2026-07-06', end: '2026-09-04', after: 'orders' },
  { id: 'migrate',   stream: 'Rollout',     label: 'Migration waves',  start: '2026-09-07', end: '2026-12-18', after: 'pilot' },
  { id: 'decomm',    stream: 'Rollout',     label: 'Decommission',     start: '2026-11-02', end: '2026-12-31' },
];

const parse = s => new Date(s + 'T00:00:00Z');
const rows = tasks.map((t, i) => ({ ...t, index: i, s: parse(t.start), e: parse(t.end) }));
const byId = new Map(rows.map(r => [r.id, r]));

const margin = { top: 44, right: 24, bottom: 24, left: 150 };
const rowHeight = 28;
const barHeight = 16;
const boxHeight = margin.top + rows.length * rowHeight + margin.bottom;

const x = d3.scaleTime()
    .domain([d3.min(rows, d => d.s), d3.max(rows, d => d.e)])
    .range([margin.left, width - margin.right]);

const streams = Array.from(new Set(rows.map(d => d.stream)));
const color = d3.scaleOrdinal(streams, theme.palette);
const y = d => margin.top + d.index * rowHeight;

const svg = d3.select(container).append('svg')
    .attr('viewBox', [0, 0, width, boxHeight])
    .attr('width', width)
    .attr('height', boxHeight)
    .attr('font-family', 'system-ui, sans-serif')
    .attr('font-size', 11);

// Month gridlines behind everything — a roadmap without them is unreadable.
svg.append('g')
    .attr('stroke', theme.muted)
    .attr('stroke-opacity', 0.18)
  .selectAll('line')
  .data(x.ticks(d3.utcMonth))
  .join('line')
    .attr('x1', d => x(d)).attr('x2', d => x(d))
    .attr('y1', margin.top - 8)
    .attr('y2', boxHeight - margin.bottom);

svg.append('g')
    .attr('transform', `translate(0,${margin.top - 12})`)
    .call(d3.axisTop(x).ticks(d3.utcMonth).tickFormat(d3.utcFormat('%b')))
    .call(g => g.select('.domain').remove())
    .call(g => g.selectAll('text').attr('fill', theme.muted))
    .call(g => g.selectAll('line').attr('stroke', theme.muted));

svg.append('g')
    .attr('fill', 'none')
    .attr('stroke', theme.muted)
    .attr('stroke-opacity', 0.7)
    .attr('stroke-dasharray', '2,3')
  .selectAll('path')
  .data(rows.filter(d => d.after && byId.has(d.after)))
  .join('path')
    .attr('d', d => {
      const from = byId.get(d.after);
      const fx = x(from.e);
      const fy = y(from) + barHeight / 2;
      const tx = x(d.s);
      const ty = y(d) + barHeight / 2;
      const mid = fx + Math.max(8, (tx - fx) / 2);
      return `M${fx},${fy}H${mid}V${ty}H${tx}`;
    });

const row = svg.append('g')
  .selectAll('g')
  .data(rows)
  .join('g')
    .attr('transform', d => `translate(0,${y(d)})`);

row.append('rect')
    .attr('x', d => x(d.s))
    .attr('width', d => Math.max(2, x(d.e) - x(d.s)))
    .attr('height', barHeight)
    .attr('rx', 3)
    .attr('fill', d => color(d.stream));

row.append('text')
    .attr('x', margin.left - 10)
    .attr('y', barHeight / 2)
    .attr('dy', '0.35em')
    .attr('text-anchor', 'end')
    .attr('fill', theme.foreground)
    .text(d => d.label);

svg.append('g')
    .attr('transform', 'translate(14,20)')
  .selectAll('g')
  .data(streams)
  .join('g')
    .attr('transform', (_, i) => `translate(${i * 110},0)`)
    .call(g => g.append('rect')
        .attr('width', 10).attr('height', 10).attr('rx', 2)
        .attr('fill', d => color(d)))
    .call(g => g.append('text')
        .attr('x', 15).attr('y', 9)
        .attr('fill', theme.muted).text(d => d));

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