{
const S = wState;
while (true) {
const rows = S.bins.flatMap((b, i) => [
{v: b + 1, who: "Loop (in time)", p: S.loopN ? S.loop[i] / S.loopN : 0},
{v: b + 1, who: "Drone (in space)", p: S.droneN ? S.drone[i] / S.droneN : 0}]);
const means = [{who: "Loop (in time)", m: S.loopN ? S.loopSum / S.loopN : NaN},
{who: "Drone (in space)", m: S.droneN ? S.droneSum / S.droneN : NaN}];
const harmonic = S.loopN ? S.loopN / S.loopInv : NaN;
yield htl.html`<div>${Plot.plot({
width: plotW, height: !!document.querySelector(".reveal") ? 160 : 260, marginLeft: 50,
fy: {label: null}, x: {label: "Speed (m/s)", domain: [8, 40]}, y: {label: "Share of cars", grid: true},
color: {domain: ["Loop (in time)", "Drone (in space)"], range: ["#c77700", accent]},
marks: [
Plot.rectY(rows, {x1: d => d.v - 1, x2: d => d.v + 1, y: "p", fy: "who", fill: "who", fillOpacity: 0.75}),
Plot.ruleX(means, {x: "m", fy: "who", stroke: ink, strokeWidth: 2}),
Plot.text(means, {x: "m", fy: "who", frameAnchor: "top", text: d => isNaN(d.m) ? "" : `mean ${d.m.toFixed(1)}`, dx: 6, textAnchor: "start", dy: 10})
]
})}
${md`Loop, arithmetic mean (**time-mean**): **${isNaN(means[0].m) ? "…" : means[0].m.toFixed(1)} m/s** · Loop, harmonic mean: **${isNaN(harmonic) ? "…" : harmonic.toFixed(1)} m/s** · Drone, arithmetic mean (**space-mean**): **${isNaN(means[1].m) ? "…" : means[1].m.toFixed(1)} m/s** · ${S.loopN} cars counted`}</div>`;
await Promises.delay(400);
}
}