Plot.plot({
width: plotW < 640 ? plotW - 64 - 24 : 640, height: !!document.querySelector(".reveal") ? 300 : 400, marginTop: 20, marginBottom: 35,
x: {label: "Time (s)", domain: [0, 90]},
y: {label: null, domain: [0, 500]},
color: {type: "sequential", scheme: "RdYlGn", domain: [0, 15]},
marks: [
Plot.rect([0], {x1: tsSim.red[0], x2: tsSim.red[1], y1: tsSim.stop - 3, y2: tsSim.stop + 3, fill: "#d7263d"}),
Plot.ruleY([tsSim.loop], {stroke: "#c77700", strokeDasharray: "6 4"}),
Plot.text([0], {x: 89, y: tsSim.loop, text: () => "loop detector", dy: -7, textAnchor: "end", fill: "#c77700"}),
Plot.line(tsSim.rows, {x: "t", y: "x", z: "car", stroke: "v", strokeWidth: 2.2}),
Plot.arrow([tsSim.headway], {x1: "t1", x2: "t2", y1: "x", y2: "x", stroke: ink, headLength: 6, bend: false}),
Plot.text([tsSim.headway], {x: d => (d.t1 + d.t2) / 2, y: "x", text: () => "headway", dy: 12}),
Plot.arrow([tsSim.spacing], {x1: "t", x2: "t", y1: "x2", y2: "x1", stroke: ink, headLength: 6}),
Plot.text([tsSim.spacing], {x: "t", y: d => (d.x1 + d.x2) / 2, text: () => "spacing", dx: -6, textAnchor: "end"}),
Plot.ruleX([tsNow.t], {stroke: accent, strokeWidth: 2}),
Plot.text([tsNow.t], {x: d => d, y: 490, text: () => "drone snapshot", dx: 6, textAnchor: "start", fill: accent}),
Plot.dot(tsNow.cars, {x: "t", y: "x", r: 5, fill: ink})
]
})