Shock Wave Builder

Pick two traffic states and watch the queue boundary move

Light traffic (upstream) runs into heavy traffic (downstream). The boundary between them is a shock wave. Its speed is the slope of the chord joining the two states on the fundamental diagram:

w = \frac{q_D - q_U}{k_D - k_U}.

Drag the sliders. When the shock speed is negative, the queue grows backward, against the traffic.

viewof kU = Inputs.range([5, 145], {value: 20, step: 1, label: "Upstream density kU (veh/km)"})
viewof kD = Inputs.range([5, 145], {value: 140, step: 1, label: "Downstream density kD (veh/km)"})

vf = 100          // free-flow speed, km/h
kj = 150          // jam density, veh/km
Q = k => vf * k * (1 - k / kj)
V = k => vf * (1 - k / kj)
C = k => vf * (1 - 2 * k / kj)        // characteristic (wave) speed dQ/dk
qU = Q(kU)
qD = Q(kD)
isShock = kU < kD
w = Math.abs(kD - kU) < 1e-9 ? C(kU) : (qD - qU) / (kD - kU)

md`${isShock
  ? `**Shock wave speed: ${w.toFixed(1)} km/h** ${w < 0 ? "(moving backward: the queue grows upstream)" : "(moving forward)"}`
  : `**Rarefaction:** dense traffic upstream of light traffic spreads out as a *fan* of waves, like a queue discharging at a green light. The fan's edges move at ${C(kU).toFixed(1)} and ${C(kD).toFixed(1)} km/h.`}`

Plot.plot({
  title: "Fundamental diagram",
  width: colW,
  height: 340,
  x: {label: "Density k (veh/km)", domain: [0, kj]},
  y: {label: "Flow q (veh/h)", domain: [0, vf * kj / 4 * 1.1], grid: true},
  marks: [
    Plot.line(d3.range(0, kj + 0.01, kj / 200).map(k => ({k, q: Q(k)})),
              {x: "k", y: "q", stroke: "#999", strokeWidth: 2}),
    Plot.line([{k: kU, q: qU}, {k: kD, q: qD}],
              {x: "k", y: "q", stroke: accent, strokeWidth: 3, strokeDasharray: isShock ? null : "6,4"}),
    Plot.dot([{k: kU, q: qU, s: "U"}, {k: kD, q: qD, s: "D"}],
             {x: "k", y: "q", r: 7, fill: accent}),
    Plot.text([{k: kU, q: qU, s: "U"}, {k: kD, q: qD, s: "D"}],
              {x: "k", y: "q", text: "s", dy: -14, fontWeight: "bold"}),
    Plot.ruleY([0])
  ]
})

{
  const T = 0.1, X = 4;                                  // 6 minutes, ±4 km
  const m = Math.max(1, Math.ceil(Math.max(kU, kD) * X / 20));   // draw every m-th vehicle
  const vU = V(kU), vD = V(kD);
  const paths = [];
  let id = 0;
  // upstream vehicles, starting behind the boundary at x < 0
  for (let x0 = -m / kU; x0 > -X - vU * T; x0 -= m / kU) {
    let pts;
    if (isShock) {
      const ts = Math.min(T, x0 / (w - vU));              // time the vehicle meets the shock
      pts = [[0, x0], [ts, x0 + vU * ts], [T, x0 + vU * ts + vD * (T - ts)]];
    } else {
      pts = [[0, x0], [T, x0 + vU * T]];                  // simplified: fan interaction not drawn
    }
    pts.forEach(([t, x]) => paths.push({id, t: t * 60, x}));
    id++;
  }
  // downstream vehicles, ahead of the boundary at x >= 0
  for (let x0 = 0; x0 < X; x0 += m / kD) {
    [[0, x0], [T, x0 + vD * T]].forEach(([t, x]) => paths.push({id, t: t * 60, x}));
    id++;
  }
  const waves = isShock
    ? [[{t: 0, x: 0, g: 0}, {t: T * 60, x: w * T, g: 0}]]
    : d3.range(0, 1.0001, 1 / 6).map((f, g) => {
        const c = C(kU) + f * (C(kD) - C(kU));
        return [{t: 0, x: 0, g}, {t: T * 60, x: c * T, g}];
      });
  return Plot.plot({
    title: "Time-space diagram",
    width: colW,
    height: 340,
    x: {label: "Time (min)", domain: [0, T * 60]},
    y: {label: "Position (km)", domain: [-X, X]},
    clip: true,
    marks: [
      Plot.line(paths, {x: "t", y: "x", z: "id", stroke: "#bbb"}),
      Plot.line(waves.flat(), {x: "t", y: "x", z: "g", stroke: accent, strokeWidth: isShock ? 4 : 2}),
      Plot.ruleY([0], {stroke: "#ddd"})
    ]
  });
}

Things to try

1. With k_U = 20, slowly lower k_D from 140. At what downstream density does the shock stop moving backward? Why there?
2. Make k_U and k_D lie on opposite sides of the critical density k_c = 75 but at the same flow. What is the shock speed? Why?
3. Swap the two states so that k_U > k_D. What changes, and why is there no single shock line?

This demo uses Greenshields’ model with v_f = 100 km/h and k_j = 150 veh/km. Grey lines are vehicle trajectories; the violet line is the shock.

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"
accentRange = theme === "dark" ? ["#4b3a5c", "#ecdcff"] : ["#dccbee", "#3a0463"]
ink = theme === "dark" ? "#f2f2f2" : "black"
// Width of one column: the real column on a wide screen, the whole card on a phone or tablet (columns stack < 992 px),
// so the charts are drawn to fit instead of being shrunk (and their text with them).
colW = Generators.observe(notify => {
  let last;
  const read = () => {
    const col = document.querySelector("main .columns > .column");
    const w = Math.max(240, Math.min(640, Math.floor((col ? col.clientWidth : 640) - 8)));
    if (w !== last) notify(last = w);
  };
  read();
  window.addEventListener("resize", read);
  return () => window.removeEventListener("resize", read);
})