31:T62e,function make_map() { console.log(['map_width is', map_width]); let svg = d3 .create("svg") .attr('width', map_width) .attr('height', map_height); const mapbg = DOM.uid('mapbg'); // Set up the SVG background svg .append("defs") .append('pattern') .attr('id', mapbg.id) .attr('patternUnits', 'userSpaceOnUse') .attr('width', map_width) .attr('height', map_height) .append("image") .attr("xlink:href", im_url) .attr('width', map_width) .attr('height', map_height); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", map_width) .attr("height", map_height) .attr("fill", mapbg); // Set up the district overlay. let districts = svg .append("g") .attr('id', 'districts') .selectAll("path") .data(district_boundary_array[0].features) .join("path") .attr('class', 'district') .attr("stroke-opacity", 0) .attr('stroke', 'black') .attr('stroke-width', 2) .attr("stroke-linejoin", "round") .attr("fill", 'none') .attr("d", path); // And react to a mouse hover. districts .on('mouseenter', function(d) { districts .attr('fill', 'white') .style('stroke-width', 1) .attr('fill-opacity', 0.8); d3.select(this) .style('stroke-width', 4) .attr('fill', 'white') .attr('fill-opacity', 0); }) .on('mouseleave', function() { districts .attr('fill', 'white') .attr('fill-opacity', 0) .style('stroke-width', 2); }); return svg.node(); }32:T5a7,// Transition when the Draw Date radio button is pushed. function transition(n) { let comm = d3.select(state_commentary); Promises.delay( 1000, comm .transition() .duration(1000) .style('opacity', 0) ).then(function() { comm.html(state_commentary_text(n)); comm .transition() .duration(1000) .style('opacity', 1); }); let districts = d3.select(map).select('#districts'); Promises.delay( 1000, districts .selectAll('path') .transition() .duration(1000) .attr('stroke-opacity', 0) ) .then(function() { districts .selectAll("path") .data(district_boundary_array[n].features) .join("path") .attr("fill", 'none') .attr("d", path) .attr('title', function(d) { let dprop = d.properties.DPROP; let party, perc; if (dprop < 0.5) { party = 'Republican'; perc = d3.format('0.1%')(1 - dprop); } else { party = 'Democratic'; perc = d3.format('0.1%')(dprop); } return `District ${d.properties.DISTRICT}: ${perc} ${party}`; }); }) .then(function() { districts .selectAll('path') .attr('stroke-opacity', 0) .transition() .duration(1000) .attr('stroke-opacity', 0.9); }) .then(function() { tippy('svg .district'); }); }33:T464,function state_commentary_text(n) { let eg = d3.format("0.1%")(efficiency_gap(district_boundary_array[n])); let erc = expected_republican_count(n); let text; if (n == 0) { text = `Districts drawn by Republicans after the 2010 election. Districts 1 and 12 are two of the most highly contentious districts with regard to gerrymandering in the US.`; } else if (n == 1) { text = `Districts redrawn by Republicans in 2016 after federal courts held that districts 1 and 12 were unconstitutionally gerrymandered based on race. This map was used in the 2018 elections pending appeal.`; } else if (n == 2) { text = `Districts re-redrawn by Republicans in 2019 after state courts held the previous maps were unconstitutionally gerrymandered based on party. This map will be used in the 2020 elections.`; } text = text + `

${erc} Republican districts and ${13 - erc} Democratic districts

Efficiency Gap = ${eg}

`; return text; }34:[{"id":"f9acf825d33c006f1901422d4d0bdbba0bb69c6646d1d541091e17b05485288debacc491a10f10cc5fc7293a9740183de795eb004767f0a202f027034358deb3","href":"https://static.observableusercontent.com/files/f9acf825d33c006f1901422d4d0bdbba0bb69c6646d1d541091e17b05485288debacc491a10f10cc5fc7293a9740183de795eb004767f0a202f027034358deb3","name":"NC_Congressional_Data@1.json","type":"application/json","lastModified":1576109682361.598,"size":723807}] 2f:{"title":"NC Congressional Districts","cells":[{"id":0,"value":"md`# NC Congressional Districts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"intro_commentary = md`North Carolina has been central to the gerrymandering controversy in the US over this last decade. While congressional districts are meant to be redrawn every 10 years (after the census), North Carolina's districts have recently been re-redrawn for the second time since 2010 by court order. \n\nThe map below provides an interactive look at the three district plans that North Carolina has had during the 2010s. You can select the year the districts were drawn (2011, 2017, or 2019) to view the districts and get some basic information about that version of the map. You can also hover over each district to get information on that district.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof w = radio({\n title: 'Draw date',\n options: [\n { label: '2011', value: 0 },\n { label: '2017', value: 1 },\n { label: '2019', value: 2 }\n ],\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"state_commentary = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"map = make_map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"md`The bulk of the data comes from the [Metric Geometry and Gerrymandering Group](https://github.com/mggg-states/NC-shapefiles). That data specifies, for each voting precinct,\n\n * The cartographic boundaries of that precinct drawn in both 2011 and 2017,\n * which 2011 and 2017 congressional district the precinct is in, \n * results for presidential, senate, and gubernatorial elections for 2008-2016, as well as some other information.\n\nUnfortunately, the latest (Fall 2019), court enforced districts aren't accounted for. The NC Legislature, however, has [a shapefile on it's redistricting page](https://www.ncleg.gov/RnR/Redistricting/Main) defining the cartographic boundaries of the new districts. Thus, it's not too hard to use [mapshaper](https://github.com/mbloch/mapshaper) programmatically figure out which precincts make up the new districts. We can then bundle all that information up into the following file.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"data = FileAttachment(\"NC_Congressional_Data@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"md`The main image is an SVG with a static background image generated via a Canvas. That should allow for reasonable performance (since the background image consists of a lot of detailed little precincts) and easy interaction via the SVG overlay. Sadly, there's still a bit of latency that I suspect arises when the tooltips are set up on the 13 fairly complicated districts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"transition(w)","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"// Generate the image background\nim_url = {\n const context = DOM.context2d(map_width, map_height);\n const path = d3\n .geoPath()\n .projection(projection)\n .context(context);\n context.canvas.style.maxWidth = \"100%\";\n context.lineJoin = \"round\";\n context.lineCap = \"round\";\n context.strokeStyle = 'rgba(0,0,0,0.2)';\n\n precinctFeatures.features.forEach(function(d) {\n context.fillStyle = d3.interpolateRdBu(d.properties.DPROP);\n context.beginPath();\n path(d);\n context.fill();\n context.stroke();\n });\n return context.canvas.toDataURL();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"district_boundary_array = [\n \"oldplan_boundaries\",\n \"newplan_boundaries\",\n \"court_boundaries\"\n].map(d => topojson.feature(data, data.objects[d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"precinctFeatures = topojson.feature(data, data.objects.NC_VTD)","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"projection = d3\n .geoIdentity()\n .reflectY(true)\n .fitSize([map_width, map_height], precinctFeatures)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"map_width = 0.98 * width","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"map_height = (4 * map_width) / 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"tippy = require(\"https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"md`## Computations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"efficiency_gap(district_boundary_array[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"function efficiency_gap(districts) {\n let wasted_dem_votes = d3.sum(\n districts.features.map(d => wasted_votes(d.properties, 'dem'))\n );\n let wasted_rep_votes = d3.sum(\n districts.features.map(d => wasted_votes(d.properties, 'rep'))\n );\n let total_votes = d3.sum(districts.features.map(d => d.properties.TVOTE));\n return (wasted_dem_votes - wasted_rep_votes) / total_votes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"function wasted_votes(o, p) {\n let dvote = o.DVOTE;\n let rvote = o.RVOTE;\n let tvote = o.TVOTE;\n if (p == 'dem') {\n if (dvote < tvote / 2) {\n return dvote;\n } else {\n return dvote - tvote / 2;\n }\n } else {\n if (rvote < tvote / 2) {\n return rvote;\n } else {\n return rvote - tvote / 2;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":718,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"function expected_republican_count(n) {\n return district_boundary_array[n].features.filter(\n o => o.properties.DVOTE < o.properties.RVOTE\n ).length;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}