2f:T805,{ const context = DOM.context2d(width, height); // Plot some dotted circles representing each party while (true) { sim.tick(); context.fillStyle = 'white'; context.fillRect(0,0,width,height); // Annotations context.textAlign = "center"; context.font = `${Math.floor(width / 75)}px sans-serif`; context.fillStyle = 'black'; context.fillText("Share of Popular Vote", width/2, height / 2 + height / 20); context.fillText("Share of Seats in Parliament", width/2, 7 * height / 8 + height / 20 ); context.save() currentElection.forEach(d => { const c = d3.color(partyColor(d.party)) const ct = d3.color(partyColor(d.party)) ct.opacity = 0.1 context.beginPath(); context.strokeStyle = c; context.fillStyle = ct; context.setLineDash([5,5]); context.arc(partyX(d.party), height / 3, circleSize(d.voteShare), 0, 2 * Math.PI); context.stroke(); context.fill(); context.beginPath(); context.arc(partyX(d.party), 2 * height / 3, circleSize(d.seats / d.totalSeats), 0, 2 * Math.PI); context.stroke(); context.fill(); context.textAlign = "center"; context.fillStyle = 'black'; context.fillText(d.party, partyX(d.party), height / 6); context.textAlign = "center"; context.fillStyle = 'black'; context.fillText(percent(d.voteShare), partyX(d.party), height / 2 ); context.textAlign = "center"; context.fillStyle = 'black'; context.fillText(`${d.seats} / ${d.totalSeats}`, partyX(d.party), 7 * height / 8 - height / 30); context.fillText(percent(d.seats / d.totalSeats), partyX(d.party), 7 * height / 8); }) context.restore() sim.nodes().forEach(node => { context.beginPath(); context.fillStyle = partyColor(node.party); context.strokeStyle = partyColor(node.party); context.arc(node.x, node.y, node.r -1, 0, 2 * Math.PI); context.fill(); //context.stroke(); }) yield context.canvas; } }30:T825,function reassignParties(election) { // Update the simulation to reflect a given election year. const nodes = sim.nodes(); function reassignNodes(nodes, shares) { const pool = []; var sumShares = shares.reduce((acc, cur) => acc + cur[1], 0); shares = shares .map(([party, share]) => [party, Math.round(share * nodes.length / sumShares)]) // Express in terms of node size. .sort((a, b) => b[1] - a[1]); // Largest first. sumShares = shares.reduce((acc, cur) => acc + cur[1], 0); // Fix issues caused by rounding to the nearest whole number by adjusting the size of the largest group. // Since this affects it's proportional size the least. if (sumShares < nodes.length) shares[0][1] += 1; if (sumShares > nodes.length) shares[0][1] -= 1; var fixed = shares.reduce((acc, cur) => acc + cur[1], 0) // Loop 1: Pool Remainder shares.forEach(([party, share]) => { let count = 0; nodes.forEach(n => { if (n.party === party) count += 1; // Shift to the next party if share is reached. if (count > share) n.party = undefined; }) }) // Loop 2: Distribute pool shares.forEach(([party, share]) => { let count = nodes.filter(n => n.party === party).length; //const pool = nodes.filter(n => n.party === undefined).length; //console.log(`Remainder ${share - count} pool size ${pool}`) for (let i = 0; i < nodes.length && count < share; ++i) { if (nodes[i].party === undefined) { nodes[i].party = party; nodes[i].cx = partyX(party) count += 1; } } }) return nodes; } // Resassign each group separately. const vs = currentElection.map(e => [e.party, e.voteShare]); const ss = currentElection.map(e => [e.party, e.seats]); const totalSeats = currentElection[0].totalSeats; const newNodes = [ ... reassignNodes(nodes.filter(n => n.group === 0), vs), ... reassignNodes(nodes.filter(n => n.group === 1), ss) ] sim.nodes(newNodes); }31:[{"id":"c828c7be3b48dce5b2eda2ce44e5d1585f6cecff29a7d5db864769f32d294e7349a26f40534ca20a2fdf26e71c22807db0a89309e853662ac457b3ced823b925","href":"https://static.observableusercontent.com/files/c828c7be3b48dce5b2eda2ce44e5d1585f6cecff29a7d5db864769f32d294e7349a26f40534ca20a2fdf26e71c22807db0a89309e853662ac457b3ced823b925","name":"general-elections-and-governments - 3. GE results UK & GB (1).csv","type":"text/csv","lastModified":1677854034546.728,"size":48589}] 2d:{"title":"UK General Elections","cells":[{"id":0,"value":"# UK General Elections\n## Vote Share vs. Seats In Parliament\n","pinned":false,"hidden":false,"mode":"md"},{"id":749,"value":"

**Note:** The way I've shown the particles changing colour does not represent voters shifting their votes between those two specific parties - I just change the smallest number of particles possible to reflect the new vote / seat counts between each election.\n","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"viewof year = Scrubber(elections, {delay: 4000})","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"{\n return htl.html`
\n
General Election ${year} [Wikipedia]
\n
Popular Vote Winner ${voteWinner.party} ${percent(voteWinner.voteShare)}
\n
Most Seats Won ${seatWinner.party} ${seatWinner.seats} / ${seatWinner.totalSeats} ${percent(seatWinner.seats / seatWinner.totalSeats)}
\n
`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"Plot.plot({\n y: {\n tickFormat: \"%\"\n },\n marks: [\n Plot.barY(data, {x: \"election\", y: \"voteShare\", fill: \"party\", stroke: \"grey\"}),\n Plot.ruleY([0])\n ],\n width: width,\n x: {\n paddingInner: 0,\n },\n color: {\n type: \"categorical\",\n domain: partyColor.domain(),\n range: partyColor.range().map(c => d3.color(c).copy({opacity: 0.8}))\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"{\n const formatPc = d3.format(\".1%\")\n return Plot.plot({\n marks: [\n Plot.dot(data, {x: \"voteShare\", y: \"seatShare\", fill: \"party\"}),\n Plot.tip(data, Plot.pointer({\n x: \"voteShare\", \n y: \"seatShare\",\n \n title: d => `${d.election}: ${d.party}\\nVote Share: ${formatPc(d.voteShare)}\\nSeat Share: ${formatPc(d.seatShare)}`}\n )),\n ],\n color: {domain: partyColor.domain(), range: partyColor.range()},\n x: {tickFormat: \".0%\"},\n y: {tickFormat: \".0%\"}\n})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"voteWinner = currentElection.sort((a, b) => b.votes - a.votes)[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":649,"value":"seatWinner = currentElection.sort((a, b) => b.seats - a.seats)[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"## Particle Simulation\n\nParticles representing a share of the popular vote are simulated using [`d3.force`](https://github.com/d3/d3-force).","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"{\n // Handle changes in year by reassigning particles.\n reassignParties(year)\n return Inputs.table(sim.nodes())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"nodes = {\n const nodes = [];\n for (let i = 0; i < 100; ++i) {\n // Add nodes representing % of popular vote\n nodes.push({cx: width/2, cy: height/3, r: width/200, party: undefined, group: 0})\n // Add node representing % of seats in parliament\n nodes.push({cx: width/2, cy: 2 * height/3, r: width/200, party: undefined, group: 1})\n }\n return nodes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"sim = {\n const sim = d3.forceSimulation()\n .force('collide', d3.forceCollide().radius(d => d.r).strength(1).iterations(10))\n .force('x', d3.forceX().x(d => d.cx).strength(0.25))\n .force('y', d3.forceY().y(d => d.cy).strength(0.25))\n .alpha(.2)\n .alphaDecay(0)\n .stop();\n\n sim.nodes(nodes);\n return sim;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"## Dataset\nThe data in this notebook is taken from the [House of Commons Library's 1918-2022 Election Data](https://commonslibrary.parliament.uk/research-briefings/cbp-7529/).","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"SELECT\n *,\n CAST(seats as FLOAT)/CAST(totalSeats as FLOAT) as seatShare\nFROM (\n SELECT \n Election as election,\n Party as party,\n IFNULL( CAST(REPLACE(\"Votes\",',','') as INT), 0) as votes,\n IFNULL( CAST(REPLACE(\"Total Votes\",',','') as INT), 0) as totalVotes,\n IFNULL( CAST(REPLACE(\"Vote share\",'%','') as FLOAT) / 100, 0) as voteShare,\n IFNULL( CAST(REPLACE(\"Seats\",',','') as INT), 0) as seats,\n IFNULL( CAST(REPLACE(\"Total seats\",',','') as INT), 0) as totalSeats,\nFROM \"general-elections-and-governments - 3. GE results UK & GB (1)\"\nWHERE Country = 'UK'\n)","pinned":true,"hidden":false,"mode":"sql","output":"data","database":"general-elections-and-governments - 3. GE results UK & GB (1).csv"},{"id":45,"value":"select distinct Party from data","pinned":true,"hidden":false,"mode":"sql","output":"sqlParties","database":"var:data"},{"id":60,"value":"parties = sqlParties.map(p => p.party)","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"select distinct Election from data","pinned":true,"hidden":false,"mode":"sql","output":"sqlElections","database":"var:data"},{"id":54,"value":"elections = sqlElections.map(y => y.election)","pinned":true,"hidden":false,"mode":"ojs"},{"id":569,"value":"currentElection = data.filter(d => d.election === year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"height = width / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"margin = ({top: 10, right: 100, bottom: 10, left: 100})","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"Axes and Colors","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"partyX = d3.scalePoint().domain([\"CON\", \"LAB\", \"LD\", \"PC/SNP\", \"Other\"]).range([margin.left, width - margin.right]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"partyColor = d3.scaleOrdinal().domain([\"CON\", \"LAB\", \"LD\", \"PC/SNP\", \"Other\"]).range([\"#0087DC\",\"#E4003B\",\"#FAA61A\",\"#005B54\",\"darkgrey\"]).unknown(\"pink\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"circleSize = d3.scaleSqrt().domain([0, 1]).range([height / 60, height / 8])","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"percent = d3.format('.2%')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}