31:Tc4d,commentary = { let districts = boundary_choice.boundaries.features; let district_cnt = districts.length; let rep_cnt = districts.filter((o) => partisan_lean(o) < 0.48).length; let dem_cnt = districts.filter((o) => partisan_lean(o) > 0.52).length; let competitive_cnt = district_cnt - (dem_cnt + rep_cnt); let eff_gap = efficiency_gap(districts); let top_text; if (boundary_choice.name == "us_congress_2020") { top_text = `Here are the districts that were used in 2020. These were court ordered in 2019 after the NC Supreme Court declared the prior districts to be illegally gerrymadered. My district is District 11 containing Asheville in the Western part of the state and my congressional representative is Madison Cawthorn.`; } else if (boundary_choice.name == "us_congress_blocked") { top_text = `These district lines were passed by the NC General Assembly on Nov 4, 2021. There are now 14 districts, rather than 13, since North Carolina has grown in population. My district in this scheme would be District 14. Though it still leans Republican by about 2.4%, that was enough to convince Congressman Cawthorn to try to run in the more conservative 11th district just to the Northeast.`; } else if (boundary_choice.name == "us_congress") { top_text = `The prior plan was declared to be an illegal gerrymander by the NC Supreme Court. Furthermore, the Court ordered that these new district lines be used for the forthcoming election. My district will again be District 11 and is a bit more conservative than the previous plan proposed by the NC Assembly. District 14, on the other hand , contains the Southwest part of Charlotte and now leans Democratic. Congressman Cawthorn, therefore, is now leaning back to the 11th. Go figure.`; } let div = d3 .create("div") .style("margin", "5px auto 5px auto") .style("max-width", `${0.9 * w}px`); div.append("div").text(top_text); let stats = div .append("div") .style("margin", "10px") .style("text-align", "center"); stats .append("div") .style("display", "inline-block") .style("padding-right", "10px") .style("border-right", "solid 1px black") .html( `Efficiency gap: ${d3.format( "0.2%" )(eff_gap)}` ); // * ${dem_cnt} districts leaning Democratic // * ${rep_cnt} districts leaning Republican // * ${competitive_cnt} competive district${competitive_cnt == 1 ? "" : "s"} stats .append("div") .style("display", "inline-block") .style("padding-left", "10px") .style("padding-right", "10px") .style("border-right", "solid 1px black") .text(`Dem districts: ${dem_cnt}`); stats .append("div") .style("display", "inline-block") .style("padding-left", "10px") .style("padding-right", "10px") .style("border-right", "solid 1px black") .text(`Rep districts: ${rep_cnt}`); stats .append("div") .style("display", "inline-block") .style("padding-left", "10px") .text(`Competitive districts: ${competitive_cnt}`); return div.node(); }32:Tb8c,function make_boundaries(boundaries) { let svg = d3.create("svg").attr("width", w).attr("height", h); let map = svg.append("g"); map .append("g") .selectAll("path.boundary") .data(boundaries.features) .join("path") .attr("class", "boundary") .attr("data-district_votes", function (o) { return `${o.properties.district}-${o.properties.dem_vote}-${o.properties.rep_vote}`; }) .attr("fill", "white") .attr("fill-opacity", 0) .attr("stroke", "#333") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("d", path) .on("pointerenter", function () { d3.selectAll("path.boundary").attr("fill-opacity", 0.4); d3.select(this).attr("fill-opacity", 0).attr("stroke-width", 5).raise(); }) .on("pointerleave", function () { d3.selectAll("path.boundary") .attr("fill-opacity", 0) .attr("stroke-width", 2); }); map .append("g") .selectAll("circle.city") .data(cities) .join("circle") .attr("class", "city") .attr("cx", (o) => o.x) .attr("cy", (o) => o.y) .attr("r", 4) .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", 2) .attr("pointer-events", "none"); let city_background_container = map .append("g") .attr("id", "city_background_container"); let city_name_display = map.append("g"); city_name_display .selectAll("text.city") .data(cities) .join("text") .attr("class", "city") .attr("x", (o) => o.x) .attr("y", (o) => o.y) .attr("dx", (o) => (o.city == "Winston-Salem" ? (-90 * width) / 1100 : 3)) .attr("dy", (o) => (o.city == "Winston-Salem" ? (-15 * width) / 1100 : -3)) .attr("opacity", show_cities ? 1 : 0) .text((o) => o.city) .style("font-family", "sans-serif") .attr("font-size", (14 * width) / 1100) .attr("pointer-events", "none"); map .selectAll("path.boundary") .nodes() .forEach(function (d, i) { let [district, dem, rep] = d .getAttribute("data-district_votes") .split("-") .map((x) => parseInt(x)); let total = dem + rep; let dprop = dem / total; let rprop = rep / total; let dpct = d3.format("0.1%")(dem / total); let rpct = d3.format("0.1%")(rep / total); let lean; if (dprop < rprop) { lean = `R +${d3.format("0.1%")(rprop - state_dem_proportion)}`; } else { lean = `D +${d3.format("0.1%")(dprop - state_dem_proportion)}`; } let content = `

District: ${district}

Lean: ${lean}

`; tippy(d, { content: content, allowHTML: true, theme: "light-border", followCursor: true }); }); return svg.node(); }33:[{"id":"4d6f7cd048c14efe1bdf83b06a117e14a815a2d991a6ce57ced3a310b89a0703fbf7dbd22a595832e21e64ec5d4703fe88feadd5dc106e37f6acc0fc78d51d5f","href":"https://static.observableusercontent.com/files/4d6f7cd048c14efe1bdf83b06a117e14a815a2d991a6ce57ced3a310b89a0703fbf7dbd22a595832e21e64ec5d4703fe88feadd5dc106e37f6acc0fc78d51d5f","name":"congressional_boundaries.json","type":"application/json","lastModified":1646871348024.965,"size":436038},{"id":"c7578b8b39ccbc819fcafd5a7d1d195fedf537674383e90129bb044731bbfa00d83ace744e1379ef9492c152738bce3519153dc3b9d148e07b29779301bab4c1","href":"https://static.observableusercontent.com/files/c7578b8b39ccbc819fcafd5a7d1d195fedf537674383e90129bb044731bbfa00d83ace744e1379ef9492c152738bce3519153dc3b9d148e07b29779301bab4c1","name":"precincts.png","type":"image/png","lastModified":1646871523138.119,"size":465250},{"id":"4deb04aac07a5594985a890a80e626065fe89ef3c22a9e4f67e0d6b6627fac0e7e9d95e06a388e12e51e91021d96962c8eac89f2c60fe621190a6d05e2c667e3","href":"https://static.observableusercontent.com/files/4deb04aac07a5594985a890a80e626065fe89ef3c22a9e4f67e0d6b6627fac0e7e9d95e06a388e12e51e91021d96962c8eac89f2c60fe621190a6d05e2c667e3","name":"precincts@3.png","type":"image/png","lastModified":1679844979577.628,"size":515648},{"id":"74fa9cac5704de6421558e660f01355228d8e4a5fce1a4b170f1b84f8bf39040a7d6cc8fde1a150fa2e93dfbbf9d4389e2c68207bfe216ad0d9712aedfdb29d2","href":"https://static.observableusercontent.com/files/74fa9cac5704de6421558e660f01355228d8e4a5fce1a4b170f1b84f8bf39040a7d6cc8fde1a150fa2e93dfbbf9d4389e2c68207bfe216ad0d9712aedfdb29d2","name":"precincts_quantized.png","type":"image/png","lastModified":1679845227865.519,"size":512111},{"id":"336c343aa0f5e10be1fff5def37ee6f516b6351fb47ca770e9977716b4a0ab095f5cae9ae8146c87d26d54200100388b00dab12d44e5bfe2f2d724865a8d236a","href":"https://static.observableusercontent.com/files/336c343aa0f5e10be1fff5def37ee6f516b6351fb47ca770e9977716b4a0ab095f5cae9ae8146c87d26d54200100388b00dab12d44e5bfe2f2d724865a8d236a","name":"im0.png","type":"image/png","lastModified":1688158061175.012,"size":513970}] 2f:{"title":"The NC Congressional redistricting battle","cells":[{"id":0,"value":"# The NC Congressional redistricting battle","pinned":false,"hidden":false,"mode":"md"},{"id":926,"value":"

\n This is a continuation of my earlier exploration examining how North Carolina's congressional districts evolved throughout the 2010s (with some improved techniques). This time, we look at how the districts have changed from the last election in 2020 to the election coming up this November, along with the intermediate proposal by the NC General Assembly that was declared to be illegally gerrymandered in favor of the Republican party.\n

\n\n

\n Note that the shading is by precinct and indicates how the precinct voted in all statewide elections in 2020. The coloring scheme looks something like so:\n

","pinned":false,"hidden":false,"mode":"html"},{"id":751,"value":"legend = Legend(\n d3.scaleOrdinal(\n [\"++R\", \"\", \"+R\", \" \", \"evenish\", \" \", \"+D\", \" \", \"++D\"],\n d3.schemeRdBu[9]\n ),\n {\n // title: \"Age (years)\",\n tickSize: 0\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"

\n You can choose which district cycle to display using the radio buttons below. You can hover over or touch the districts to highlight the district and get a little information about it, in addition to the general information displayed below.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":100,"value":"viewof boundary_choice = {\n let boundary_choice = Inputs.radio(\n [2, 1, 0].map((k) => all_boundaries[k]),\n {\n format: function (o) {\n if (o.name == \"us_congress\") {\n return \"Court ordered 2022\";\n } else if (o.name == \"us_congress_blocked\") {\n return \"Proposed 2022\";\n } else if (o.name == \"us_congress_2020\") {\n return \"Court ordered 2020\";\n }\n },\n value: all_boundaries[2],\n label: \"District display:\",\n width: \"20px\"\n }\n );\n d3.select(boundary_choice).select(\"div\").attr(\"class\", \"wide\");\n return boundary_choice;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"map = {\n let container = d3\n .create(\"div\")\n .style(\"position\", \"relative\")\n .style(\"width\", `${w}px`)\n .style(\"height\", `${h}px`);\n\n let background_container = container.append(\"div\");\n background_container.append(() => background);\n container.append(() => background_container.node());\n\n let boundary_container = container\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"top\", 0)\n .style(\"left\", 0);\n boundary_container.append(() => make_boundaries(boundary_choice.boundaries));\n container.append(() => boundary_container.node());\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"## Implementation\n\nThe density map background is generated separately in [this notebook](https://observablehq.com/d/b59757f22669d74e).","pinned":false,"hidden":false,"mode":"md"},{"id":908,"value":"### Code","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":806,"value":"// viewof show_cities = Inputs.toggle({ label: \"Show city labels:\" })\n// This was a toggle but it's been demoted.\nshow_cities = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"// This cell places the rect backgrounds of the city lables. Since we call the\n// svg:text.getBBox() method, this needs to run *after* the labels have been\n// generated; thus, it's odd placement here.\noutline_cities = {\n let container = d3.select(map).select(\"#city_background_container\");\n if (show_cities) {\n d3.select(map)\n .selectAll(\"text\")\n .each(function (o) {\n let bbox = this.getBBox();\n container\n .append(\"rect\")\n .attr(\"x\", bbox.x - 2)\n .attr(\"y\", bbox.y - 2)\n .attr(\"width\", bbox.width + 4)\n .attr(\"height\", bbox.height + 4)\n .attr(\"fill\", \"white\")\n .attr(\"fill-opacity\", 0.4)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 0.4)\n .style(\"pointer-events\", \"none\");\n });\n } else {\n container.selectAll(\"rect\").remove();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":893,"value":"### Gerrymandering statistics","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"state_dem_proportion = {\n let dem_vote_total = d3.sum(\n all_boundaries[0].boundaries.features.map((o) => o.properties.dem_vote)\n );\n let rep_vote_total = d3.sum(\n all_boundaries[0].boundaries.features.map((o) => o.properties.rep_vote)\n );\n return dem_vote_total / (dem_vote_total + rep_vote_total);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"function partisan_lean(district) {\n let d = parseFloat(district.properties.dem_vote);\n let r = parseFloat(district.properties.rep_vote);\n let t = r + d;\n return d / t;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"function efficiency_gap(districts) {\n let wasted_dem_votes = d3.sum(districts.map((d) => wasted_votes(d, \"dem\")));\n let wasted_rep_votes = d3.sum(districts.map((d) => wasted_votes(d, \"rep\")));\n let total_votes = d3.sum(\n districts.map(\n (d) =>\n parseFloat(d.properties.dem_vote) + parseFloat(d.properties.rep_vote)\n )\n );\n return (wasted_dem_votes - wasted_rep_votes) / total_votes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"function wasted_votes(district, p) {\n let dvote = parseFloat(district.properties.dem_vote);\n let rvote = parseFloat(district.properties.rep_vote);\n let tvote = rvote + dvote;\n\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":897,"value":"### Geo","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"projection = d3.geoIdentity().reflectY(true).fitSize([w, h], congress_map_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":879,"value":"h = 0.5 * w","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"w = width < 1200 ? width : 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":872,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"congress_map_data = topojson.feature(map_data, map_data.objects.us_congress)","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"all_boundaries = Object.keys(map_data.objects).map((s) => ({\n name: s,\n boundaries: topojson.feature(map_data, map_data.objects[s])\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":890,"value":"cities = all_boundaries[3].boundaries.features.map(function (o) {\n let [x, y] = projection(o.geometry.coordinates);\n let city = o.properties.city;\n return { x, y, city };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"map_data = FileAttachment(\"congressional_boundaries.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":876,"value":"background = FileAttachment(\"im0.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":753,"value":"import { Legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}