| license: cc-by-4.0 | |
| height: 550 |
Comparison of percentage difference in electorate numbers between the 2016 and 2017 Assembly Elections.
Hover over each constituency to get details on electorate size for 2017, the change since 2016 and the percentage change. You can also rectangularise the constituencies using the 'Toggle squares' button.
Turnout data is from the Electoral Office and boundaries from OSNI (both Open Government Licence).
See electionsni.org for more.
| Constituency_Name | Constituency_Number | Electorate2017 | Electorate2016 | Diff | Diff_pct | |
|---|---|---|---|---|---|---|
| Belfast East | 2 | 64788 | 65740 | -952 | -1.45 | |
| Belfast North | 10 | 68187 | 70872 | -2685 | -3.79 | |
| Belfast South | 13 | 67953 | 68469 | -516 | -0.75 | |
| Belfast West | 17 | 61309 | 63993 | -2684 | -4.19 | |
| East Antrim | 1 | 62933 | 64194 | -1261 | -1.96 | |
| East Londonderry | 3 | 67392 | 68600 | -1208 | -1.76 | |
| Fermanagh and South Tyrone | 4 | 73100 | 74257 | -1157 | -1.56 | |
| Foyle | 5 | 69718 | 71759 | -2041 | -2.84 | |
| Lagan Valley | 6 | 72621 | 73746 | -1125 | -1.53 | |
| Mid Ulster | 7 | 69396 | 70430 | -1034 | -1.47 | |
| Newry and Armagh | 8 | 80140 | 81756 | -1616 | -1.98 | |
| North Antrim | 9 | 76739 | 78337 | -1598 | -2.04 | |
| North Down | 11 | 64461 | 65760 | -1299 | -1.98 | |
| South Antrim | 12 | 68475 | 69680 | -1205 | -1.73 | |
| South Down | 14 | 75415 | 77409 | -1994 | -2.58 | |
| Strangford | 15 | 64393 | 65695 | -1302 | -1.98 | |
| Upper Bann | 16 | 83431 | 85204 | -1773 | -2.08 | |
| West Tyrone | 18 | 64258 | 65694 | -1436 | -2.19 | |
| NORTHERN IRELAND | NA | 1254709 | 1281595 | -26886 | -2.10 |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| path.areas { | |
| stroke: grey; | |
| stroke-opacity: 0.5; | |
| cursor: pointer; | |
| } | |
| div.tooltip { | |
| font-size: 12px; | |
| position: absolute; | |
| height: auto; | |
| padding: 10px; | |
| color: #ffffff; | |
| background-color: #000000; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| pointer-events: none; | |
| word-wrap: break-word; | |
| white-space: pre; | |
| } | |
| </style> | |
| <body> | |
| <h1> | |
| <h2>Total Electorate 2017: <span id="total_electorate"></span></h2> | |
| <svg width="100%" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script> | |
| <script src="https://rawgit.com/BobHarper1/d3.geo2rect/master/build/geo2rect.min.js"></script> | |
| <script> | |
| var svg = d3.select('svg'); | |
| var div = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| var config = { | |
| width : parseInt(svg.style('width'), 10), | |
| height : parseInt(svg.style('height'), 10), | |
| padding : 40, | |
| projection : d3.geoMercator(), | |
| duration : 700, | |
| key:function(d){return d.properties.ABBREV; }, | |
| grid : { | |
| FE:{x:0,y:1}, | |
| WT:{x:0,y:2}, | |
| FT:{x:0,y:3}, | |
| EL:{x:1,y:1}, | |
| MU:{x:1,y:2}, | |
| UB:{x:1,y:3}, | |
| AN:{x:1,y:4}, | |
| NA:{x:2,y:1}, | |
| SA:{x:2,y:2}, | |
| LV:{x:2,y:3}, | |
| SD:{x:2,y:4}, | |
| EA:{x:3,y:1}, | |
| BN:{x:3,y:2}, | |
| BW:{x:3,y:3}, | |
| BE:{x:4,y:2}, | |
| BS:{x:4,y:3}, | |
| ST:{x:4,y:4}, | |
| ND:{x:5,y:3}, | |
| } | |
| }; | |
| var x = d3.scaleLinear() | |
| .domain([0.5, 4.5]) | |
| .rangeRound([50, 50 + (29 * 8)]); | |
| var color = d3.scaleThreshold() | |
| .domain([0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4]) | |
| .range(d3.schemeRdPu[9]); | |
| var g = svg.append("g") | |
| .attr("class", "key") | |
| .attr("transform", "translate(0,40)"); | |
| g.selectAll("rect") | |
| .data(color.range().map(function(d) { | |
| d = color.invertExtent(d); | |
| if (d[0] == null) d[0] = x.domain()[0]; | |
| if (d[1] == null) d[1] = x.domain()[1]; | |
| return d; | |
| })) | |
| .enter().append("rect") | |
| .attr("height", 8) | |
| .attr("x", function(d) { return x(d[0]); }) | |
| .attr("width", function(d) { return 29; }) | |
| .attr("fill", function(d) { return color(d[0]); }); | |
| g.append("text") | |
| .attr("class", "caption") | |
| .attr("x", x.range()[0]) | |
| .attr("y", -6) | |
| .attr("fill", "#000") | |
| .attr("text-anchor", "start") | |
| .attr("font-weight", "bold") | |
| .text("Change in electorate from 2016"); | |
| g.call(d3.axisBottom(x) | |
| .tickSize(13) | |
| .tickFormat(function(x, i) { return i ? "-" + x : "-" + x + "%"; }) | |
| .tickValues(color.domain())) | |
| .select(".domain") | |
| .remove(); | |
| queue() | |
| .defer(d3.csv, 'data.csv') | |
| .await(ready); | |
| function ready(error, data) { | |
| var electorate = {}; | |
| var diff = {}; | |
| var diff_pct = {}; | |
| var name = {}; | |
| var number = {}; | |
| data.forEach(function(d) { | |
| electorate[d.Constituency_Number] = d.Electorate2017; | |
| diff[d.Constituency_Number] = d.Diff; | |
| diff_pct[d.Constituency_Number] = d.Diff_pct; | |
| name[d.Constituency_Number] = d.Constituency_Name; | |
| number[d.Constituency_Number] = d.Constituency_Number; | |
| }); | |
| console.log(name, number, electorate, diff, diff_pct); | |
| document.getElementById('total_electorate').innerHTML = numberWithCommas(electorate['NA']) + ' (' + diff_pct['NA'] + '%)'; | |
| var g2r = new geo2rect.draw(); | |
| d3.json('ni.geojson', function(err, data){ | |
| var geojson = geo2rect.compute(data); | |
| g2r.config = config; | |
| g2r.data = geojson; | |
| g2r.svg = svg.append('g'); | |
| g2r.draw(); | |
| g2r.svg.selectAll('path') | |
| .attr("fill", function(d) { return color(diff_pct[d.properties.PC_NUM] * -1); }) | |
| .attr("class", "areas") | |
| .on("mouseover", function(d) { | |
| div.transition().duration(500) | |
| .style("opacity", 0.75) | |
| div.text(name[d.properties.PC_NUM] + "\n\rElectorate: " + numberWithCommas(electorate[d.properties.PC_NUM]) + "\n\rChange from 2016: " + diff[d.properties.PC_NUM] + " (" + diff_pct[d.properties.PC_NUM] + "%)") | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY -30) + "px"); | |
| }) | |
| .on("mouseout", function() { | |
| div.transition().duration(200) | |
| .style("opacity", 0); | |
| }); | |
| }); | |
| d3.select('body').append('button').text('Toggle squares').style('cursor', 'pointer').on('click', function(){ | |
| g2r.toggle(); | |
| g2r.draw(); | |
| console.log(g2r.mode); | |
| }); | |
| } | |
| function numberWithCommas(x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } | |
| </script> | |
| </body> | |
| </html> |