31:T415,md`# Asynchronous race leaderboard 2 (Work in progress) _(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. Each contestant is represented in the chart by a horizontal line. Markers on the line denote the durations at which the contestant passed checkpoints. The vertical position shows the preliminary leaderboard position for the contestant. The leaderboard order is determined by sorting the contestants, comparing each pair of contestants by the elapsed time at the latest checkpoint that both have passed. 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. `32:T78e,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); const color = d3.scaleOrdinal(d3.schemeCategory10); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("text") .attr("transform", "translate(" + (width/2) + " ," + (height) + ")") .style("text-anchor", "middle") .text("Time"); const checkpointData = Array.from(d3.group(pastEvents, e => e.checkpoint)) .map(([checkpoint, events]) => ({ checkpoint, events: sortAscending(events, e => leaderBoardPositionByContestant.get(e.contestant)) })); const checkpointPathGroup = svg.append("g") .attr("fill", "none") .attr("stroke", "lightgray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(checkpointData) .join("path") .style("mix-blend-mode", "multiply") .attr("d", d => line(d.events)) const contestantData = Array.from(d3.group(pastEvents, e => e.contestant)) .map(([contestant, events]) => ({contestant, events})); const contestantPathGroup = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(contestantData) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", d => color(d.contestant)) .attr("d", d => line(d.events)) const selectCircle = svg.selectAll(".circle") .data(pastEvents); selectCircle.enter().append("circle") .attr("class", "circle") .attr("r", 3) .attr("cx", e => x(getX(e))) .attr("cy", e => y(getY(e))) .attr("fill", e => color(e.contestant)) //d3.selectCircle(".dot") return svg.node(); }33: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; }34:[] 2f:{"title":"Asynchronous race leaderboard 2 (Work in progress)","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":"$32","pinned":true,"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 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":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`\n---\n# Auxiliary\n`","pinned":false,"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 contestants 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\n .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":479,"value":"leaderBoardPositionByContestant = {\n const durationsAtCheckpointsByContestant = d3.rollup(pastEvents,\n d => d.map(v => v.timestamp - d[0].timestamp),\n d => d.contestant\n );\n return Array.from(durationsAtCheckpointsByContestant)\n .sort((a, b) => {\n const i = Math.min(a[1].length, b[1].length) - 1;\n return a[1][i] - b[1][i];\n })\n .map(([contestant]) => contestant)\n .reduce((acc, contestant, i) => acc.set(contestant, i), new Map());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 50});","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"x = d3.scaleLinear()\n .domain(d3.extent(pastEvents.map(getX)))\n .range([margin.left, width - margin.right]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"getX = e => e.elapsed / 1000 / 60;","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"meanElapsedPerCheckpoint = d3.mean(pastEvents, e => e.elapsed / e.checkpoint);","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"y = d3.scaleLinear()\n .domain(d3.extent(pastEvents.map(getY)).reverse())\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"getY = e => leaderBoardPositionByContestant.get(e.contestant) + 1;","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))","pinned":false,"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":586,"value":"function sortAscending(array, numericAccessor) {\n return array.sort((a, b) => numericAccessor(a) - numericAccessor(b));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}