31:T421,dataActual = [ { p: 'Conservative', s: 19, vs: 23.1, vc: 3792549, }, { p: 'Labour', s: 20, vs: 24.4, vc: 4020646, }, { p: 'UKIP', s: 24, vs: 26.6, vc: 4376635, }, { p: 'Liberal Democrats', s: 1, vs: 6.6, vc: 1087633, }, { p: 'SNP', s: 2, vs: 2.4, vc: 389503, }, { p: 'Green', s: 3, vs: 6.9, vc: 1136670, }, { p: 'An Independence from Europe', s: 0, vs: 1.4, vc: 235124, }, { p: 'BNP', s: 0, vs: 1.1, vc: 179694, }, { p: 'Sinn Féin', s: 1, vs: 1.0, vc: 159813, }, { p: 'DUP', s: 1, vs: 0.8, vc: 131163, }, { p: 'Plaid Cymru', s: 1, vs: 0.7, vc: 111864, }, { p: 'UUP', s: 1, vs: 0.5, vc: 83438, }, ]32:T45c,voteCombined = [ { p: 'Conservative', s: 19, vs: 23.1, vc: 3792549, }, { p: 'Labour', s: 20, vs: 24.4, vc: 4020646, }, { p: 'UKIP', s: 24, vs: 26.6, vc: 4376635, }, { p: 'Liberal Democrats (+ remain)', s: 1 + 2 + 3, vs: 6.6, vc: (1087633 + 389503 + 1136670), }, { p: 'SNP', s: 2 * 0, vs: 2.4, vc: 389503 * 0, }, { p: 'Green', s: 3 * 0, vs: 6.9, vc: 1136670 * 0, }, { p: 'An Independence from Europe', s: 0, vs: 1.4, vc: 235124, }, { p: 'BNP', s: 0, vs: 1.1, vc: 179694, }, { p: 'Sinn Féin', s: 1, vs: 1.0, vc: 159813, }, { p: 'DUP', s: 1, vs: 0.8, vc: 131163, }, { p: 'Plaid Cymru', s: 1, vs: 0.7, vc: 111864, }, { p: 'UUP', s: 1, vs: 0.5, vc: 83438, }, ];33:T24cc,/* * MIT License * © Copyright 2016 - Geoffrey Brossard (me@geoffreybrossard.fr) */ d3Parliament = function() { // util function series(s, n) { var r = 0; for (var i = 0; i <= n; i++) { r+=s(i); } return r; } /* params */ var width, height, innerRadiusCoef = 0.4; /* animations */ var enter = { "smallToBig": true, "fromCenter": true }, update = { 'animate': true, }, exit = { "bigToSmall": true, "toCenter": true }; /* events */ var parliamentDispatch = d3.dispatch("click", "dblclick", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "touchcancel", "touchend", "touchmove", "touchstart"); function parliament(data) { data.each(function(d) { // if user did not provide, fill the svg: width = width ? width : this.getBoundingClientRect().width; height = width ? width / 2 : this.getBoundingClientRect().width/2; var outerParliamentRadius = Math.min(width/2, height); var innerParliementRadius = outerParliamentRadius * innerRadiusCoef; /* init the svg */ var svg = d3.select(this); /*** * compute number of seats and rows of the parliament */ var nSeats = 0; d.forEach(function(p) { nSeats += (typeof p.seats === 'number') ? Math.floor(p.seats) : p.seats.length; }); var nRows = 0; var maxSeatNumber = 0; var b = 0.5; (function() { var a = innerRadiusCoef / (1 - innerRadiusCoef); while (maxSeatNumber < nSeats) { nRows++; b += a; /* NOTE: the number of seats available in each row depends on the total number of rows and floor() is needed because a row can only contain entire seats. So, it is not possible to increment the total number of seats adding a row. */ maxSeatNumber = series(function(i) { return Math.floor(Math.PI * (b + i)); }, nRows-1); } })(); /*** * create the seats list */ /* compute the cartesian and polar coordinates for each seat */ var rowWidth = (outerParliamentRadius - innerParliementRadius) / nRows; var seats = []; (function() { var seatsToRemove = maxSeatNumber - nSeats; for (var i = 0; i < nRows; i++) { var rowRadius = innerParliementRadius + rowWidth * (i + 0.5); var rowSeats = Math.floor(Math.PI * (b + i)) - Math.floor(seatsToRemove / nRows) - (seatsToRemove % nRows > i ? 1 : 0); var anglePerSeat = Math.PI / rowSeats; for (var j = 0; j < rowSeats; j++) { var s = {}; s.polar = { r: rowRadius, teta: -Math.PI + anglePerSeat * (j + 0.5) }; s.cartesian = { x: s.polar.r * Math.cos(s.polar.teta), y: s.polar.r * Math.sin(s.polar.teta) }; seats.push(s); } }; })(); /* sort the seats by angle */ seats.sort(function(a,b) { return a.polar.teta - b.polar.teta || b.polar.r - a.polar.r; }); /* fill the seat objects with data of its party and of itself if existing */ (function() { var partyIndex = 0; var seatIndex = 0; seats.forEach(function(s) { /* get current party and go to the next one if it has all its seats filled */ var party = d[partyIndex]; var nSeatsInParty = typeof party.seats === 'number' ? party.seats : party.seats.length; if (seatIndex >= nSeatsInParty) { partyIndex++; seatIndex = 0; party = d[partyIndex]; } /* set party data */ s.party = party; s.data = typeof party.seats === 'number' ? null : party.seats[seatIndex]; seatIndex++; }); })(); /*** * helpers to get value from seat data */ var seatClasses = function(d) { var c = "seat "; c += (d.party && d.party.id) || ""; return c.trim(); }; var seatX = function(d) { return d.cartesian.x; }; var seatY = function(d) { return d.cartesian.y; }; var seatRadius = function(d) { var r = 0.4 * rowWidth; if (d.data && typeof d.data.size === 'number') { r *= d.data.size; } return r; }; /*** * fill svg with seats as circles */ /* container of the parliament */ var container = svg.select(".parliament"); if (container.empty()) { container = svg.append("g"); container.classed("parliament", true); } container.attr("transform", "translate(" + width / 2 + "," + outerParliamentRadius + ")"); /* all the seats as circles */ var circles = container.selectAll(".seat").data(seats); circles.attr("class", seatClasses); /* animation adding seats to the parliament */ var circlesEnter = circles.enter().append("circle"); circlesEnter.attr("class", seatClasses); circlesEnter.attr("cx", enter.fromCenter ? 0 : seatX); circlesEnter.attr("cy", enter.fromCenter ? 0 : seatY); circlesEnter.attr("r", enter.smallToBig ? 0 : seatRadius); if (enter.fromCenter || enter.smallToBig) { var t = circlesEnter.transition().duration(function() { return 1000 + Math.random()*800; }); if (enter.fromCenter) { t.attr("cx", seatX); t.attr("cy", seatY); } if (enter.smallToBig) { t.attr("r", seatRadius); } } /* circles catch mouse and touch events */ for (var evt in parliamentDispatch._) { (function(evt){ circlesEnter.on(evt, function(e) { parliamentDispatch.call(evt, this, e); }); })(evt); } /* animation updating seats in the parliament */ if (update.animate) { var circlesUpdate = circles.transition().duration(function() { return 1000 + Math.random()*800; }); } else { var circlesUpdate = circles; } circlesUpdate.attr("cx", seatX) .attr("cy", seatY) .attr("r", seatRadius); /* animation removing seats from the parliament */ if (exit.toCenter || exit.bigToSmall) { var t = circles.exit().transition().duration(function() { return 1000 + Math.random()*800; }); if (exit.toCenter) { t.attr("cx", 0).attr("cy", 0); } if (exit.bigToSmall) { t.attr("r", 0); } t.remove(); } else { circles.exit().remove(); } }); } parliament.width = function(value) { if (!arguments.length) return width; width = value; return parliament; }; /** Deprecated since v1.0.1 */ parliament.height = function(value) { if (!arguments.length) return height; return parliament; }; parliament.innerRadiusCoef = function(value) { if (!arguments.length) return innerRadiusCoef; innerRadiusCoef = value; return parliament; }; parliament.enter = { smallToBig: function (value) { if (!arguments.length) return enter.smallToBig; enter.smallToBig = value; return parliament.enter; }, fromCenter: function (value) { if (!arguments.length) return enter.fromCenter; enter.fromCenter = value; return parliament.enter; } }; parliament.update = { animate: function(value) { if (!arguments.length) return update.animate; update.animate = value; return parliament.update; } } parliament.exit = { bigToSmall: function (value) { if (!arguments.length) return exit.bigToSmall; exit.bigToSmall = value; return parliament.exit; }, toCenter: function (value) { if (!arguments.length) return exit.toCenter; exit.toCenter = value; return parliament.exit; } }; parliament.on = function(type, callback) { parliamentDispatch.on(type, callback); } return parliament }34:[] 2f:{"title":"What If: the UK calculated MEPs at a country level?","cells":[{"id":0,"value":"md`# What If: the UK calculated MEPs at a country level?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`*Part of a series, previous: [what if the UK used Thailand's mixed electoral system?](https://observablehq.com/@joshrayman/what-if-the-uk-used-thailands-mixed-electoral-system); [what if the US preserved the electoral college, but delegates used proportional representation from the popular vote](https://joshrayman.github.io/vis/what-if/proportional/index.html).*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## 2014 MEP Election`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${dataCalculated.map(party => `\n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

	Regional	National
Party	Seats	(%)	Seats	(%)	% change
${party.p}	${party.s}	${Math.round(party.s / 73 * 100)}	${party.pr}	${Math.round((party.pr) / 73 * 100)}	${Math.round((party.pr) / 73 * 100) - Math.round(party.s / 73 * 100)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`Tallying up the 2014 results at a country-wide level would bolster the left-leaning party seat count (moving Green, Lib Dem and SNP from 6 to 11 seats) at the cost of the national parties in Wales and Northern Ireland. The biggest mover is LD gaining four seats.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`Sources:\n* Election Result: [Wiki](https://en.wikipedia.org/wiki/2014_European_Parliament_election_in_the_United_Kingdom)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"calculatePrSeats = (input) => {\n let output = input; //[0, 0, 0, 0, 0]\n \n for (let i = 0; i < output.length; i++) {\n output[i].calcVc = output[i].vc;\n output[i].pr = 0;\n output[i].id = output[i].p;\n }\n \n for (let i = 0; i < 73; i++) {\n output[0].calcVc = output[0].vc / (output[0].pr + 1)\n output = output.sort((a, b) => b.calcVc - a.calcVc);\n output[0].pr += 1;\n }\n \n output = output.sort((a, b) => b.vc - a.vc);\n \n return output\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"dataCalculated = calculatePrSeats(dataActual)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\", \"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"parliamentDataAfter = dataCalculated.map(d => {\n return {\n p: d.p,\n seats: d.s + d.pr,\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"parliamentData = dataCalculated.map(d => {\n return {\n p: d.p,\n seats: d.s,\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"colors = ['#0087DC', '#dc241f', '#70147a', '#faa61a', '#fef987', '#6ab023']","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"svg = (data) => {\n const svgWidth = Math.min(640, width);\n const parliament = d3Parliament()\n .width(svgWidth)\n .innerRadiusCoef(0.4)\n \n const color = d3.scaleOrdinal(colors).domain(data.map(d => d.p))\n \n const svg = d3.select(DOM.svg(svgWidth, svgWidth / 2))\n \n console.log(data)\n \n svg.datum(data)\n .call(parliament)\n .selectAll('circle')\n .attr('fill', d => {\n return color(d.party.p);\n })\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}