31:T4a2,md`# Asynchronous race leaderboard (beta) _(Disclaimer: I'm a beginner at D3)_ This document presents a visualization of a live updated leaderboard for an asynchronous race, i.e. a race where the contestants start at different points in time. The data is a timeseries of events, each event recording the timestamp at which a specific contestant passed a specific checkpoint, where the first checkpoint is the start, and the last is the finish. This document uses simulated data. The chart plots the path of each contestant in terms of checkpoint index and elapsed time compared to the "mathematical average contestant", which is basically a straight line (the "mean line") with a slope calculated to fit the data. The current average elapsed time per checkpoint is ${(meanElapsedPerCheckpoint / 1000 / 60).toFixed(1)} minutes. Drag the time slider to see the chart change as the race progresses from from the start of the first contestant to the finish of the last one. The _k_ slider sets a multiplicative weight for mean line slope. Drag it to 0% to see how the chart would look without subtraction of the mean line, i.e. showing the total elapsed time instead of a deviation. `32:T42e,allEvents = { // Durations in minutes in the calculations const rand = (a, b) => Math.random() * (b - a) + a; // uniform random in [a, b) const randc = (c, r) => rand(c - r, c + r); // uniform random with radius r and center c const nContestants = 20; const nRounds = 20; const startSpacing = 2; const meanDurationPerRound = 2 * 60 / nRounds; const roundWeights = new Array(nRounds).fill(0).map(() => meanDurationPerRound * randc(1, 0.5)); const now = Date.parse("2020-05-16 12:00"); const events = []; for (let iContestant = 0; iContestant < nContestants; iContestant++) { let t0 = iContestant * startSpacing; const tAll = [t0]; let t = t0; const speed = randc(1, 0.5); for (let iRound = 0; iRound < nRounds; iRound++) { const roundSpeed = speed * randc(1, 0.3); t = t + roundWeights[iRound] / roundSpeed; tAll.push(t); } events.push(...tAll.map((ti, i) => ({ contestant: iContestant, checkpoint: i, timestamp: Math.round(now + ti * 60 * 1000), // Convert to milliseconds }))) } return events; }33:[] 2f:{"title":"Asynchronous race leaderboard (beta)","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof t = {\n const tExt = d3.extent(allEvents, e => e.timestamp);\n const maxDuration = tExt[1] - tExt[0];\n const form = html``;\n form.oninput = () => {\n const t = form.input.valueAsNumber\n form.value = t;\n form.output.value = new Date(t).toString();\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"viewof k = {\n const form = html``;\n form.oninput = () => {\n const k = form.input.valueAsNumber\n form.value = k;\n form.output.value = `${Math.round(100 * k)}%`;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"overflow\", \"visible\");\n \n const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n svg.append(\"text\") \n .attr(\"transform\",\n \"translate(\" + (width/2) + \" ,\" + \n (height) + \")\")\n .style(\"text-anchor\", \"middle\")\n .text(\"Checkpoint\");\n\n const path = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .selectAll(\"path\")\n .data(Array.from(d3.group(pastEvents, e => e.contestant)))\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"stroke\", d => color(d[0]))\n .attr(\"d\", d => line(d[1]));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`# Discussion\n\nI would like to add a second y axis on the right hand side showing the leaderboard (positions 1, 2, 3 etc) with names and pictures of each contestant. The contestants are only added to the leaderboard as they finish the race, but the picture of each contestant is also shown at the position of their latest event (until they finish), such that they approach the leaderboard from the left and then eventually merge into it. This should provide anyone viewing the chart during the race with a sensation of suspense seeing contestants come closer and closer to the leaderboard as they approach the finish, and trying to extrapolate their trajectories to predict where they'll end up in the leaderboard.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`---\n\n# Data generation\nGenerate data by a naive simulation of a race.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"md`Filter the events to get only those that are before the value of the time slider. Also add the _elapsed_ property, which is the contestant's total elapsed time at the time of event.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"pastEvents = {\n const events = allEvents.filter(e => e.timestamp <= t);\n const startEventsByContestant = d3.group(events.filter(e => e.checkpoint === 0), d => d.contestant);\n return events.map(e => ({\n ...e,\n elapsed: e.timestamp - startEventsByContestant.get(e.contestant)[0].timestamp,\n }));\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"contestants = Array.from(new Set(pastEvents.map(e => e.contestant)));","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"checkpoints = Array.from(new Set(pastEvents.map(e => e.checkpoint)));","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`\n---\n# Settings and functions for the chart\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"// For the chart\nmargin = ({top: 20, right: 30, bottom: 30, left: 50});","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"x = d3.scaleLinear()\n .domain(d3.extent(allEvents.map(getX)))\n .range([margin.left, width - margin.right]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"getX = e => e.checkpoint;","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"meanElapsedPerCheckpoint = d3.mean(pastEvents, e => e.elapsed / e.checkpoint) || 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"y = d3.scaleLinear()\n .domain(d3.extent(pastEvents.map(getY)).reverse()).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"getY = e => (e.elapsed - k * e.checkpoint * meanElapsedPerCheckpoint) / 1000 / 60;","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(k === 0 ? \"Elapsed time [minutes]\" : \"Deviation from k⋅mean [minutes]\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"line = d3.line()\n .x(e => x(getX(e)))\n .y(e => y(getY(e)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}