31:T69f,box_counting_pic = { let w = width; let h = 0.4 * w; let projection = d3.geoIdentity().reflectY(true).fitSize([w, h], mesh[0]); let canvas = d3 .create("canvas") .attr("width", w) .attr("height", h) .node(); let context = canvas.getContext("2d"); let path = d3.geoPath(projection, context); context.beginPath(); path(mesh[year == 2010 ? 0 : 1]); context.lineWidth = 1.8; context.strokeStyle = "#000"; context.stroke(); let cnts = box_count(canvas); let container = d3 .create("div") .style("position", "relative") .style("width", `${w}px`) .style("height", `${h}px`); container .append("div") .style("position", "absolute") .style("top", 0) .style("left", 0) .style("width", `${w}px`) .style("height", `${h}px`) .append(() => canvas); if (n < cnts.length) { let svg = container .append("svg") .attr("id", "box_container") .style("position", "absolute") .style("top", 0) .style("left", 0) .style("width", `${w}px`) .style("height", `${h}px`) .attr("width", w) .attr("height", h); if (n < cnts.length - 1) { let s = cnts[n].s; let boxes = cnts[n].boxes; svg .selectAll("rect") .data(boxes) .join("rect") .attr("x", (d) => (s * d[1] * w) / canvas.width) .attr("y", (d) => (s * d[0] * h) / canvas.height) .attr("width", (d) => (s * w) / canvas.width) .attr("height", (d) => (s * h) / canvas.height) .attr("opacity", 0.2) .attr("stroke", "white") .attr("stroke-width", 1); } } container.node().cnts = cnts; return container.node(); }32:T5b8,{ let cnts = box_counting_pic.cnts; cnts.forEach(function (o) { o["log s"] = Math.log(o.s); o["log cnt"] = Math.log(o.cnt); }); let x0 = cnts[0]["log s"]; let x1 = cnts.slice(-1)[0]["log s"]; let aspect = (cnts[0]["log cnt"] - cnts.slice(-1)[0]["log cnt"]) / (cnts.slice(-1)[0]["log s"] - cnts[0]["log s"]); let w = width < 640 ? width : 640; let h = w * 0.6; // * aspect; let plot = Plot.plot({ x: { //type: "log" // domain: [0, 1.2], // ticks: [0.25, 0.5, 0.75], // tickFormat: ".2s" }, y: {}, width: w, height: h, padding: 100, marks: [ Plot.dot(cnts, { x: "log s", y: "log cnt", fill: "lightgray", stroke: "black", strokeWidth: 2, title: (d, i) => `(${d.s}, ${d.cnt})` }), Plot.line([ [x0, regression.b], [x1, -regression.m * x1 + regression.b] ]), // Add the axes Plot.ruleX([x0]), Plot.ruleY([cnts.slice(-1)[0]["log cnt"]]) ] }); // Generate a bit of LaTeX. let tex_snippet = MathJax.tex2svg( String.raw`\log N_{\varepsilon} \approx ${d3.format("0.3f")( regression.b )} - ${d3.format("0.3f")(regression.m)}\log \varepsilon` ).querySelector("svg"); // and append it to the image d3.select(plot) .append("g") .attr("transform", `translate(${w * 0.3} ${0.63 * h}) scale(1.2)`) .append(() => tex_snippet); return plot; }33:T42b,## Comments First off, this is *just for fun*. There's been lots of serious work done to assess gerrymandering. [This notebook](https://observablehq.com/@mcmcclur/nc-congressional-districts), for example, assesses [efficiency gap](https://ballotpedia.org/Efficiency_gap) and is based on data from the [Metric Geometry and Gerrymandering Group](https://mggg.org/). As far as I know, no one has seriously investigated the relationship between fractal dimension of district boundaries and gerrymandering. Having said that, it seems natural to explore how complicated gerrymandered boundaries might be and fractal dimension is a natural measure of that complexity. Thus, the question seems natural and lies in squarely in the intersection of several of my interests. So, I thought I'd build this for the 30 day map challenge! There's a bit more information on box-counting dimension in [this notebook](https://observablehq.com/@mcmcclur/box-counting-dimension-examples) and on [its Wikipedia page](https://en.wikipedia.org/wiki/Minkowski%E2%80%93Bouligand_dimension).34:[{"id":"24dfd1df3792f08dee1aab642e5a7ba87a169a5ff6279cb4da7961a4495547914ff0b2f02dc8362baf01130169027be0b104d701279cc29ce8d151ef027ba145","href":"https://static.observableusercontent.com/files/24dfd1df3792f08dee1aab642e5a7ba87a169a5ff6279cb4da7961a4495547914ff0b2f02dc8362baf01130169027be0b104d701279cc29ce8d151ef027ba145","name":"nc_fractal_districts.json","type":"application/json","lastModified":1637522565006.708,"size":1892135}] 2f:{"title":"30 Day Map Challenge: Day 22 - Boundaries","cells":[{"id":0,"value":"# 30 Day Map Challenge: Day 22 - Boundaries\n## Fractal dimension of North Carolina's congressional districts\n\nNorth Carolina's congressional districts have historically been so gerrymandered that it might make sense to talk about the fractal dimension of their boundaries. This notebook explores that question by applying [box-counting techniques](https://observablehq.com/@mcmcclur/box-counting-dimension-examples) to data obtained from [the North Carolina board of elections](https://www.ncsbe.gov/results-data/voting-maps-redistricting).\n\nYou can explore the districts drawn right after the last two censuses:","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"viewof year = Inputs.radio([2010, 2020], {\n value: 2010,\n label: \"Redistrict cycle:\",\n format: (y) => y\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"year == 2010\n ? md`\nNorth Carolina's 2010 congressional districts were so gerrymandered that the NC Supreme Court ordered them to be redrawn - twice! The analysis here suggests that their fractal dimension is approximately ${d3.format(\n \"0.3f\"\n )(regression.m)}.\n`\n : md`North Carolina's most recently drawn congressional districts are based on 2020 census data. Their boundaries look a bit better, at least, but still have a fractal dimension of approximately ${d3.format(\n \"0.3f\"\n )(regression.m)}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"You can visualize the box-counts for various side lengths:","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"viewof n = {\n let n = Inputs.range([1, 8], {\n step: 1,\n label: \"Side length:\",\n value: 5\n });\n d3.select(n).select('input[type=\"number\"]').style(\"display\", \"none\");\n // d3.select(n).select(\"label\").style(\"width\", \"20px\");\n\n return n;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"n < 8\n ? md`The image below illustrates a box covering with ${tex`${box_counting_pic.cnts[n].cnt}`} boxes of side length ${tex`${box_counting_pic.cnts[n].s}`} pixels. You can use the slider to change the side length and, therefore, the box-count.`\n : md`The image below displays just a picture of North Carolina's congressional districts; you can use the slider to visualize box-counts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"The box-count data for the list of boundaries between districts is:\n\n \n ${box_counting_pic.cnts.map((o) => ``)}\n \n \n ${box_counting_pic.cnts.map((o) => ``)}\n \n

${tex`s`}	${o.s}
${tex`N_s`}	${o.cnt}

\nyielding a fractal dimension estimate of approximately ${d3.format(\"0.3f\")(\n regression.m\n)}. The regression line is ${tex.block`\\log N_s \\approx ${d3.format(\"0.3f\")(\n regression.b\n)} - ${d3.format(\"0.3f\")(regression.m)} \\log s,`}\nwhich looks like so:\n","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"regression = ss.linearRegression(\n box_counting_pic.cnts.map((o) => [-Math.log(o.s), Math.log(o.cnt)])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"function box_count(canvas) {\n let ctx = canvas.getContext(\"2d\");\n let im_data = ctx.getImageData(0, 0, canvas.width, canvas.height);\n\n let cnts = [];\n for (let s = 1; s <= d3.min([canvas.width, canvas.height]); s = 2 * s) {\n let boxes = [];\n let cnt = 0;\n for (let i = 0; s * (i + 1) <= canvas.height; i++) {\n for (let j = 0; s * (j + 1) <= canvas.width; j++) {\n if (check_box(i, j, s)) {\n cnt = cnt + 1;\n boxes.push([i, j]);\n }\n }\n }\n cnts.push({ s: s, cnt: cnt, boxes: boxes });\n }\n\n function check_box(i, j, s) {\n for (let i0 = i * s; i0 < (i + 1) * s; i0++) {\n for (let j0 = j * s; j0 < (j + 1) * s; j0++) {\n let ij0 = 4 * (j0 + i0 * canvas.width);\n if (\n im_data.data[ij0] == 0 &&\n im_data.data[ij0 + 1] == 0 &&\n im_data.data[ij0 + 2] == 0 &&\n im_data.data[ij0 + 3] == 255\n ) {\n return true;\n }\n }\n }\n return false;\n }\n\n return cnts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"mesh = [\"Rucho_Lewis_Congress_3\", \"SL 2021-174 Congress\"].map((d) =>\n topojson.mesh(fractal_district_data, fractal_district_data.objects[d])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"## Imports and data","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"fractal_district_data = FileAttachment(\"nc_fractal_districts.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"ss = require(\"simple-statistics\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"MathJax = require(\"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js\").catch(\n () => window[\"MathJax\"]\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}