31:T90d,interactiveMap = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // svg.append("g").attr("transform", "translate(${height},20)"); // .append(() => legend({ ramp, title: data.title, width: 260 })); svg .append("g") .selectAll("circle") .data(circles.filter(d => !!d.winner)) .join("circle") .attr("fill", d => { let tt = nytPresCountiesByFIPS.get(d.id); if (!tt) return "lightgray"; if (tt.results.trumpd < tt.results.bidenj) { return blue; } else if (tt.results.trumpd > tt.results.bidenj) { return red; } return "lightgray"; }) .attr("stroke", d => { let problem = shirleyDataByFIPS.get(d.id); if (problem) { return "orange"; } return "none"; }) .attr("opacity", d => { let tt = nytPresCountiesByFIPS.get(d.id); if (!tt) return 0.1; return ( 0.2 + tt.votes / (tt.tot_exp_vote ? tt.tot_exp_vote : tt.votes2016) ); }) .attr("cx", d => d.x) .attr("cy", d => d.y) // .attr("r", d => d.p) .attr("r", d => { let tt = nytPresCountiesByFIPS.get(d.id); if (!tt) return false; let r = tt.tot_exp_vote ? tt.tot_exp_vote : tt.votes2016; r = Math.sqrt(r * 0.001) * 0.4 + 1; return r; }) .on("click", (event, d) => { let tt = nytPresCountiesByFIPS.get(d.id); console.log("county", d, tt); }) .on("mouseout", (event, d) => { let tooltip = d3.select("#svg-tip").style("display", "none") }) .on("mousemove", (event, d) => { let tt = nytPresCountiesByFIPS.get(d.id); // https://observablehq.com/@jianan-li/basic-tooltip let tooltip = d3.select("#svg-tip") .style("display", "") let x = event.pageX if(x + 200 > width) x -= 200 tooltip .style("top", (event.pageY - 50) + "px") .style("left", (x + 20) + "px"); tooltip.select(".county-name").text(d.properties.name) tooltip.select(".county-votes2020").text(numformat(tt?.votes)) tooltip.select(".county-expected").text(numformat(tt?.tot_exp_vote)) tooltip.select(".county-votes2016").text(numformat(d.total)) // console.log("tt", tooltip.node()); }) return html`

${svg.node()}

`; }32:T614,mapSizedByVote = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // svg.append("g").attr("transform", "translate(${height},20)"); // .append(() => legend({ ramp, title: data.title, width: 260 })); svg .append("g") .selectAll("circle") .data(circles.filter(d => !!d.winner)) .join("circle") .attr("fill", d => { let tt = nytPresCountiesByFIPS.get(d.id); if (!tt) return "lightgray"; if (tt.results.trumpd < tt.results.bidenj) { return blue; } else if (tt.results.trumpd > tt.results.bidenj) { return red; } return "lightgray"; }) .attr("stroke", d => { let problem = shirleyDataByFIPS.get(d.id); if (problem) { return "orange"; } return "none"; }) .attr("opacity", d => { let tt = nytPresCountiesByFIPS.get(d.id); if (!tt) return 0.1; return ( 0.2 + tt.votes / (tt.tot_exp_vote ? tt.tot_exp_vote : tt.votes2016) ); }) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => { let tt = nytPresCountiesByFIPS.get(d.id); if (!tt) return false; let r = tt.tot_exp_vote ? tt.tot_exp_vote : tt.votes2016; r = Math.sqrt(r * 0.001) * 0.4 + 1; return r; }) .on("click", (event, d) => { let tt = nytPresCountiesByFIPS.get(d.id); console.log("county", d, tt); }) .append("title") .text(d => d.properties.name); return svg.node(); // return html`

${svg.node()}

`; }33:T53e,map = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // svg.append("g").attr("transform", "translate(${height},20)"); // .append(() => legend({ ramp, title: data.title, width: 260 })); svg .append("g") .selectAll("circle") .data(circles.filter(d => !!d.winner)) .join("circle") .attr("fill", d => { let tt = nytPresCountiesByFIPS.get(d.id); if (!tt) return "lightgray"; if (tt.results.trumpd < tt.results.bidenj) { return blue; } else if (tt.results.trumpd > tt.results.bidenj) { return red; } return "lightgray"; }) .attr("stroke", d => { let problem = shirleyDataByFIPS.get(d.id); if (problem) { return "orange"; } return "none"; }) .attr("opacity", d => { let tt = nytPresCountiesByFIPS.get(d.id); if (!tt) return 0.1; return ( 0.2 + tt.votes / (tt.tot_exp_vote ? tt.tot_exp_vote : tt.votes2016) ); }) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.p) .on("click", (event, d) => { let tt = nytPresCountiesByFIPS.get(d.id); console.log("county", d, tt); }) .append("title") .text(d => d.properties.name); return svg.node(); // return html`

${svg.node()}

`; }34:[{"id":"4efe04c4874dbff76219100a060fe894c6ef0d33652d8b843aeb98ee5e22d02445c032b9b997c1efc0677aabbd5ac9ab687527f8c69da46da73c3d1379b99078","href":"https://static.observableusercontent.com/files/4efe04c4874dbff76219100a060fe894c6ef0d33652d8b843aeb98ee5e22d02445c032b9b997c1efc0677aabbd5ac9ab687527f8c69da46da73c3d1379b99078","name":"circles2016.json","type":"application/json","lastModified":1604449186956.904,"size":4421660}] 2f:{"title":"Live Election Data","cells":[{"id":0,"value":"md`# Live Election Data\nWARNING: WIP\n\ncounties sized by expected vote count \ncolored by currently winning candidate \nopacity determined by vote count / expected vote count\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"circles","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"nytPres.meta.version","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"nytPres = d3.json(\n \"https://static01.nyt.com/elections-assets/2020/data/api/2020-11-03/national-map-page/national/president.json\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"numformat = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"tooltip = html`

\nName: County,
\nVotes 2020:
\nExpected:
\nVotes 2016:
\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {\n flData,\n gaData,\n miData,\n ncData,\n ohData,\n paData,\n txData\n} from \"@philipnelson/election-night-results\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"nytPresCounties = {\n let data = [];\n nytPres.data.races.forEach(r => {\n data = data.concat(r.counties);\n });\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"ky = nytPresCounties.filter(d => d.fips.slice(0, 2) == \"21\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"nytPresStatesByAbbr = new Map(nytPres.data.races.map(d => [d.state_id, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"nytPresCountiesByFIPS = new Map(nytPresCounties.map(d => [d.fips, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"// import { circles } from \"@codingwithfire/force-bubble-map-with-textures-js\"\ncircles = FileAttachment(\"circles2016.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"lightBlue = \"#52b2e8\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"lightRed = \"#ee448a\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"blue = \"#002868\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"red = \"#bf0a30\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"import { data as shirleyData } from \"@sxywu/7-voting-problems-on-election-day\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"shirleyData","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"shirleyDataByFIPS = new Map(shirleyData.map(d => [d.FIPS, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"// nytSummary = d3.json(\n// \"https://static01.nyt.com/elections-assets/2020/data/liveModel/2020-11-03/president/summary.json\"\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"[flData, gaData, miData, ncData, ohData, paData, txData]","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"cnnData = d3.json(\n \"https://politics-elex-results.data.api.cnn.io/results/view/2020-national-races-PG.json\"\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}