16 · A Bump of Slow Traffic: Which Way Does a Jam Move?

Put a patch of dense traffic on a ring road and watch it drive forward, run backward or stand still

On a busy road you often meet a short stretch where the cars are packed closer and drive slower, and then the traffic opens up again. That stretch is the bump: a patch of denser, slower traffic. Where does it go? Here is the experiment, run by the traffic model of Lecture 4:

• The road: one lane, 10 km long, closed into a ring like a test track, with no ramps. No car gets on or off, so the number of cars never changes. (A ring has no ends, so nothing at the edges disturbs what you watch.)
• The traffic: cars evenly spaced all round the ring, at the background density you set. 25 veh/km is one car every 40 m.
• The bump: on one 2 km stretch, centred at km 3, the cars start closer together, with up to the extra density you set at its middle. At the default, 10 veh/km more: one car every 29 m instead of 40 m.
• The drivers: each one drives at the speed that the flow–density curve gives for the density around them (Greenshields’ curve or the course triangle). The closer the cars, the slower they drive.
• What you watch: six minutes of driving. The strip on top shows the road unrolled, with the cars on it.

NoteBefore you play: predict

Does the bump move forward with the cars, backward against them, or stay put? Answer twice, on the default Greenshields curve: for light traffic around it (25 veh/km), and for heavy traffic (100 veh/km). Does it keep its shape?

Live: a bump of slow traffic

Predict at 25 veh/km, does the bump drive as fast as the cars?

import {knob, seg, action, pauser, panel, row} from "../assets/controls.js"
// the copyright notice for figure licence lines in live figures; the years come from _copyright.yml (via the
// trgy-copyright-years tag that assets/figure-license.lua adds to every page)
trgyCopy = "© " + (document.querySelector('meta[name="trgy-copyright-years"]')?.content || "2026") + " Wuping Xin"
// The two fundamental diagrams of the course: Greenshields (teal) and the course triangle (violet). One lane.
lwr = {
  const VF = 100, KJG = 150, W = 20, KJT = 120, KCT = 20;
  return {
    "Greenshields": {Q: k => VF * k * (1 - k / KJG), V: k => VF * (1 - k / KJG), c: k => VF * (1 - 2 * k / KJG),
                     kc: KJG / 2, kj: KJG, colour: "#2a9d8f"},
    "Course triangle": {Q: k => Math.min(VF * k, W * (KJT - k)), V: k => k <= KCT ? VF : W * (KJT - k) / k,
                        c: k => (k < KCT ? VF : -W), kc: KCT, kj: KJT, colour: "#57068c"}
  };
}
onScreen = id => { const el = document.getElementById(id); if (!el) return true; const r = el.getBoundingClientRect(); return r.width > 0 && r.bottom > 0 && r.top < innerHeight; }
// .split-box puts the controls on top in one row and the figure below, at the card's full width (user, 2026-10-11):
// splitW is that width. pairFit: two plots side by side only when each stays at least about 340 px wide;
// otherwise they stack, each at the full width (never two half-width plots wrapped one under the other)
slidePortrait = !!document.querySelector(".reveal") && window.innerHeight > window.innerWidth
splitW = !!document.querySelector(".reveal") ? fullW - 50 : Math.max(240, fullW - 40)
pairFit = splitW >= 700

viewof bumpModel = seg(["Greenshields", "Course triangle"], {value: "Greenshields", label: "Diagram",
  format: d => window.innerWidth < 500 ? (d === "Greenshields" ? "Greenshields" : "Triangle") : d})
viewof bumpBg = knob({min: 5, max: 140, step: 1, value: 25, label: "Background density k (veh/km)"})
viewof bumpH = knob({min: 0, max: 30, step: 1, value: 10, label: "Extra density in the bump (veh/km)"})
viewof bumpT = knob({min: 0, max: 6, step: 0.05, value: 0, label: "Time (min)", format: m => m.toFixed(1)})
viewof bumpPause = pauser()
viewof bumpReplay = action("↻ Replay")

// Godunov's scheme on a 10 km ring: in each step every cell passes on the smaller of what it can send (its demand)
// and what the next cell can take (its supply).
bumpSim = {
  const M = lwr[bumpModel], L = 10, dx = 0.05, n = 200, dt = 0.9 * dx / 100, steps = Math.round(6 / 60 / dt);
  const bg = Math.min(bumpBg, M.kj - bumpH - 1);
  const x = Float64Array.from({length: n}, (_, i) => (i + 0.5) * dx);
  let k = x.map(xi => bg + bumpH * 0.5 * (1 + Math.cos(Math.PI * Math.max(-1, Math.min(1, (xi - 3) / 1)))));
  const frames = [Float64Array.from(k)], D = new Float64Array(n), S = new Float64Array(n), F = new Float64Array(n);
  const passed = [0];                                    // cars that have crossed km 0 so far

  for (let s = 0; s < steps; s++) {
    for (let i = 0; i < n; i++) { D[i] = M.Q(Math.min(k[i], M.kc)); S[i] = M.Q(Math.max(k[i], M.kc)); }
    for (let i = 0; i < n; i++) F[i] = Math.min(D[(i - 1 + n) % n], S[i]);
    const k2 = new Float64Array(n);
    for (let i = 0; i < n; i++) k2[i] = k[i] + dt / dx * (F[i] - F[(i + 1) % n]);
    k = k2; frames.push(k2); passed.push(passed[passed.length - 1] + F[0] * dt);
  }
  // 12 drawn cars, placed so the same number of vehicles lies between each pair; each drives at V(k) where it is
  const kAt = (f, xx) => { const u = ((xx % L) + L) % L / dx - 0.5, i = Math.floor(u), a = u - i;
    return f[((i % n) + n) % n] * (1 - a) + f[(((i + 1) % n) + n) % n] * a; };
  const total = frames[0].reduce((s, v) => s + v * dx, 0), nCars = 12, cars = [];
  let cum = 0, j = 0;
  for (let i = 0; i < n && j < nCars; i++) { cum += frames[0][i] * dx; while (j < nCars && cum >= (j + 0.5) * total / nCars) { cars.push(x[i]); j++; } }
  const paths = [], lastX = cars.slice();
  let pos = cars.slice();
  frames.forEach((f, s) => {
    // a car that comes round the ring again jumps from 10 km to 0: break its line there (x = NaN leaves a gap)
    pos.forEach((p, c) => { const xp = p % L;
      if (s > 0 && lastX[c] - xp > L / 2) paths.push({car: c, t: s * dt * 60, x: NaN});
      paths.push({car: c, t: s * dt * 60, x: xp}); lastX[c] = xp; });
    pos = pos.map(p => p + M.V(kAt(f, p)) * dt);
  });
  // the bump's speed: the centre of its extra cars, from minute 1 to minute 4 (a circular mean, as the road is a ring)
  const centre = f => { let re = 0, im = 0; f.forEach((v, i) => { const e = Math.max(0, v - bg), a = 2 * Math.PI * x[i] / L; re += e * Math.cos(a); im += e * Math.sin(a); });
    return Math.atan2(im, re) * L / (2 * Math.PI); };
  const i1 = Math.round(1 / 60 / dt), i4 = Math.round(4 / 60 / dt);
  let dC = centre(frames[i4]) - centre(frames[i1]); dC = ((dC + L / 2) % L + L) % L - L / 2;
  // the colour scale spans this run's own slowest and fastest traffic, at least 10 km/h wide
  let vLo = M.V(Math.max(...frames[0])), vHi = M.V(Math.min(...frames[0]));
  if (vHi - vLo < 10) { const m = (vHi + vLo) / 2; vLo = m - 5; vHi = m + 5; }
  return {M, bg, x, dx, dt, frames, passed, paths, L, vLo, vHi, speed: bumpH > 0 ? dC / (3 / 60) : NaN,
          extra: f => f.reduce((s, v) => s + (v - bg) * dx, 0)};
}

// Play: advance the clock a little every 60 ms; Replay starts again from 0.
bumpClock = {
  bumpReplay;
  const slider = viewof bumpT; slider.value = 0; slider.dispatchEvent(new Event("input", {bubbles: true}));
  while (true) {
    if (!onScreen("bump")) { yield Promises.delay(500, htl.html`<span></span>`); continue; }
    if (!viewof bumpPause.value && slider.value < 6) {
      slider.value = Math.min(6, +(slider.value + 0.05).toFixed(2));
      slider.dispatchEvent(new Event("input", {bubbles: true}));
    }
    yield Promises.delay(60, htl.html`<span></span>`);
  }
}

htl.html`<div class="split-controls"><div class="pullbox-title">The bump</div>${panel(viewof bumpModel, viewof bumpBg, viewof bumpH, viewof bumpT, row(viewof bumpPause, viewof bumpReplay))}</div>`

{
  const S = bumpSim, M = S.M, slide = !!document.querySelector(".reveal");
  const fi = Math.min(S.frames.length - 1, Math.round(bumpT / 60 / S.dt)), f = S.frames[fi];
  const two = pairFit, w = two ? Math.floor((splitW - 30) / 2) : splitW, h = slidePortrait ? 172 : slide ? 262 : (two ? 250 : 210);
  const prof = Array.from(S.x, (xx, i) => ({x: xx, k0: S.frames[0][i], k: f[i]}));
  const kTop = Math.max(40, Math.ceil((S.bg + bumpH + 15) / 20) * 20);
  const left = Plot.plot({
    width: w, height: h, style: {fontSize: "13px"}, marginBottom: 40, marginLeft: 48, marginRight: 14,
    x: {label: "Position along the ring (km)", domain: [0, 10], labelOffset: 34},
    y: {label: "Density k (veh/km)", domain: [0, kTop], grid: true},
    marks: [
      Plot.line(prof, {x: "x", y: "k0", stroke: "currentColor", strokeOpacity: 0.45, strokeDasharray: "5 4"}),
      Plot.line(prof, {x: "x", y: "k", stroke: M.colour === "#57068c" ? accent : M.colour, strokeWidth: 2.5}),
      Plot.text([`t = ${bumpT.toFixed(1)} min`], {frameAnchor: "top-right", dx: -6, dy: 6, fill: "currentColor"})
    ]
  });
  const kOf = (tm, xx) => { const s = Math.min(S.frames.length - 1, Math.round(tm / 60 / S.dt)); return S.frames[s][Math.min(199, Math.max(0, Math.floor(xx / S.dx)))]; };
  const right = Plot.plot({
    width: w, height: h, style: {fontSize: "13px"}, marginBottom: 40, marginLeft: 48, marginRight: 14,
    x: {label: "Time (min)", domain: [0, 6], labelOffset: 34}, y: {label: "Position (km)", domain: [0, 10]},
    color: {type: "linear", scheme: "RdYlGn", domain: [S.vLo, S.vHi]},
    marks: [
      Plot.raster({fill: (tm, xx) => M.V(kOf(tm, xx)), x1: 0, x2: 6, y1: 0, y2: 10, pixelSize: 3, imageRendering: "pixelated"}),
      Plot.line(S.paths, {x: "t", y: "x", z: "car", stroke: ink, strokeWidth: 0.9, strokeOpacity: 0.75}),
      Plot.ruleX([bumpT], {stroke: ink, strokeWidth: 1.5, strokeDasharray: "4 3"})
    ]
  });
  // the road, unrolled: one dot per m cars. Cars never overtake, so the cars between km 0 and a given car only
  // grow by those that cross km 0 behind it (S.passed): car c sits where the count from km 0 reaches c + passed
  const C = [0];
  for (let i = 0; i < f.length; i++) C.push(C[i] + f[i] * S.dx);
  const T = C[C.length - 1], m = Math.max(1, Math.round(T / Math.max(20, splitW / 12))), nd = Math.max(1, Math.round(T / m));
  const dots = [];
  for (let j = 0; j < nd; j++) {
    const c = (((j + 0.5) * T / nd + S.passed[fi]) % T + T) % T;
    let i = 0;
    while (i < f.length - 1 && C[i + 1] < c) i++;
    dots.push({x: (i + (c - C[i]) / (C[i + 1] - C[i])) * S.dx, v: M.V(f[i])});
  }
  const iTop = f.indexOf(Math.max(...f));
  const strip = Plot.plot({
    width: splitW, height: splitW < 600 ? 104 : 88, style: {fontSize: "13px"}, marginLeft: 48, marginRight: 14, marginTop: 22, marginBottom: 42,
    x: {label: "Position along the ring (km)", domain: [0, 10], labelOffset: 36},
    y: {axis: null, domain: [0, 1]},
    color: {type: "linear", scheme: "RdYlGn", domain: [S.vLo, S.vHi]},
    marks: [
      Plot.ruleY([0.5], {stroke: "currentColor", strokeOpacity: 0.18, strokeWidth: 16}),
      Plot.dot(dots, {x: "x", y: 0.5, r: splitW < 600 ? 3.6 : 4, fill: "v", stroke: halo, strokeWidth: 0.6}),
      bumpH > 0 ? Plot.text(["the bump"], {x: Math.min(9.3, Math.max(0.7, S.x[iTop])), y: 1, dy: -4, lineAnchor: "bottom", fill: "currentColor", fontWeight: "bold"}) : null
    ]
  });
  const fmt = v => Math.round(v) === 0 ? "0" : (v > 0 ? "+" : "−") + Math.abs(v).toFixed(0);
  const c0 = M.c(S.bg), v0 = M.V(S.bg);
  return htl.html`<div class="split-plot"><div class="fig-frame">
    <div class="pullbox-title">The road, unrolled (km 10 joins km 0): one dot ≈ ${m} cars, coloured by their speed</div>${strip}
    <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:12px">${left}${right}</div>
    <div class="loop-dash">
      <div class="dash-tile"><div class="dash-label">The bump moves</div><div class="dash-value">${bumpH > 0 ? fmt(S.speed) : "–"} <small>km/h</small></div></div>
      <div class="dash-tile"><div class="dash-label">Small-bump prediction</div><div class="dash-value">${fmt(c0)} <small>km/h</small></div></div>
      <div class="dash-tile"><div class="dash-label">The cars drive at</div><div class="dash-value">${v0.toFixed(0)} <small>km/h</small></div></div>
      <div class="dash-tile dash-last"><div class="dash-label">Extra cars in the bump</div><div class="dash-value">${S.extra(f).toFixed(1)}</div></div>
    </div>
    <div class="p1-result tight-top">Speed, on the strip and the time–space diagram: <b style="color:#d7263d">red = slowest (${Math.max(0, S.vLo).toFixed(0)} km/h)</b> to <b style="color:#2e9e5b">green = fastest (${S.vHi.toFixed(0)} km/h)</b> · thin lines: cars</div>
    <div class="fig-license">Model · ${trgyCopy} · CC BY-NC-SA 4.0</div></div></div>`;
}

NoteHow to read it

• The road, unrolled (top): the ring cut open at km 0 and laid flat. Each dot stands for the same number of cars (given above the strip), coloured by their speed. In the bump the dots crowd together; watch the crowd move while every dot drives on.
• Density along the ring (left, or on top on a phone): at the time on the slider; the dashed line is the bump at the start. Its colour is the diagram’s: Greenshields teal, the course triangle violet.
• The time–space diagram (right, or below on a phone): time across, position up. The colour is the speed of traffic, from red, the slowest in this run, to green, the fastest (the line under the plots gives both). Each thin line is one car, 12 of them spread so the same number of vehicles lies between each pair. The dashed line is the time on the slider.
• The bump moves: the speed of the centre of the bump’s extra cars, measured between minute 1 and minute 4.
• Small-bump prediction: the slope of the flow–density curve, c = dQ/dk, at the background density: the speed of a very small bump.
• The cars drive at: the speed of the cars in the background traffic.
• Extra cars in the bump: the vehicles above the background. It stays the same while the bump changes shape: cars are neither made nor lost.
• Diagram: two curves of flow against density, for one lane (all densities here are per lane). Greenshields is a smooth parabola: 100 km/h on an empty road, jammed at 150 veh/km. The course triangle is free flow at 100 km/h up to 20 veh/km, then congestion down to a jam at 120 veh/km, so its default 25 veh/km is already congested. The background density stops just short of the jam, so that the bump still fits under it.

What it shows

The bump is not a group of cars. Every car drives through it: on the road strip the dots crowd together as they reach it and spread out again after it; in the time–space diagram the thin lines climb across the slow patch and leave it again. What moves is a pattern of density, and it has its own speed.

• Light traffic: the bump moves forward, but slower than the cars. At 25 veh/km on Greenshields’ curve it drives at about +62 km/h, while the cars do 83.
• Heavy traffic: the bump moves backward, against the cars: about −38 km/h at 100 veh/km. This is how a jam spreads upstream.
• The top of the curve: somewhere near the top of Greenshields’ curve the bump stands still. What to try asks you where.
• Its shape: on Greenshields the back steepens until it is a jump, and the front spreads out, because denser traffic carries slower waves. On the course triangle every free-flow wave has the same speed, so a free-flow bump keeps its shape.

The speed of a small bump is the slope of the flow–density curve, dQ/dk: positive below capacity, zero at the top, negative above it. Lighthill and Whitham (1955) and Richards (1956) derived it from one law, that cars are neither made nor lost, and one curve, the flow as a function of density. The steepened back is a shock: the back of a queue. Lecture 4 of the course derives all of this; Lecture 7 builds the simulation.

What to try

1. Find where it stands still. On Greenshields, slide the background density until the bump neither drives nor runs back. Is that exactly at the top of the curve, 75 veh/km?
2. Make it bigger. Raise the extra density to 30 veh/km in light traffic. Does it move faster or slower than the small-bump prediction?
3. Count the cars. Watch Extra cars in the bump while the bump steepens. Why does it never change?
4. Switch the curve. Set the extra density back to 10 veh/km. On the course triangle at 10 veh/km it drives with the cars and keeps its shape. Now try 60 veh/km. Which way does it go, and how fast?

References. Lighthill, M. J. and Whitham, G. B. (1955). On kinematic waves II: a theory of traffic flow on long crowded roads. Proceedings of the Royal Society A 229, 317–345. https://doi.org/10.1098/rspa.1955.0089. Richards, P. I. (1956). Shock waves on the highway. Operations Research 4, 42–51. https://doi.org/10.1287/opre.4.1.42

theme = Generators.observe(notify => {
  const read = () => notify(document.body.classList.contains("quarto-dark") ? "dark" : "light");
  read();
  const watcher = new MutationObserver(read);
  watcher.observe(document.body, {attributes: true, attributeFilter: ["class"]});
  return () => watcher.disconnect();
})
accent = theme === "dark" ? "#c9a0ff" : "#57068c"
ink = theme === "dark" ? "#f2f2f2" : "black"
halo = theme === "dark" ? "#222222" : "white"
// Plot width: Plot's default 640 px, except on a phone, where a plot is drawn to fit its card
plotW = Generators.observe(notify => {
  let last;
  const read = () => {
    const main = document.querySelector("main"), fit = main ? main.clientWidth - 50 : 640;
    const w = !document.querySelector(".reveal") && fit < 640 ? Math.max(240, Math.floor(fit)) : 640;
    if (w !== last) notify(last = w);
  };
  read();
  window.addEventListener("resize", read);
  return () => window.removeEventListener("resize", read);
})
// fullW: a figure that spans the whole card: the card's width on the web (not capped at 640 like plotW),
// the content width on a slide (narrower in portrait)
fullW = Generators.observe(notify => {
  let last;
  const read = () => {
    const reveal = document.querySelector(".reveal");
    let w;
    if (reveal) w = (window.Reveal && window.Reveal.getConfig ? window.Reveal.getConfig().width : 1280) - 140;
    else { const main = document.querySelector("main"); w = Math.max(240, Math.floor((main ? main.clientWidth : 640) - 50)); }
    if (w !== last) notify(last = w);
  };
  read();
  window.addEventListener("resize", read);
  return () => window.removeEventListener("resize", read);
})