31:Tfce,chart = { const zoom = d3 .zoom() .scaleExtent([0.7, 10]) .on("zoom", zoomed); const svg = d3.create("svg").attr("viewBox", [0, -30, width, height]); const g = svg.append("g"); const color = d3.scaleQuantile(d3.schemeReds[5]); const color2 = d3.scaleQuantile([0, 1], d3.schemeBlues[5]); // Create empty object for holding dataset const voteD = {}; const voteR = {}; // Create property for each ID, give it value from rate data_raw.forEach(d => (voteD[d.id] = +d.demv)); data_raw.forEach(d => (voteR[d.id] = +d.gopv)); g.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", "white") .attr("d", path) .append("title") .text( d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} ${format(data[d.id])}` ); g.append("g") .attr("fill-opacity", 0.3) .selectAll("path") .data( data_raw .filter(d => d.position) .sort( (a, b) => d3.ascending(a.position[1], b.position[1]) || d3.ascending(a.position[0], b.position[0]) ) ) .join("path") .attr( "transform", d => `translate(${[d.position[0] + 3.6, d.position[1]]})` ) .attr("d", d => spike(length(d.value * voteR[d.id]))) .attr("fill", "red") .attr("stroke", "red") .append("title") .text( d => `${d.title} GOP votes: ${format(d.value * voteR[d.id])}` ); g.append("g") .attr("fill-opacity", 0.3) .selectAll("path") .data( data_raw .filter(d => d.position) .sort( (a, b) => d3.ascending(a.position[1], b.position[1]) || d3.ascending(a.position[0], b.position[0]) ) ) .join("path") .attr( "transform", d => `translate(${[d.position[0] - 3.6, d.position[1]]})` ) .attr("d", d => spike(length(d.value * voteD[d.id]))) .attr("fill", "blue") .attr("stroke", "blue") .append("title") .text( d => `${d.title} DEM votes: ${format(d.value * voteD[d.id])}` ); g.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "none") //#e0e0e0 .attr("stroke", "black") .attr("fill-opacity", 1) .attr("stroke-linejoin", "round") .attr("stroke-width", 0.75) .attr("d", path); g.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "gray") .attr("fill-opacity", 1) .attr("stroke-linejoin", "round") .attr("stroke-width", 0.75) .attr("d", path); g.append("path") .datum(topojson.mesh(us, us.objects.counties, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "none") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.15) .attr("d", path); g.append("text") .attr("x", 270) .attr("y", 20) .attr("font-family", "Helvetica") .attr("font-size", 24) .attr("font-weight", "bold") .attr("fill", "gray") .text("US Elections 2020: County-wise Results"); //LEGEND const legend = g .append("g") .attr("fill", "#777") // .attr("fill", "#777") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 8) .style('fill', 'black') //NEW added from stackoverflow answer .selectAll("g") .data( length .ticks(6) .slice(1) .reverse() ) .join("g") .attr( "transform", (d, i) => `translate(${width - (i + 1) * 20}, ${(height * 3) / 4})` ); legend .append("path") .attr("fill", "black") .attr("fill-opacity", 0.3) .attr("stroke", "black") .attr("d", d => spike(length(d))); legend .append("text") .attr("dy", "1.3em") .text(length.tickFormat(4, ".1s")); svg.call(zoom); function zoomed(event) { const { transform } = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node(); }32:T46b,data_raw = { // const parseDate = d3.timeParse("%m/%d/%Y"); // const projection = d3.geoAlbersUsa().scale(1280).translate([480, 300]); const data = await d3.csv("https://raw.githubusercontent.com/tonmcg/US_County_Level_Election_Results_08-20/master/2020_US_County_Level_Presidential_Results.csv", // d => { // const p = projection(d); // p.date = parseDate(d.date); // return p; // } ); // return Object.assign(data.map(({county_fips: id, votes_gop: gopv, votes_dem: demv}) => ({id, gopv: +gopv, demv: +demv})), {x: "GOP Votes →", y: "Dem Votes -->"}) return Object.assign(data.map(({county_fips: id, per_gop: gopv, per_dem: demv, total_votes: totalv}) => ({id, gopv: +gopv, demv: +demv, totalv: +totalv, position: features.get(id) && path.centroid(features.get(id)), title: features.get(id) && features.get(id).properties.name, value: +totalv })), {x: "GOP Votes →", y: "Dem Votes →"}) }33:[{"id":"6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","href":"https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","name":"counties-albers-10m.json","type":"application/octet-stream","lastModified":1605238986717.707,"size":795407}] 2f:{"title":"US 2020 Election Results: County-wise Spikes Pair","cells":[{"id":0,"value":"md`# US 2020 Election Results: County-wise Spikes Pair\n\nHeight of the spike indicates number of votes.\n\nBlue spikes - Democrat votes; Red spikes - Republican votes. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"md`### Drag, scroll or pinch to zoom in and out on a location; hover on a spike or county to see data in tooltip.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"height = (width * 2) / 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"spike = (length, width = 7) => `M${-width / 2},0L0,${-length}L${width / 2},0`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"length = d3.scaleLinear([0, d3.max(data_raw, d => d.value)], [0, 200])","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"data = {\n // Create empty object for holding dataset\n const vote = {};\n\n // Create property for each ID, give it value from rate\n data_raw.forEach(\n d =>\n (vote[d.id] =\n d.gopv > d.demv\n ? `GOP won with ${(Math.round(d.gopv * 1000) / 10).toFixed(\n 1\n )}% of votes.`\n : `DEM won with ${(Math.round(d.demv * 1000) / 10).toFixed(\n 1\n )}% of votes.`)\n );\n\n return vote;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"// color = d3.scaleQuantize([100, d3.max(data_raw, d => d.gopv) ], d3.schemeBlues[9])\n// color = d3.scaleQuantize([0,100], d3.schemeBlues[8])\n// color = d3.scaleQuantile([0,10,20,40,50,60,70,80,90,100], d3.schemeBlues[9])\n// colorGOP = d3.scaleQuantile([d3.min(data_raw, d => d.gopv), d3.max(data_raw, d => d.gopv)], d3.schemeReds[9])\ncolorGOP = d3.scaleQuantile([0,1], d3.schemeReds[5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"// colorDEM = d3.scaleQuantile([d3.min(data_raw, d => d.demv), d3.max(data_raw, d => d.demv)], d3.schemeBlues[9])\ncolorDEM = d3.scaleQuantile([0,1], d3.schemeBlues[5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"format = d => d3.format(\",\")(d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"features = new Map(topojson.feature(us, us.objects.counties).features.map(d => [d.id, d]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}