30:T45c,{ const thisRound = roundsData[round] const fmt = d3.format(',.0f') const { eliminated, max, votesToAdd, votes } = thisRound const cs = e => candidates.get(e) const isWinner = roundsData[round].hasMajority ? `**${cs(max.name)}** has a majority of the ${roundsData[round].sum} votes and wins!` : `no candidate has a majority of the ${roundsData[round].sum} votes.`; const anyVotesToAdd = votesToAdd && Object.entries(votesToAdd).filter(([c,v]) => v) const lastRound = round === 0 ? ` Move the slider to see some votes get reallocated.` : ` In this round, **${cs(eliminated[eliminated.length - 1].join(', '))}** was eliminated, and their votes were reallocated as follows: ${anyVotesToAdd.length ? anyVotesToAdd.map(([c, v]) => cs(c)+': +'+v).join(', ') : '*nope, there were no votes to reallocate*'}.` const realloc = round === 0 ? 'T' : `Accounting for reallocations, t` const runningTotal = `${realloc}he vote total is:\n * ${votes.map(({ name, votes }) => cs(name)+': '+fmt(votes)).join('\n * ')}` return md`**In Round ${round + 1},** ${isWinner}\n\n${lastRound}\n\n${runningTotal}` }31:T7a8,/** * round: number (index) * _note_: y0 and y1 are votes, not pixels. scaling/layout happens in draw fns */ getAnimationStateData = (roundIndex) => { const roundCurr = roundsData[roundIndex] // return only S0 for round 0 if (roundIndex <= 0 || roundIndex >= roundsData.length){ return [roundCurr.votes] } const roundPrev = roundsData[roundIndex - 1] const lastElim = roundCurr.eliminated[roundCurr.eliminated.length - 1] // S0 single column of blocks for previous round (starting position) const stage0 = roundPrev.votes // S1 most recently eliminated block pops out to the right const stage1 = stage0.map(d => ({ ...d, ...(lastElim.includes(d.name) ? { x0: 2 * C.xPadding + C.barDim } : {}) })) // S2 most recently eliminated block is divided into constituent parts const newParts = Object.entries(roundCurr.votesToAdd) .sort((a,b) => b[1] - a[1]) .map(([name, votes]) => ({ name, votes })) const newPartsY0 = stage0.find(d => lastElim.includes(d.name)).y0 newParts.forEach((d,i) => { d.x0 = 2 * C.xPadding + C.barDim d.y0 = i === 0 ? newPartsY0 : newParts[i - 1].y1 d.y1 = d.y0 + d.votes }) const stage2 = [ ...stage0.filter(d => !lastElim.includes(d.name)), ...newParts ] // S3 new parts vertically align with old blocks const stage3 = [ ...roundCurr.votes.map(d => { const littleSibling = roundCurr.votesToAdd[d.name] return { ...d, votes: d.votes - littleSibling, y1: d.y1 - littleSibling }; }), ...newParts.map(d => { const bigSibling = roundCurr.votes.find(e => e.name === d.name) return { ...d, y0: bigSibling.y1 - d.votes, y1: bigSibling.y1 }; }) ] const stage4 = stage3.map(({ x0, ...d }) => ({ ...d })) return [ stage0, stage1, stage2, stage3, stage4 ] }32:T64d,draw = ctx => { ctx.clearRect(0, 0, W, H); const { barDim, yMargin, xMargin, yPadding, xPadding } = C const yScale = d3.scaleLinear().domain([0, d2.value]).range([yMargin, H]) function isOut(d){ return roundsData[round].eliminated.flat().includes(d.data.name) && (d.depth === 1 || isOut(d.parent)) } function isWinner(d){ return roundsData[round].hasMajority && roundsData[round].max.name === d.data.name && (d.depth === 1 || isOut(d.parent)) } function isCalledUp(d){ return (d.depth === 1 || isOut(d.parent)) && !isOut(d) } d3.range(1, d2.height + 1).forEach(d => { ctx.textAlign = "left"; ctx.fillStyle = 'black'; ctx.font = "12px Arial"; ctx.fillText(`Choice ${d}`, xMargin + (xPadding + barDim) * (d - 1), yPadding/2); }) let winners = []; d2.descendants().slice(1).filter(d => d.value > 0).forEach(d => { ctx.fillStyle = color(d.data.name); const x0 = xMargin + (barDim + xPadding) * (d.depth - 1) const y0 = yScale(d.y0) ctx.globalAlpha = 0.2; if (isCalledUp(d) || isWinner(d)){ ctx.globalAlpha = 1; } ctx.fillRect(x0, y0, barDim, yScale(d.y1) - y0); ctx.globalAlpha = 1; if (isWinner(d)) { winners.push(d); } ctx.fillStyle = "black"; if (d.depth === 1){ ctx.textAlign = "right"; ctx.font = "8px Arial"; ctx.fillText(d.value, x0 - 1, y0 + 8); } }) winners.forEach(d => { const x0 = xMargin + (barDim + xPadding) * (d.depth - 1) const y0 = yScale(d.y0) ctx.strokeRect(x0, y0, barDim, yScale(d.y1) - y0); }) }33:[{"id":"c5dd7e73b985861c8cde3e461e92196e11158dee3649c5dd9c21e14cd1cda0da04c97357d83ddd781858ecdc54a391cff75bdafda889d37f7237d45782a86589","href":"https://static.observableusercontent.com/files/c5dd7e73b985861c8cde3e461e92196e11158dee3649c5dd9c21e14cd1cda0da04c97357d83ddd781858ecdc54a391cff75bdafda889d37f7237d45782a86589","name":"rcv_candidates_5@3.json","type":"application/json","lastModified":1608075291126.458,"size":1366769}] 2e:{"title":"RCV - NYC Mayor 2021","cells":[{"id":0,"value":"md`# RCV - NYC Mayor 2021`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"html`

\n ${keys.map(d => {\n return `

${candidates.get(d)}

`\n }).join('')}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"html`

${viz.canvas}${vizRound}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof roundSlider = slider({\n min: 0, \n max: roundsData.length - 1, \n step: 1,\n title: \"rounds\",\n value: roundLoop || 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"viewof stageSlider = slider({\n min: 0, \n max: animationStateData.length - 1, \n step: 1,\n title: \"stages\",\n value: stageLoop || 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof run = radio({ options: ['on', 'off'], value: 'off' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"vizRound = {\n const context = DOM.context2d(W * .2, H);\n drawRound(context)\n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"roundLoop = {\n if (run === 'off'){return}\n for (const i of range(roundsData.length)) {\n yield Promises.tick(2000, i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"stageLoop = {\n if (run === 'off'){ return }\n const len = animationStateData.length\n for (const i of range(len)) {\n yield Promises.tick(2000 / (len + 1), i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"round = run === 'on' ? roundLoop : roundSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"stage = run === 'on' ? stageLoop : stageSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"animationStateData = getAnimationStateData(round)","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"drawRound = ctx => {\n ctx.clearRect(0, 0, W, H);\n const { barDim, yMargin, xMargin, yPadding, xPadding } = C\n animationStateData[stage].forEach(d => {\n const x0 = d.x0 || xMargin\n const y0 = yScale(d.y0)\n ctx.fillStyle = color(d.name);\n ctx.fillRect(x0, y0, barDim, yScale(d.y1) - y0);\n\n ctx.fillStyle = \"black\";\n ctx.textAlign = \"right\";\n ctx.font = \"8px Arial\";\n ctx.fillText(d.votes, x0 - 1, y0 + 8);\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"viz = {\n const context = DOM.context2d(W * .8, H);\n draw(context)\n return context\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"yScale = d3.scaleLinear().domain([0, d2.value]).range([C.yMargin, H])","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"color = d3.scaleOrdinal(d3.schemeSet3).domain(keys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"roundsData = analyzeData(d2, d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"candidates = new Map([\n ['A', 'Adams'],\n ['C', 'McGuire'],\n ['D', 'Donovan'],\n ['E', 'Menchaca'],\n ['G', 'Garcia'],\n ['I', 'Iscol'],\n ['O', 'Morales'],\n ['R', 'Rose'],\n ['S', 'Stringer'],\n ['T', 'Taylor'],\n ['U', 'Sutton'],\n ['W', 'Wiley'],\n ['Y', 'Yang']\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"keys = Array.from(candidates.keys())","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"root = ({ id: 'root', name: 'root', parent: '', votes: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"file = FileAttachment(\"rcv_candidates_5@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d0 = file.map(d => {\n const name = d.length === 1 ? d : d.slice(-1);\n return {\n id: d,\n name,\n label: candidates.get(name),\n parent: d.length === 1 ? 'root' : d.slice(0, -1),\n votes: Math.round(Math.random() * (6 - d.length))\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d1 = d3.stratify().id(d => d.id).parentId(d => d.parent)([root, ...d0]).sum(d => d.votes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"d2 = recursivePosition(d1, d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"C = ({\n barDim: 50,\n xMargin: 40,\n yMargin: 30,\n xPadding: 30,\n yPadding: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"H = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"W = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"import { range } from '@observablehq/generator-cells-functions-and-objects'","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"import { analyzeData, recursivePosition } from '@anbnyc/ranked-choice-voting'","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"import {radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}