31:T834,beeswarm = { const svg = d3.select(DOM.svg(width, width * 0.3)), nodes = covid_data.map(d => Object.create(d)); const scale_x = d3.scaleLinear() .domain(d3.extent(covid_data, d => d.cases_per_capita)) .range([width * 0.2, width * 0.8]); const guide = svg.append("g") .attr("transform", `translate(${scale_x(d3.sum(covid_data, d => d.cases_per_capita) / covid_data.length)}, 0)`); guide.append("line") .attr("x1", 0) .attr("x2", 0) .attr("y1", 0) .attr("y2", width * 0.3) .style("stroke", "black") .style("stroke-dasharray", "5 5"); guide.append("text") .attr("x", 10) .attr("y", 5) .style("alignment-baseline", "hanging") .text("More cases per capita →"); guide.append("text") .attr("x", -10) .attr("y", 5) .style("text-anchor", "end") .style("alignment-baseline", "hanging") .text("← Fewer cases per capita") const sim = d3.forceSimulation(nodes); nodes.forEach((d, i) => { d.x = scale_x(d.cases_per_capita); d.y = (d.state_abbr.charCodeAt(0) - 65) / 26 * width * 0.3; }); sim .force("center", d3.forceCenter(width / 2, width * 0.15)) .force("x", d3.forceX(d => scale_x(d.cases_per_capita))) .force("y", d3.forceY(width * 0.15).strength(0.1)) .force("collide", d3.forceCollide().radius(d => 16)) .stop() .tick(500); const node = svg.selectAll(".node") .data(nodes).enter() .append("g") .classed("node", true) .attr("transform", d => `translate(${d.x}, ${d.y})`); node.append("circle") .attr("r", 15) .style("fill", d => show_circles ? (d.party_2020 === "REPUBLICAN" ? "#ff6e6c" : "#77bdee") : "rgba(255, 255, 255, 0.8)"); node.append("text") .style("font-family", "monospace") .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("fill", d => show_circles ? "black" : (d.party_2020 === "REPUBLICAN" ? "#ff6e6c" : "#77bdee")) .text(d => d.state_abbr); sim.on("tick", () => { node.attr("transform", d => `translate(${d.x}, ${d.y})`); }); return svg.node() }32:T7f9,beeswarm2 = { const svg = d3.select(DOM.svg(width, width * 0.3)), nodes = covid_data.map(d => Object.create(d)); const scale_x = d3.scaleLinear() .domain(d3.extent(covid_data, d => d.deaths_per_capita)) .range([width * 0.2, width * 0.8]); const guide = svg.append("g") .attr("transform", `translate(${scale_x(d3.sum(covid_data, d => d.deaths_per_capita) / covid_data.length)}, 0)`); guide.append("line") .attr("x1", 0) .attr("x2", 0) .attr("y1", 0) .attr("y2", width * 0.3) .style("stroke", "black") .style("stroke-dasharray", "5 5"); guide.append("text") .attr("x", 10) .attr("y", 5) .style("alignment-baseline", "hanging") .text("More deaths per capita →"); guide.append("text") .attr("x", -10) .attr("y", 5) .style("text-anchor", "end") .style("alignment-baseline", "hanging") .text("← Fewer deaths per capita") const sim = d3.forceSimulation(nodes); nodes.forEach((d, i) => { d.x = scale_x(d.deaths_per_capita); d.y = (d.state_abbr.charCodeAt(0) - 65) / 26 * width * 0.3; }); sim .force("x", d3.forceX(d => scale_x(d.deaths_per_capita))) .force("y", d3.forceY(width * 0.15).strength(0.1)) .force("collide", d3.forceCollide().radius(d => 16)) .stop() .tick(500); const node = svg.selectAll(".node") .data(nodes).enter() .append("g") .classed("node", true) .attr("transform", d => `translate(${d.x}, ${d.y})`); node.append("circle") .attr("r", 15) .style("fill", d => show_circles ? (d.party_2020 === "REPUBLICAN" ? "#ff6e6c" : "#77bdee") : "rgba(255, 255, 255, 0.8)"); node.append("text") .style("font-family", "monospace") .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("fill", d => show_circles ? "black" : (d.party_2020 === "REPUBLICAN" ? "#ff6e6c" : "#77bdee")) .text(d => d.state_abbr); sim.on("tick", () => { node.attr("transform", d => `translate(${d.x}, ${d.y})`); }); return svg.node() }33:T4f8,--- ## Data The COVID-19 data (cases and deaths per state) come from [the New York Times](https://github.com/nytimes/covid-19-data) ([actual data file here](https://github.com/nytimes/covid-19-data/blob/master/us-states.csv)). To get the case and death counts to "per capita," I utilized the population totals reported as part of the 2020 Census, which can be found [here](https://www.census.gov/library/visualizations/interactive/2020-population-and-housing-state-data.html). The 2020 Presidential Election data comes from [the MIT Election Data + Science Lab](https://electionlab.mit.edu/data) (you can find the specific data set [here](https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/42MVDX)). The Washington Post does not share the data behind the charts in the article nor does it cite to where their case/death counts come from, so it is difficult to verify and match their data and charts exactly. The data sources I used produce different results for September 9 (the date of the data for their charts), but without knowing their sources/methods, it's impossible to know why we differ. Regardless, I felt it was important to have a live version of this chart, which required using sources like the New York Times' COVID data collection.34:[{"id":"5c18bed9ad812d14471a7da0f274c1ca5d71580aa748fcd4cf8746be143117d2222e26064fffa45801024625671e62070cb83dfe99311a26090c8e4c51fe1d33","href":"https://static.observableusercontent.com/files/5c18bed9ad812d14471a7da0f274c1ca5d71580aa748fcd4cf8746be143117d2222e26064fffa45801024625671e62070cb83dfe99311a26090c8e4c51fe1d33","name":"census_state_pop_20200401@1.csv","type":"text/csv","lastModified":1639849238987.236,"size":1491},{"id":"83385de35d3c6a37e0cefed8b904114ec4987e14191d0ab85265f0dfb07135ba1c381ba55a101198012f95d8437ede2acc80ea5e3802052036f6f17fe4e600c1","href":"https://static.observableusercontent.com/files/83385de35d3c6a37e0cefed8b904114ec4987e14191d0ab85265f0dfb07135ba1c381ba55a101198012f95d8437ede2acc80ea5e3802052036f6f17fe4e600c1","name":"presidential_results_by_state_2020.csv","type":"text/csv","lastModified":1639853979302.465,"size":1919}] 2f:{"title":"The inescapable overlap of pandemic and politics","cells":[{"id":287,"value":"# The inescapable overlap of pandemic and politics\n\nA live recreation of some plots from [this article](https://www.washingtonpost.com/politics/2021/09/10/inescapable-overlap-pandemic-politics/) from The Washington Post.\n\nWaPo's original article includes a snapshot of COVID-19 data as of September 9, 2021 so I wanted to create a version with more recent data (and an ability to see change over time). The COVID data comes from [the New York Times](https://github.com/nytimes/covid-19-data).\n\nThe below charts can show data from ${d3.timeFormat(\"%B %d, %Y\")(date_scale(0))} through ${d3.timeFormat(\"%B %d, %Y\")(date_scale(n_days))}.\n\n---\n\n## Where we are, as of ${d3.timeFormat(\"%B %d, %Y\")(date_scale(date_ix))}","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"viewof date_ix = Scrubber(d3.range(n_days + 1), {\n format: d => `Date: ${date_format(date_scale(d))}`,\n delay: 50,\n step: 1,\n initial: n_days,\n autoplay: false,\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"

States that voted for Trump in 2020
States that voted for Biden in 2020

\n","pinned":false,"hidden":false,"mode":"html"},{"id":397,"value":"**Cases per capita**, relative to the national average","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"**Deaths per capita**, relative to the national average","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"viewof show_circles = checkbox({\n options: [{ label: \"Show with circles\", value: \"show\" }],\n value: null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"covid_data_raw = d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\",\n (d) => ({ date: d.date, state: d.state, fips: +d.fips, \n cases: +d.cases, deaths: +d.deaths }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"pop_data_raw = FileAttachment(\"census_state_pop_20200401@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"pop_data = pop_data_raw.map(d => ({ state: d.state, state_abbr: d.state_abbr, \n fips: +d.fips, pop: +d.population_2020.replaceAll(\",\", \"\") }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"elec_data_raw = FileAttachment(\"presidential_results_by_state_2020.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"covid_data = covid_data_raw.filter(d => d.date === date_format(date_scale(date_ix)))\n .filter(d => d.fips >= 1 & d.fips <= 56) // remove any non-states or DC\n .map(d => {\n const pop_elem = pop_data.find(e => e.fips === d.fips);\n const elec_elem = elec_data_raw.find(e => +e.state_fips === d.fips);\n return Object.assign(d, { state_abbr: pop_elem.state_abbr,\n pop: pop_elem.pop,\n cases_per_capita: d.cases / pop_elem.pop,\n deaths_per_capita: d.deaths / pop_elem.pop,\n party_2020: elec_elem.winning_party\n });\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"--- \n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"date_extent = d3.extent(covid_data_raw, d => d3.timeParse(\"%Y-%m-%d\")(d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"n_days = Math.ceil((date_extent[1] - date_extent[0]) / (1000 * 60 * 60 * 24))","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"date_scale = d3.scaleLinear().domain([0, n_days]).range(date_extent)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"date_format = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"import {Scrubber} from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}