31:T612,campaignEventsMap = { const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]); const style = svg.append('style'); style.html(stylehtml); svg .append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .enter() .append("path") .attr("fill", function(d) { if (campaignSelector == 'dem') { return uniqueDemStates.includes(d.properties.name) ? "#f7f7f7" : "white"; } if (campaignSelector == 'rep') { return uniqueRepStates.includes(d.properties.name) ? "#f7f7f7" : "white"; } }) .attr("stroke", "#e1e1e1") .attr("stroke-width", "0.2 px") .attr("stroke-linejoin", "round") .attr("stroke-opacity", function(d) { if (campaignSelector == 'dem') { return uniqueDemStates.includes(d.properties.name) ? 1 : 0; } if (campaignSelector == 'rep') { return uniqueRepStates.includes(d.properties.name) ? 1 : 0; } }) .attr("d", path); svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#e1e1e1") .attr("stroke-linejoin", "round") .attr("d", path); svg .append("path") .datum(usOuter) .attr("class", "outer") .attr("d", path); if (campaignSelector == 'dem') { drawDemEvents(svg); drawDemStateLabels(svg); } if (campaignSelector == 'rep') { drawRepEvents(svg); drawRepStateLabels(svg); } return svg.node(); }32:[{"id":"366f62c1551f7080624ccd6e11c7547910d556031e53263217ca9cdde190d2b8ee614c6e727d3b579dd86af55299a4a1519319ffb60b566bf4b1482c6994cec6","href":"https://static.observableusercontent.com/files/366f62c1551f7080624ccd6e11c7547910d556031e53263217ca9cdde190d2b8ee614c6e727d3b579dd86af55299a4a1519319ffb60b566bf4b1482c6994cec6","name":"stateToAPstyle.json","type":"application/json","lastModified":1605046410172.907,"size":3203},{"id":"c71b1164c98199ca21893ff3090940df9aada3307dce4a3bc55ea677e920403c986b635c473d9b7c35702f8e6afd50136e4d062872343d9f0a604c8215545e77","href":"https://static.observableusercontent.com/files/c71b1164c98199ca21893ff3090940df9aada3307dce4a3bc55ea677e920403c986b635c473d9b7c35702f8e6afd50136e4d062872343d9f0a604c8215545e77","name":"10m-1.json","type":"application/json","lastModified":1605046410172.907,"size":793153},{"id":"b16a8805b85d79914dd632b7e6b58649d1a55aa7869349765ee91a45ab051b1db64c8f65555caf5116acb49d84fa9fbe28123bb31d4866dbc4fe758edecf41e2","href":"https://static.observableusercontent.com/files/b16a8805b85d79914dd632b7e6b58649d1a55aa7869349765ee91a45ab051b1db64c8f65555caf5116acb49d84fa9fbe28123bb31d4866dbc4fe758edecf41e2","name":"events-data-1102.csv","type":"text/csv","lastModified":1605131334279.56,"size":20354}] 2f:{"title":"2020 presidential campaign events","cells":[{"id":0,"value":"md`# 2020 presidential campaign events`","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"md`Originally published at The Washington Post, [Amid the pandemic, Trump and Biden traveled most often to Pennsylvania and Florida](https://www.washingtonpost.com/elections/2020/11/02/campaign-rallies-covid/). Events data comes from Washington Post reporting, C-SPAN campaign event tracker and Ballotpedia.\n\nThe force groups the events around their original location to avoid any collision between them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"viewof campaignSelector = radio({\n title: 'Select campaign',\n description: '',\n options: [\n { label: 'Republican campaign', value: 'rep' },\n { label: 'Democratic campaign', value: 'dem' }\n ],\n value: 'rep'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"html`\n\n

Trump

Pence

Biden

Harris

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"projection = d3\n .geoAlbers()\n .scale(1280)\n .translate([480, 300])","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`### Force settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"viewof forceYStrength = slider({\n title: \"y force strength\",\n min: 0, //-50,\n max: 50,\n value: 5,\n step: 1\n //submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof forceXStrength = slider({\n title: \"x force strength\",\n min: 0, //-50,\n max: 50,\n value: 5,\n step: 1\n //submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"applySimulation = nodes => {\n const simulation = d3\n .forceSimulation(nodes)\n .force(\n \"cx\",\n d3\n .forceX()\n .x(d => width / 2)\n .strength(0.02) // 0.02\n )\n .force(\n \"cy\",\n d3\n .forceY()\n .y(d => height / 2)\n .strength(0.02)\n )\n .force(\n \"x\",\n d3\n .forceX()\n .x(d => d.x)\n .strength(forceXStrength)\n )\n .force(\n \"y\",\n d3\n .forceY()\n .y(d => d.y)\n .strength(forceYStrength)\n )\n .force(\"charge\", d3.forceManyBody().strength(2))\n .force(\n \"collide\",\n d3\n .forceCollide()\n .strength(0.6) // 0.12\n .radius(6)\n )\n .stop();\n\n while (simulation.alpha() > 0.01) {\n simulation.tick();\n }\n\n return simulation.nodes();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"md`# Drawing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"function drawDemStateLabels(svg) {\n const statesAPlabels = svg\n .append(\"g\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", 'FranklinITCStd-Light')\n .attr(\"font-size\", 14)\n .selectAll(\"g\")\n .data(topojson.feature(us, us.objects.states).features)\n .enter()\n .append(\"g\")\n .attr(\"transform\", d => `translate(${path.centroid(d).join(\",\")})`)\n .attr(\"fill\", \"#9F9F9F\")\n .attr(\"fill-opacity\", function(d) {\n //console.log(d.properties.name)\n return uniqueDemStates.includes(d.properties.name) ? 1 : 0;\n }) //#454545)\n .append(\"text\")\n .text(d => stateAPlabels.filter(s => s.code == d.id)[0].apstate);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"function drawRepStateLabels(svg) {\n const statesAPlabels = svg\n .append(\"g\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", 'FranklinITCStd-Light')\n .attr(\"font-size\", 14)\n .selectAll(\"g\")\n .data(topojson.feature(us, us.objects.states).features)\n .enter()\n .append(\"g\")\n .attr(\"transform\", d => `translate(${path.centroid(d).join(\",\")})`)\n .attr(\"fill\", \"#9F9F9F\")\n .attr(\"fill-opacity\", function(d) {\n return uniqueRepStates.includes(d.properties.name) ? 1 : 0;\n })\n .append(\"text\")\n .text(d => stateAPlabels.filter(s => s.code == d.id)[0].apstate);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"function drawStateLabels(svg) {\n const statesAPlabels = svg\n .append(\"g\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(topojson.feature(us, us.objects.states).features)\n .enter()\n .append(\"g\")\n .attr(\"transform\", d => `translate(${path.centroid(d).join(\",\")})`)\n .attr(\"fill\", \"#9F9F9Fadadad\")\n .append(\"text\")\n .text(d => stateAPlabels.filter(s => s.code == d.id)[0].apstate);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"function drawDemEvents(svg) {\n const values = applySimulation(demData);\n\n const circles = svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(values.filter(d => d.candidate == \"Harris\" || d.candidate == \"Biden\"))\n .attr(\"d\", d3.geoPath(projection))\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", 4)\n .attr(\"fill\", function(d) {\n if (d.candidate == \"Biden\") {\n return bidenColor;\n }\n if (d.candidate == \"Trump\") {\n return trumpColor;\n }\n if (d.candidate == \"Pence\") {\n return penceColor;\n }\n if (d.candidate == \"Harris\") {\n return harrisColor;\n } else {\n return \"white\";\n }\n })\n .attr(\"fill-opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"function drawRepEvents(svg) {\n const values = applySimulation(data);\n\n const circles = svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(values.filter(d => d.candidate == \"Trump\" || d.candidate == \"Pence\"))\n .attr(\"d\", d3.geoPath(projection))\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", 4)\n .attr(\"fill\", function(d) {\n if (d.candidate == \"Biden\") {\n return bidenColor;\n }\n if (d.candidate == \"Trump\") {\n return trumpColor;\n }\n if (d.candidate == \"Pence\") {\n return penceColor;\n }\n if (d.candidate == \"Harris\") {\n return harrisColor;\n } else {\n return \"white\";\n }\n })\n .attr(\"fill-opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"md`# Data wrangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"data = events.map(f => {\n const d = Object.assign({}, f);\n var centroid = projection([d.Longitude, d.Latitude]);\n d.x = centroid[0];\n d.y = centroid[1];\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"demData = demEvents.map(f => {\n const d = Object.assign({}, f);\n var centroid = projection([d.Longitude, d.Latitude]);\n d.x = centroid[0];\n d.y = centroid[1];\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"usOuter = topojson.mesh(us, us.objects.states, (a, b) => a === b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"stateAPlabels = FileAttachment(\"stateToAPstyle.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"statesEvents = events.map(d => d.state)","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"statesDemEvents = demEvents.map(d => d.state)","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"statesRepEvents = repEvents.map(d => d.state)","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"uniqueRepStates = unique(statesRepEvents)","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"uniqueDemStates = unique(statesDemEvents)","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"uniqueSates = unique(statesEvents)","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"function unique(x) {\n return x\n .reverse()\n .filter(function(e, i, x) {\n return x.indexOf(e, i + 1) === -1;\n })\n .reverse();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"demEvents = events.filter(d => d.party == \"D\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"repEvents = events.filter(d => d.party == \"R\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"us = FileAttachment(\"10m-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"events = {\n const txt = await FileAttachment(\"events-data-1102.csv\").text();\n const json = d3.csvParse(txt);\n json.forEach(d => {\n d.Latitude = +d.Latitude;\n d.Longitude = +d.Longitude;\n return d;\n });\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`# Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"stylehtml = ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"bidenColor = \"#3863A0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"harrisColor = \"#B9CCE4\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"trumpColor = \"#AC3C30\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"penceColor = \"#F4BFBA\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"import { slider, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}