31:T61c,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); /** svg.append("g") .attr("opacity", 0.5) .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d[0])) .attr("y", (d, i) => y(d.data.rank)) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) .append("title") .text(d => `${d.data.contestant} ${d.key} ${formatValue(d.data.deltas[d.key])}`); */ const contestantGroups = svg.append("g") .selectAll("g") .data(contestantSummarys) .join("g") .attr("transform", d => `translate(0, ${y(d.rank)})`); contestantGroups.selectAll("rect") .data(d => d.checkpointSegments) .join("rect") .attr("fill", (d, i) => color(i)) .attr("x", d => x(d[0])) .attr("width", d => x(d[1]) - x(d[0])) .attr("height", y.bandwidth()) .append("title") .text(function(d) { const pd = d3.select(this.parentNode.parentNode).datum(); return `${pd.contestant} ${d.key} ${formatValue(pd.deltas[d.key])}`; }); const text = svg.append("g") .selectAll("text") .data(contestantSummarys) .enter() .append("text") .attr("x", d => 5 + x(d.elapsedTotal)) .attr("y", d => y(d.rank) + y.bandwidth() / 2) .attr("alignment-baseline", "central") .text(d => d.name) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }32:T44b,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 = 10; 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, name: chance.name(), checkpoint: i, timestamp: Math.round(now + ti * 60 * 1000), // Convert to milliseconds }))) } return events; }33:[] 2f:{"title":"Stacked Horizontal Async Race Leaderboard","cells":[{"id":1,"value":"md`# Stacked Horizontal Async Race Leaderboard\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"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":349,"value":"key = legend({title: \"Checkpoint\", color, tickSize: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"pastEvents = allEvents.filter(e => e.timestamp <= t);","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"contestantSummarys = {\n const map = d3.rollup(pastEvents,\n events => ({\n contestant: events[0].contestant,\n name: events[0].name,\n elapsedTotal: d3.pairs(d3.extent(events.map(e => e.timestamp)), (a, b) => b - a)[0],\n latestCheckpoint: d3.max(events.map(e => e.checkpoint)),\n events,\n timestamps: events.map(e => e.timestamp),\n deltas: d3.pairs(events, (a, b) => b.timestamp - a.timestamp),\n }),\n e => e.contestant);\n\n // Sort by least time at last common check point\n const contestantSummarys = Array.from(map).map(([_, d]) => ({\n ...d,\n checkpointSegments: d3.pairs(d3.cumsum([0, ...d.deltas]))\n }));\n contestantSummarys.sort((a, b) => {\n const i = Math.min(a.latestCheckpoint, b.latestCheckpoint);\n return (a.timestamps[i] - a.timestamps[0]) - (b.timestamps[i] - b.timestamps[0]);\n });\n \n contestantSummarys.forEach((d, i) => d.rank = i + 1);\n return contestantSummarys;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"checkpoints = Array.from(new Set(allEvents.map(e => e.checkpoint)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"series = d3.stack()\n .keys(checkpoints)\n .value((contestantSummary, key) => contestantSummary.deltas[key])\n (contestantSummarys)\n .map((d, i) => (d.forEach(v => {\n v.key = d.key;\n }), d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":649,"value":"msToMin = v => v / 6000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(contestantSummarys, d => d.elapsedTotal)])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"y = d3.scaleBand()\n .domain(contestantSummarys.map(d => d.rank))\n .range([margin.top, height - margin.bottom])\n .padding(0.08)","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"color = color1","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"color1 = d3.scaleOrdinal()\n .domain(series.map(d => d.key))\n .range(d3.schemeSpectral[10])\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"color2 = d3.scaleOrdinal()\n .domain(checkpoints)\n .range(checkpoints.map(v => d3.interpolateRainbow(v / (checkpoints.length - 1))))\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x)\n .ticks(width / 100, \"s\")\n //.ticks(10)\n .tickFormat(milliseconds => `${Math.round(milliseconds / 60 / 1000)}m`)\n )\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"formatValue = x => isNaN(x) ? \"N/A\" : x.toLocaleString(\"en\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"height = contestantSummarys.length * 25 + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"margin = ({top: 30, right: 200, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"function sortAscending(array, numericAccessor) {\n return array.sort((a, b) => numericAccessor(a) - numericAccessor(b));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"chance = {\n const Chance = await require(\"chance\");\n const seed = 1;\n return Chance(seed);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}