31:T796,side_by_side = { // Container for the visualization const wrapper = d3.create("div").attr("class", "wrapper"); // Current const leftPanel = wrapper.append("div").style("position", "relative"); const description = width < 600 ? "districts" : "Texas congressional districts"; const label = leftPanel .append("div") .style("position", "absolute") .style("top", "-5px") .style("left", "0") .style("line-height", width < 600 ? "14px" : null) .style("font-family", "var(--sans-serif)") .style("font-size", width < 600 ? "12px" : "13px") .style("max-width", "100px") .html(`Current
${description}`); const svg = leftPanel .append("svg") .attr("height", height) .attr("width", width / 2); const outline = svg .selectAll("path.outline") .data(geoCurrent.features) .join("path") .attr("d", path) .attr("fill", colors.current) .attr("stroke", "white") .attr("stroke-opacity", "0.5"); svg.call(drawCities, cities, projection); // Proposed const rightPanel = wrapper.append("div").style("position", "relative"); const label2 = rightPanel .append("div") .style("position", "absolute") .style("top", "-5px") .style("left", "-5px") .style("line-height", width < 600 ? "14px" : null) .style("font-family", "var(--sans-serif)") .style("font-size", width < 600 ? "12px" : "13px") .style("max-width", "100px") .html(`Proposed
${description}`); const svg2 = rightPanel .append("svg") .attr("height", height) .attr("width", width / 2); const outline2 = svg2 .selectAll("path.outline") .data(geoProposed.features) .join("path") .attr("d", path) .attr("fill", colors.proposed) .attr("fill-opacity", 0.4) .attr("stroke", "white") .attr("stroke-opacity", "0.5"); // Cities svg2.call(drawCities, cities, projection); return wrapper.node(); }32:T561,In the side-by-side layout above, scanning for changes to the small and irregularly shaped districts is a visually challenging task. With your eyes darting back and forth, can you see _which districts changed_, or _by how much_? The interactive layout below super-imposes the proposed vs. current outlines of each district, and zooms into them to expose the boundary changes across the state. This helps answer the question, *how much **geographical difference** is there between the current and proposed districts?* _A note from Observable Ambassador and domain expert [Harry Stevens](https://observablehq.com/@harrystevens):_ >_It is not possible to discern map makers’ intent only by looking at the shapes of districts. Advanced technology allows mapmakers to draw redistricting plans that favor one party over another, even if all of the districts look “compact” — more like circles, less like squids. Conversely, oddly shaped districts don’t always imply gerrymandering, although there is some evidence that more compact districts [increase voter turnout](https://www.liebertpub.com/doi/abs/10.1089/elj.2017.0466?journalCode=elj). Nearly half of all states require redistricting plans to consider the compactness of congressional districts, but [Texas is not among them](https://redistricting.lls.edu/state/texas/?cycle=2020&level=Congress&startdate=)._ ---33:T674,chart = htl.html``34:Ta96,insetChart = { // Container for the visulaization const wrapper = d3.create("div").attr("class", "wrapper"); // Container for the map on the left const leftPanel = wrapper.append("div"); const svg = leftPanel .append("svg") .attr("height", height) .attr("width", width / 2); svg.append(() => makeDef()); const label = svg .append("text") .text(`District ${selected}`) .attr("dy", 20) .style("font-size", width < 500 ? 9 : 15); const outline = svg .selectAll("path.outline") .data(geoCurrent.features) .join("path") .attr("class", "outline") .attr("d", path) .attr("fill", (d) => d.properties.District === selected ? colors.current : "white" ) .on("click", (event, d) => { mutable selected = d.properties.District; }); // Overlay proposed district const proposedDistrict = geoProposed.features.filter( (d) => d.properties.District === selected )[0]; svg .append("path") .attr("class", "outline") .style("fill", "url(#striped)") .attr("d", path(proposedDistrict)); // Cities svg.call(drawCities, cities, projection); // Circle around selection svg .append("circle") .attr("cx", circleInfo.x) .attr("cy", circleInfo.y) .attr("r", circleInfo.r) .attr("fill", "none") .attr("stroke", "grey"); // Text elements to show new districts const newDistrictChoice = svg .append("g") .attr("transform", `translate(10, ${height - 5})`) .selectAll("text.change") .data([38, 37]) .join("text") .text((d) => `Show new district ${d}`) .style("font-size", width < 500 ? 7 : 12) .style("cursor", "pointer") .on("click", (event, d) => (mutable selected = d)) .attr("dy", (d, i) => (width < 500 ? i * -8 : i * -20)); // Right panel const rightPanel = wrapper.append("div"); const svgInset = rightPanel .append("svg") .attr("height", height) .attr("width", width / 2); svgInset.append(() => makeDef()); const paths = svgInset .selectAll("path") .data(selectedDistricts.features) .join("path") .attr("class", (d) => d.version === "proposed" ? "proposed_outline" : "outline" ) .attr("d", largePath) .attr("fill", (d) => d.version === "proposed" ? "url(#striped)" : colors.current ) .style("pointer-events", "none"); svgInset.call(drawCities, currentCities, largeProj); // Circle around selection svgInset .append("circle") .attr("cx", width / 4) .attr("cy", height / 2) .attr("r", d3.min([height / 2, width / 2]) - 10) .attr("fill", "none") .attr("stroke", "grey") .attr("stroke-width", 0.3); return wrapper.node(); }35:[{"id":"499f8e54ea315d6f774051bfbdfe117523d43a6efb4825876d102ae7b9ef71ac3fb47bcbc5640881e4e67366258d327204f6073b2830594ad50edb6df9e7da2b","href":"https://static.observableusercontent.com/files/499f8e54ea315d6f774051bfbdfe117523d43a6efb4825876d102ae7b9ef71ac3fb47bcbc5640881e4e67366258d327204f6073b2830594ad50edb6df9e7da2b","name":"simplified (1).json","type":"application/json","lastModified":1634126979771.749,"size":734021},{"id":"f177914bf3768caf802917cef6d943bd246e9d82e79c2213b15d56bad0e08645985701062d806e0712fc67a6ca360bb741964c3e5321e6ad1d7ada725a38def6","href":"https://static.observableusercontent.com/files/f177914bf3768caf802917cef6d943bd246e9d82e79c2213b15d56bad0e08645985701062d806e0712fc67a6ca360bb741964c3e5321e6ad1d7ada725a38def6","name":"side-by-side.png","type":"image/png","lastModified":1633717740256.853,"size":343753}] 2f:{"title":"Texas Congressional Redistricting Is More Extensive Than Most Maps Reveal","cells":[{"id":0,"value":"# Texas Congressional Redistricting Is More Extensive Than Most Maps Reveal\n## How much have the congressional districts been redrawn?","pinned":false,"hidden":false,"mode":"md"},{"id":507,"value":"Redrawing congressional districts dramatically impacts political representation. The practice of [*Gerrymandering*](https://www.washingtonpost.com/news/wonk/wp/2015/03/01/this-is-the-best-explanation-of-gerrymandering-you-will-ever-see/) exploits the geographic distribution of voters to shift votes towards a particular party. \n\nWhile many projects have [analyzed the political implications](https://planscore.campaignlegal.org/texas/#!2020-plan-ushouse-eg) showing how proposed districts would [make the state more red](https://www.nytimes.com/interactive/2021/10/03/us/politics/texas-redistricting-map-2022.html) and [protect incumbent seats](https://www.washingtonpost.com/politics/interactive/2021/texas-republicans-redistricting-proposal/), the amount of geographic boundary shifting is difficult to detect in many existing visualizations, such as this one:\n","pinned":false,"hidden":false,"mode":"md"},{"id":1471,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"

A popular representation of proposed changes, similar to that from the New York Times

\n","pinned":false,"hidden":false,"mode":"html"},{"id":833,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"

How does the ${textcolor(\"current\", colors.current)} shape of districts compare to the

proposed

\noutlines?\n","pinned":false,"hidden":false,"mode":"html"},{"id":611,"value":"viewof sort = Inputs.radio([\"district\", \"pctChange\", \"absPctChange\"], {label: \"Sort districts by:\", format: d => radioLabels[d], value:\"district\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof rectWidth = Inputs.range([75, 300], {step:5, value:100, label:\"Size:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"

For context, you can click on a district to overlay the

proposed

\ndistrict and see an inset of the region","pinned":false,"hidden":false,"mode":"html"},{"id":1210,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"drawOverlap(geoCurrent.features.filter(d => d.properties.District === selected)[0], geoProposed.features.filter(d => d.properties.District === selected)[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":326,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":601,"value":"// Computing the change in area for sorting\nareas = new Map(\n geoProposed.features\n .map((d, i) => {\n // Get corresponding proposed district\n const current = geoCurrent.features[i];\n const currArea = current ? path.area(current) : null;\n const proposedArea = path.area(d);\n const pctChange = (proposedArea - currArea) / currArea;\n const absPctChange = Math.abs(pctChange);\n return { district: d.properties.District, pctChange, absPctChange };\n })\n .sort((a, b) => a.pctChange - b.pctChange)\n .map((d) => [\n d.district,\n { pctChange: d.pctChange, absPctChange: d.absPctChange }\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1054,"value":"// Which cities to make visible on the inset\ncurrentCities = cities.filter((d) => {\n const [centerX, centerY] = path.centroid(selectedDistricts);\n const [[x0, y0], [x1, y1]] = path.bounds(selectedDistricts);\n const [x, y] = projection(d.coordinates);\n const r = d3.max([centerX - x0, x1 - centerX, centerY - y0, y1 - centerY]);\n return (\n x > centerX - r && x < centerX + r && y > centerY - r && y < centerY + r\n );\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"selectedDistricts = {\n const proposed = geoProposed.features.filter(d => d.properties.District === selected)[0]\n proposed.version = \"proposed\"\n const current = geoCurrent.features.filter(d => d.properties.District === selected)[0]\n const features = current ? [current, proposed] : [proposed]\n return { type: \"FeatureCollection\", features}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"cities = [\n {label:\"Houston\", coordinates:[-95.3698, 29.7604]}, \n {label:\"Austin\", coordinates:[-97.7431, 30.2672]}, \n {label: \"Dallas\", coordinates:[-96.7970, 32.7767]}, \n {label: \"San Antonio\", coordinates:[-98.4936, 29.4241]}, \n {label: \"El Paso\", coordinates:[-106.4850, 31.7619]} \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"// Where to draw the circle on the full map\ncircleInfo = {\n const [x, y] = path.centroid(selectedDistricts);\n const [[x0, y0], [x1, y1]] = path.bounds(selectedDistricts)\n const r= d3.max([x - x0, x1 - x, y - y0, y1 - y])\n return {x, y, r}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1205,"value":"// Which district is selected (updated by clicking)\nmutable selected = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1269,"value":"// Function to draw cities on the map, based on the cities and desired projections\ndrawCities = (wrapper, cities, projection) => {\n const cityMarks = wrapper.selectAll(\"g.city\").data(cities)\n .join(\"g\")\n .style(\"pointer-events\", \"none\")\n .attr(\"transform\", d => `translate(${projection(d.coordinates)[0]}, ${projection(d.coordinates)[1]})`)\n\n cityMarks.append(\"circle\")\n .attr(\"r\", width < 500 ? 2.5 : 3)\n\n cityMarks.append(\"text\")\n .text(d => d.label)\n .style(\"font-family\", \"sans-serif\") \n .attr(\"dx\", 5)\n .attr(\"dy\", width < 500 ? 3 : 4)\n .style(\"font-size\", width < 500 ? 7 : 12)\n .call(halo) // white background behind text\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"## Shapefiles","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"To optimize the performance of this notebook, the shapefiles were simplified and combined in [this notebook](https://observablehq.com/@observablehq/texas-shapefile-formatting).","pinned":false,"hidden":false,"mode":"md"},{"id":929,"value":"topoFiles = await FileAttachment(\"simplified (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"// Displaying Plan C2101, as described here: https://data.capitol.texas.gov/dataset/planc2101\ngeoProposed = topojson.feature(topoFiles, topoFiles.objects.proposed)","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"geoCurrent = topojson.feature(topoFiles, topoFiles.objects.current)","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"// Path function for the large projection\nlargePath = d3.geoPath(largeProj)","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"// Projection for the inset\nlargeProj = d3.geoMercator().fitExtent(\n [\n [width / 10, 10],\n [width / 2 - width / 10, height - 10]\n ],\n selectedDistricts\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"// Path function for the state projection\npath = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"// Projection for the full map\nprojection = d3.geoMercator().fitExtent(\n [\n [10, 10],\n [width / 2 - 10, height - 10]\n ],\n geoProposed\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"nCols = Math.floor(width / rectWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"height = (width /2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"radioLabels = ({district:\"District number\", pctChange: \"Percent growth in area\", absPctChange:\"Percent change in area\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1473,"value":"import {drawOverlap} from \"@observablehq/compute-overlapping-sections\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1250,"value":"// White background for text\nfunction halo(text) {\n text\n .clone(true)\n .each(function () {\n this.parentNode.insertBefore(this, this.previousSibling);\n })\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 4)\n .attr(\"stroke-linejoin\", \"round\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1450,"value":"// Creates the pattern for stripes\nmakeDef = () => {\n return svg`\n\t\t \n\t\t\t ƒ\n\t\t \n\t `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1449,"value":"colors = ({current:\"hsl(170 40% 80%)\", proposed:\"purple\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1603,"value":"// Spacing between charts\noffset = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1288,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W35","stdlib":"1","titling":"auto"}