31:Tb64,voter_map = { let svg = d3.create("svg").attr("width", w).attr("height", h); let map = svg.append("g"); map .append("g") .selectAll("path.boundary") .data(precinct_data.features) .join("path") .attr("class", "boundary") .attr("data-district_votes", function (o) { console.log(o); return `${o.properties.enr_desc}---${o.properties.dvotes}---${o.properties.rvotes}`; }) .attr("fill", function (d) { let total = d.properties.dvotes + d.properties.rvotes; return d3.interpolateRdBu(d.properties.dvotes / total); }) // .attr("fill-opacity", 0) .attr("stroke", "#333") .attr("stroke-width", 0.2) .attr("stroke-linejoin", "round") .attr("d", path) .on("pointerenter", function () { // d3.selectAll("path.boundary").attr("fill-opacity", 0.4); d3.select(this).attr("stroke-width", 3).raise(); }) .on("pointerleave", function () { d3.selectAll("path.boundary").attr("stroke-width", 0.5); }); map .selectAll("path.boundary") .nodes() .forEach(function (d, i) { let [precinct, dem, rep] = d .getAttribute("data-district_votes") .split("---"); dem = parseInt(dem); rep = parseInt(rep); 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 content = `

${precinct}

Dem vote: ${dpct}

Rep vote: ${rpct}

`; tippy(d, { content: content, allowHTML: true, theme: "light-border", followCursor: true, offset: [0, 20] }); }); map .append("g") .selectAll("path.road") .data(road_data.features) .join("path") .attr("class", "road") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); map .append("g") .selectAll("path.road") .data(road_data.features) .join("path") .attr("class", "road") .attr("fill", "none") .attr("stroke", "#eee") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); svg.call( d3 .zoom() .extent([ [0, 0], [w, h] ]) .translateExtent([ [0, 0], [w, h] ]) .scaleExtent([1, 6]) .duration(500) .on("zoom", function (evt, a, b) { map.attr("transform", evt.transform); }) ); return svg.node(); }32:[{"id":"d0deb15d2b654b6be1fe6cbf3b2bb3f37f4e5b715397a9ed841bb6b23eeec491132211e8796f7cc412524692cdc5925379d93a3c220040302ffe6dd81df2fd6a","href":"https://static.observableusercontent.com/files/d0deb15d2b654b6be1fe6cbf3b2bb3f37f4e5b715397a9ed841bb6b23eeec491132211e8796f7cc412524692cdc5925379d93a3c220040302ffe6dd81df2fd6a","name":"buncombe_precincts_with_data@2.json","type":"application/json","lastModified":1646995483954.77,"size":387329}] 2f:{"title":"Buncombe county voting","cells":[{"id":0,"value":"# Buncombe county voting\n\nThis map shows all 79 voting precincts in Buncombe county shaded according to how Democratic or Republican they voted in the 2020 election. The major interstates are shown just for reference.\n\nYou can hover over the precincts to find the precinct name and voter ratios. You can also zoom in a bit to help distinguish the precincts.","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"legend = Legend(\n d3.scaleOrdinal(\n [\"All R\", \"\", \"More R\", \" \", \"evenish\", \" \", \"More D\", \" \", \"All D\"],\n d3.schemeRdBu[9]\n ),\n {\n title: \"Shading Key:\",\n tickSize: 0\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"### Data\n\nThe vote counts are based on all three statewide elections held in 2020 - i.e.\n\n * The US Presidential race,\n * the NC Senate race, and\n * the NC Governor's race.\n\nTaken as a whole, there were ${total_vote_counts.dvotes} Democratic votes to ${total_vote_counts.rvotes} Republican votes in Buncombe county among those three races.\n\nAll voting data comes from the [NC Board of Elections](https://www.ncsbe.gov/results-data/election-results).","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"total_vote_counts = {\n let dvotes = d3.sum(precinct_data.features.map((o) => o.properties.dvotes));\n let rvotes = d3.sum(precinct_data.features.map((o) => o.properties.rvotes));\n return { dvotes, rvotes };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"map_data = FileAttachment(\"buncombe_precincts_with_data@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"precinct_data = topojson.feature(\n map_data,\n map_data.objects.buncombe_precincts_with_data\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"road_data = topojson.feature(map_data, map_data.objects.centerline)","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"### Setup geoPath","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoIdentity().reflectY(true).fitSize([w, h], precinct_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"h = 0.7 * w","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"w = width < 1200 ? width : 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"import { Legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"tippy_style = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"d3.geoConicEqualArea","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}