31:T134d,{ const format = d3.format(",.0f"); const height = 500; const projection = d3 .geoConicConformal() .parallels([40 + 37 / 60, 41 + 47 / 60]) .rotate([93 + 30 / 60, 0]) .fitSize([width, height], iowa); const path = d3.geoPath(projection); const radiusExtent = [dorlingConfig.radiusMin, dorlingConfig.radiusMax]; const radius = d3 .scaleSqrt() .domain(d3.extent(counties2016, (d) => d.margin)) .range(radiusExtent); const color = (leader) => leader === "trump" ? dorlingConfig.gopColor : dorlingConfig.demColor; const tooltip = (d) => { return `${d.name} County ${d.leader === "trump" ? "Donald Trump" : "Hillary Clinton"} won by ${format( d.margin )} votes`; }; const applySimulation = (nodes) => { const simulation = d3 .forceSimulation(nodes) .force( "cx", d3 .forceX() .x((d) => width / 2) .strength(0.02) ) .force( "cy", d3 .forceY() .y((d) => height / 2) .strength(0.02) ) .force( "x", d3 .forceX() .x((d) => d.x) .strength(dorlingConfig.forceXStrength) ) .force( "y", d3 .forceY() .y((d) => d.y) .strength(dorlingConfig.forceYStrength) ) .force( "charge", d3.forceManyBody().strength(dorlingConfig.chargeStrength) ) .force( "collide", d3 .forceCollide() .radius( (d) => radius(d.properties.margin) + dorlingConfig.nodePadding ) ) .stop(); while (simulation.alpha() > 0.01) { simulation.tick(); } return simulation.nodes(); }; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width + 0) .attr("height", height + 20) //.append("g") .attr("transform", "translate(" + 0 + "," + 10 + ")"); // .attr("viewBox", [0, 0, width, height]) // .attr("width", width) // .attr("height", height); const g = svg.append("g"); const countiesGroup = g.append("g").attr("class", "counties"); countiesGroup .selectAll("path") .data(iowa.features) .join("path") .attr("fill", dorlingConfig.countyFillColor) .attr("stroke", dorlingConfig.countyStrokeColor) .attr("d", path); const data = iowa.features.map((f) => { const d = Object.assign({}, f); var centroid = path.centroid(f); d.x = centroid[0]; d.y = centroid[1]; const data = counties2016Lookup[+d.properties.county_fips]; d.properties.margin = data.margin; d.properties.leader = data.leader; d.properties.name = data.county; return d; }); const values = applySimulation(data); // for cartogram const cartogramGroup = g.append("g").classed("cartogram", true); cartogramGroup .selectAll("circle") .data(values) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => radius(d.properties.margin)) .attr("stroke", (d) => color(d.properties.leader)) .attr("stroke-width", 2) .attr("fill", (d) => color(d.properties.leader)) .attr("fill-opacity", dorlingConfig.fillOpacity) .on("mouseover", (e) => { d3.select(e.target) .attr("stroke", "black") .attr("stroke-width", 5) .raise(); }) .on("mouseout", (e) => { d3.select(e.target) .attr("stroke", (d) => color(d.properties.leader)) .attr("stroke-width", 2); }) .append("title") .text((d) => tooltip(d.properties)); // for cities const citiesGroup = g.append("g").attr("class", "cities"); // for each city const cityCircles = citiesGroup .selectAll(".city") .data(dorlingConfig.cities) .join("g") .attr("class", "city") .attr("data-name", (d) => d) .attr( "transform", (d) => `translate(${projection(cityLookup.get(d))[0]}, ${ projection(cityLookup.get(d))[1] })` ); // city circles cityCircles .append("circle") .attr("fill", "#222222") .attr("stroke", "#222222") .attr("cx", 0) .attr("cy", 0) .attr("r", 2); // city halos cityCircles .append("text") .attr("x", (d) => d.x || 7) .attr("y", (d) => d.y || 5) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "2.5") .attr("font-size", "12px") .attr("pointer-events", "none") .text((d) => d); // city labels cityCircles .append("text") .attr("x", (d) => d.x || 7) .attr("y", (d) => d.y || 5) .attr("text-anchor", (d) => d.anchor || "start") .attr("font-family", "sans-serif") .attr("fill", "#222") .attr("font-size", "12px") .attr("pointer-events", "none") .text((d) => d); return svg.node(); }32:T4af,viewof dorlingConfig = Inputs.form({ forceXStrength: Inputs.range([-15, 15], { label: "X-force strength", value: 5, step: 0.5 }), forceYStrength: Inputs.range([-10, 10], { label: "Y-force strength", value: 5, step: 0.5 }), chargeStrength: Inputs.range([-50, 50], { label: "Charge strength", value: 30, step: 1 }), nodePadding: Inputs.range([0, 50], { label: "Node padding", value: 3, step: 1 }), radiusMin: Inputs.range([0, 50], { label: "Radius minimum", value: 1, step: 1 }), radiusMax: Inputs.range([1, 500], { label: "Radius maximum", value: 50, step: 1 }), fillOpacity: Inputs.range([0, 11], { label: "Fill opacity", value: 0.5, step: 0.01 }), gopColor: Inputs.color({ label: "GOP color", value: "#cc3d3d" }), demColor: Inputs.color({ label: "Dem color", value: "#1d81c5" }), countyFillColor: Inputs.color({ label: "County fill", value: "#ffffff" }), countyStrokeColor: Inputs.color({ label: "County stroke", value: "#cccccc" }), cities: Inputs.checkbox(cityLookup.keys(), { label: "Cities", value: cityLookup.keys() }) })33:T158d,{ const format = d3.format(",.0f"); const height = 500; const projection = d3 .geoConicConformal() .parallels([40 + 37 / 60, 41 + 47 / 60]) .rotate([93 + 30 / 60, 0]) .fitSize([width, height], iowa); const path = d3.geoPath(projection); const radiusExtent = [ dorlingSquareConfig.squareMin, dorlingSquareConfig.squareMax ]; const radius = d3 .scaleLinear() .domain(d3.extent(counties2016, (d) => d.margin)) .range(radiusExtent); const color = (leader) => leader === "trump" ? dorlingConfig.gopColor : dorlingConfig.demColor; const tooltip = (d) => { return `${d.name} County ${d.leader === "trump" ? "Donald Trump" : "Hillary Clinton"} won by ${format( d.margin )} votes`; }; function forceCollide() { let nodes; let padding = dorlingSquareConfig.nodePadding; function force(alpha) { const quad = d3.quadtree( nodes, (d) => d.x, (d) => d.y ); for (const d of nodes) { quad.visit((q, x1, y1, x2, y2) => { let updated = false; if (q.data && q.data !== d) { let x = d.x - q.data.x, y = d.y - q.data.y, xSpacing = padding + (q.data.length + d.length) / 2, ySpacing = padding + (q.data.length + d.length) / 2, absX = Math.abs(x), absY = Math.abs(y), l, lx, ly; if (absX < xSpacing && absY < ySpacing) { l = Math.sqrt(x * x + y * y); lx = (absX - xSpacing) / l; ly = (absY - ySpacing) / l; // the one that's barely within the bounds probably triggered the collision if (Math.abs(lx) > Math.abs(ly)) { lx = 0; } else { ly = 0; } d.x -= x *= lx; d.y -= y *= ly; q.data.x += x; q.data.y += y; updated = true; } } return updated; }); } } force.initialize = (_) => (nodes = _); return force; } const applySimulation = (nodes) => { const simulation = d3 .forceSimulation(nodes) .force( "x", d3.forceX((d) => d.x) ) .force( "y", d3.forceY((d) => d.y) ) .force("collide", forceCollide()); while (simulation.alpha() > 0.01) { simulation.tick(); } return simulation.nodes(); }; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); const g = svg.append("g"); const countiesGroup = g.append("g").attr("class", "counties"); countiesGroup .selectAll("path") .data(iowa.features) .join("path") .attr("fill", dorlingSquareConfig.countyFillColor) .attr("stroke", dorlingSquareConfig.countyStrokeColor) .attr("d", path); const data = iowa.features.map((f) => { const coords = path.centroid(f); const l = counties2016Lookup[+f.properties.county_fips]; const d = {}; d.margin = l.margin; d.leader = l.leader; d.name = l.county; d.x = coords[0]; d.y = coords[1]; d.length = radius(d.margin); d.color = color(d.leader); return d; }); const values = applySimulation(data); // for cartogram const cartogramGroup = g.append("g").classed("cartogram", true); const squareGroup = cartogramGroup .selectAll("rect") .data(values) .join("rect") .attr("x", (d) => d.x - d.length / 2) .attr("y", (d) => d.y - d.length / 2) .attr("width", (d) => d.length) .attr("height", (d) => d.length) .attr("stroke", (d) => d.color) .attr("stroke-width", 2) .attr("fill", (d) => d.color) .attr("fill-opacity", dorlingSquareConfig.fillOpacity) .on("mouseover", (e) => { d3.select(e.target) .attr("stroke", "black") .attr("stroke-width", 5) .raise(); }) .on("mouseout", (e) => { d3.select(e.target) .attr("stroke", (d) => color(d.leader)) .attr("stroke-width", 2); }) .append("title") .text((d) => tooltip(d)); // for cities const citiesGroup = g.append("g").attr("class", "cities"); // for each city const cityCircles = citiesGroup .selectAll(".city") .data(dorlingSquareConfig.cities) .join("g") .attr("class", "city") .attr("data-name", (d) => d) .attr( "transform", (d) => `translate(${projection(cityLookup.get(d))[0]}, ${ projection(cityLookup.get(d))[1] })` ); // city circles cityCircles .append("circle") .attr("fill", "#222222") .attr("stroke", "#222222") .attr("cx", 0) .attr("cy", 0) .attr("r", 2); // city halos cityCircles .append("text") .attr("x", (d) => d.x || 7) .attr("y", (d) => d.y || 5) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "2.5") .attr("font-size", "12px") .attr("pointer-events", "none") .text((d) => d); // city labels cityCircles .append("text") .attr("x", (d) => d.x || 7) .attr("y", (d) => d.y || 5) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("fill", "#222") .attr("font-size", "12px") .attr("pointer-events", "none") .text((d) => d); return svg.node(); }34:Tea9,{ const format = d3.format(",.0f"); const height = 500; const projection = d3 .geoConicConformal() .parallels([40 + 37 / 60, 41 + 47 / 60]) .rotate([93 + 30 / 60, 0]) .fitSize([width, height], iowa); const path = d3.geoPath(projection); const radiusExtent = [shapeConfig.squareMin, shapeConfig.squareMax]; const radius = d3 .scaleLinear() .domain(d3.extent(counties2016, (d) => d.margin)) .range([0.05, 1]); const color = (leader) => leader === "trump" ? dorlingConfig.gopColor : dorlingConfig.demColor; const tooltip = (d) => { return `${d.name} County ${d.leader === "trump" ? "Donald Trump" : "Hillary Clinton"} won by ${format( d.margin )} votes`; }; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); const g = svg.append("g"); const countiesGroup = g.append("g").attr("class", "counties"); countiesGroup .selectAll("path") .data(iowa.features) .join("path") .attr("fill", shapeConfig.countyFillColor) .attr("stroke", shapeConfig.countyStrokeColor) .attr("d", path); const data = iowa.features.map((f) => { const l = counties2016Lookup[+f.properties.county_fips]; f.properties.margin = l.margin; f.properties.leader = l.leader; f.properties.name = l.county; f.properties.length = radius(f.properties.margin); f.properties.color = color(f.properties.leader); return f; }); function transform(d, year) { const [x, y] = path.centroid(d); return ` translate(${x},${y}) scale(${d.properties.length}) translate(${-x},${-y}) `; } // for cartogram const cartogramGroup = g.append("g").classed("cartogram", true); cartogramGroup .selectAll("path") .data(data) .join("path") .attr("stroke", (d) => d.properties.color) .attr("stroke-width", 2) .attr("fill", (d) => d.properties.color) .attr("fill-opacity", dorlingSquareConfig.fillOpacity) .attr("d", path) .attr("transform", (d) => transform(d, 0)) .on("mouseover", (e) => { d3.select(e.target) .attr("stroke", "black") .attr("stroke-width", 5) .raise(); }) .on("mouseout", (e) => { d3.select(e.target) .attr("stroke", (d) => d.properties.color) .attr("stroke-width", 2); }) .append("title") .text((d) => tooltip(d.properties)); // for cities const citiesGroup = g.append("g").attr("class", "cities"); // for each city const cityCircles = citiesGroup .selectAll(".city") .data(shapeConfig.cities) .join("g") .attr("class", "city") .attr("data-name", (d) => d) .attr( "transform", (d) => `translate(${projection(cityLookup.get(d))[0]}, ${ projection(cityLookup.get(d))[1] })` ); // city circles cityCircles .append("circle") .attr("fill", "#222222") .attr("stroke", "#222222") .attr("cx", 0) .attr("cy", 0) .attr("r", 2); // city halos cityCircles .append("text") .attr("x", (d) => d.x || 7) .attr("y", (d) => d.y || 5) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "2.5") .attr("font-size", "12px") .attr("pointer-events", "none") .text((d) => d); // city labels cityCircles .append("text") .attr("x", (d) => d.x || 7) .attr("y", (d) => d.y || 5) .attr("text-anchor", (d) => d.anchor || "start") .attr("font-family", "sans-serif") .attr("fill", "#222") .attr("font-size", "12px") .attr("pointer-events", "none") .text((d) => d); return svg.node(); }35:[{"id":"c3dde8215d9e6aff35162e12bfb492face8754c0558a421a6a6b0e7d01f0e2a268757ae9408c7098287afcc68ffca1f315d46e48e54113a72400786ba78d4314","href":"https://static.observableusercontent.com/files/c3dde8215d9e6aff35162e12bfb492face8754c0558a421a6a6b0e7d01f0e2a268757ae9408c7098287afcc68ffca1f315d46e48e54113a72400786ba78d4314","name":"iowa-counties.geojson","type":"application/geo+json","lastModified":1666290214632.32,"size":3219293},{"id":"630b1c61f00617de2f9ca5a6aecf57d681e91c8f2e9bd9ee599b3711a0586eab413acf7770051270a9ae43a267e2e970870be5820943d1b4d8d4fb48922b2310","href":"https://static.observableusercontent.com/files/630b1c61f00617de2f9ca5a6aecf57d681e91c8f2e9bd9ee599b3711a0586eab413acf7770051270a9ae43a267e2e970870be5820943d1b4d8d4fb48922b2310","name":"iowa-counties-population.csv","type":"text/csv","lastModified":1666290256727.381,"size":4143},{"id":"420b5a0e993b30949ce8ff31909d283f9f4615d667847e11535e82b62328df82ca7a5b4d41b6e6ef696e8163d820f21db1362728a53befd09a87fc5184272f7e","href":"https://static.observableusercontent.com/files/420b5a0e993b30949ce8ff31909d283f9f4615d667847e11535e82b62328df82ca7a5b4d41b6e6ef696e8163d820f21db1362728a53befd09a87fc5184272f7e","name":"iowa-2016-results.csv","type":"text/csv","lastModified":1666695556255.328,"size":4983}] 2f:{"title":"Experimental election maps","cells":[{"id":0,"value":"# Experimental election maps\n\nDifferent ways to draw data using Iowa’s 99 checkerboard counties. Techniques borrowed from [Chris Henrick](https://observablehq.com/@clhenrick/dorling-cartogram-circle-packs), [Nicolas Lambert](https://observablehq.com/@neocartocnrs/rectangle-cartogram) and [Mike Bostock](https://observablehq.com/@d3/non-contiguous-cartogram).","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":102,"value":"

Size of Lead as Circular Dorling Cartogram

","pinned":false,"hidden":false,"mode":"html"},{"id":251,"value":"\n\n\n Donald Trump\n Hillary Clinton\n","pinned":false,"hidden":false,"mode":"html"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":325,"value":"

Size of Lead as Square Dorling Cartogram

","pinned":false,"hidden":false,"mode":"html"},{"id":327,"value":"\n\n\n Donald Trump\n Hillary Clinton\n","pinned":false,"hidden":false,"mode":"html"},{"id":281,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof dorlingSquareConfig = Inputs.form({\n nodePadding: Inputs.range([1, 100], {\n label: \"Node padding\",\n value: 10,\n step: 1\n }),\n squareMin: Inputs.range([0, 50], {\n label: \"Square minimum\",\n value: 3,\n step: 1\n }),\n squareMax: Inputs.range([1, 500], {\n label: \"Square maximum\",\n value: 100,\n step: 1\n }),\n fillOpacity: Inputs.range([0, 11], {\n label: \"Fill opacity\",\n value: 0.5,\n step: 0.01\n }),\n gopColor: Inputs.color({\n label: \"GOP color\",\n value: \"#cc3d3d\"\n }),\n demColor: Inputs.color({\n label: \"Dem color\",\n value: \"#1d81c5\"\n }),\n countyFillColor: Inputs.color({\n label: \"County fill\",\n value: \"#ffffff\"\n }),\n countyStrokeColor: Inputs.color({\n label: \"County stroke\",\n value: \"#cccccc\"\n }),\n cities: Inputs.checkbox(cityLookup.keys(), {\n label: \"Cities\",\n value: cityLookup.keys()\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":444,"value":"

Size of Lead as Non-Contiguous Counties

","pinned":false,"hidden":false,"mode":"html"},{"id":452,"value":"\n\n\n Donald Trump\n Hillary Clinton\n","pinned":false,"hidden":false,"mode":"html"},{"id":414,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"viewof shapeConfig = Inputs.form({\n fillOpacity: Inputs.range([0, 11], {\n label: \"Fill opacity\",\n value: 0.5,\n step: 0.01\n }),\n gopColor: Inputs.color({\n label: \"GOP color\",\n value: \"#cc3d3d\"\n }),\n demColor: Inputs.color({\n label: \"Dem color\",\n value: \"#1d81c5\"\n }),\n countyFillColor: Inputs.color({\n label: \"County fill\",\n value: \"#ffffff\"\n }),\n countyStrokeColor: Inputs.color({\n label: \"County stroke\",\n value: \"#cccccc\"\n }),\n cities: Inputs.checkbox(cityLookup.keys(), {\n label: \"Cities\",\n value: cityLookup.keys()\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":13,"value":"#### Data","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"counties2016Lookup = counties2016.reduce((obj, item) => {\n obj[item.fips] = item;\n return obj;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"counties2016 = d3.csvParse(\n await FileAttachment(\"iowa-2016-results.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"populationLookup = populations.reduce((obj, item) => {\n obj[item.FIPS] = item;\n return obj;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"populations = d3.csvParse(\n await FileAttachment(\"iowa-counties-population.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"cityLookup = new Map([\n [\"Cedar Rapids\", [-91.6656232, 41.9778795]],\n [\"Des Moines\", [-93.6091064, 41.6005448]],\n [\"Dubuque\", [-90.6645718, 42.5005583]],\n [\"Iowa City\", [-91.53016830000001, 41.6611277]],\n [\"Sioux City\", [-96.4003069, 42.4999942]]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"iowa = await FileAttachment(\"iowa-counties.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"#### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}