31: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 }32:[] 2f:{"title":"What If: the UK used Thailand's mixed electoral system?","cells":[{"id":0,"value":"md`# What If: the UK used Thailand's mixed electoral system?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`*Part of a series, the first covering if the US preserved the electoral college, but delegates used proportional representation from the popular vote [here](https://joshrayman.github.io/vis/what-if/proportional/index.html)*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`Thailand uses a combination of constituency elections and proportional representation. Out of 500 elected representatives, 350 are based on first-past-the-post races and the other 150 are allocated by PR.\n\nVoters cast a single ballot in their consitutency, and their vote counts both in that individual race and towards the proportional 'top up' seats which are tallied across the country.\n\nThe UK often has parties with vote shares vote shares diffused across the country. Below we model a similar system to the Thai election, bolstering the 650 candidates elected by constituencies.\n\n| Country | Pop (mil) | Seats (FPTP) | Seats (PR) |\n| --- | --- | --- | --- |\n| Thailand | 69 | 350 | 150 |\n| UK | 66 | 650 | **278** |\n\n278 is calculated by scaling the Thai system, allocating an additional 42.8% of the FPTP seats.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## 2015 General Election`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`I picked the 2015 election to look at because of the UKIP vote. Despite taking 12.6% of the national share they only won one seat, which was Douglas Carswell in Clacton, who was a Conservative MP until leaving the party in 2014.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"html`\n \n \n \n \n \n \n \n \n \n ${data2015.map(party => `\n \n \n \n \n \n \n `).join(\"\")}\n \n

Party	Seats	Seats (%)	Votes (%)
${party.p}	${party.s}	${Math.round(party.s / 650 * 100)}	${party.vs}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`Feeding this data into the D'Hondt algorithm for the additional 278 seats:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"html`\n \n \n \n \n \n \n \n \n \n \n ${data2015.map(party => `\n \n \n \n \n \n \n \n `).join(\"\")}\n \n

Party	PR Seats	New Total Seats	New Total Seat %	% change
${party.p}	${party.pr}	${party.s + party.pr}	${Math.round((party.s + party.pr) / 866 * 100)}	${Math.round((party.s + party.pr) / 866 * 100) - Math.round(party.s / 650 * 100)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`UKIP and Lib Dems gain representation, but overall the seat percentages do not shift much. The new majority threshold is 464, Con would lose the slim majority they won in 2015, but would have a new right wing voting block in UKIP to create a coalition with (438 + 37 taking them over the line). The left block (Lab/LD/SNP/Green) would total 432, not clearing the majority line.\n\nA Con/UKIP alliance would represent 49.5% of the voters, a few percentage points clear of the 46.8% the left block would consist of. This is a simplification, ignoring parties with below 1,000,000 voters which still wield power in parliament (eg. DUP).\n\nThe percentage change column shows that it wouldn't drastically alter the make up of parliament, but it would give a voice to 16.4% of people who voted Green and UKIP, and perhaps go a little way to making the process feel more representative. It would also increase the relevance of voters in 'safe' seats.\n\nBonus: parliament graphic.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`## 2015 Election (top 6 parties, by vote count)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"svg(parliamentData, '.before')","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`## Plus PR seats (top 6 parties, by vote count)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"svg(parliamentDataAfter, '.after')","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"html`\n

- Conservative

- Labour

- UKIP

- Liberal Democrats

- SNP

- Green