31:Tcb5,map = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("class", "map"); const legend = svg .append("g") .attr("class", "legend") .attr("fill", "#777") .attr("transform", `translate(${[w - 270, 90]})`); legend .append("text") .attr("class", "legend-title") .text("No. confirmed cases") .attr("dx", 5) .attr("dy", -(radius(legendRadii[legendRadii.length - 1]) * 2 + 10)); const legendBubbles = legend .selectAll("g") .data(legendRadii) .join("g"); let margin = 0; legendBubbles .attr("transform", (d, i) => { margin += i === 0 ? 0 : radius(legendBubbles.data()[i - 1]) * 2 + 18; return `translate(${margin + radius(d)}, 0)`; }) .append("circle") .attr("class", "legend-bubble") .attr("fill", d => colorScale(d)) .attr("cy", d => -radius(d)) .attr("r", radius); legendBubbles .append("text") .attr("dy", "1.3em") .text(numFormat); svg .append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#f4f4f4") .attr("stroke", "#999") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("d", path); svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("d", path); const bubble = svg .selectAll(".bubble") .data( data[data.length - 1].sort((a, b) => +b.cases - +a.cases), d => d.fips || d.county ) .enter() .append("circle") .attr("transform", d => "translate(" + path.centroid(getLocation(d)) + ")") .attr("class", "bubble") .attr("fill-opacity", 0.5) .attr("fill", d => colorScale(0)) .attr("r", d => radius(0)); bubble.append("title"); svg .selectAll("place") .data(places) .enter() .append("circle") .attr("class", "place") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + albersProjection([+d.LONGITUDE, +d.LATITUDE]) + ")"; }); svg .selectAll(".place-label") .data(places) .enter() .append("text") .attr("class", "place-label") .attr("transform", function(d) { return "translate(" + albersProjection([+d.LONGITUDE, +d.LATITUDE]) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.NAME; }) .attr("x", 6) .style("text-anchor", "start"); const wrapper = html`

`; wrapper.append(svg.node()); return Object.assign(wrapper, { update(i) { const t = svg .transition() .duration(i === 0 ? 0 : delay) .ease(d3.easeLinear); bubble .data(data[i], d => d.fips || d.county) .call(b => { b.transition(t) .attr("fill", d => colorScale(+d.cases)) .attr("r", d => radius(+d.cases)) .select("title") .text(d => `${placeName(d)}: ${numFormat(+d.cases)} cases`); }) .exit() .call(b => { b.transition() .attr("fill", d => colorScale(0)) .attr("r", d => radius(0)); }); } }); }32:T41b,{ const c = `rgb(255, 255, 255, 0.5)`; return html``; }33:[{"id":"6e98da4e948218eeb9c43a5175a25c5ebf732d0d957d4676ef634a78cb7c81b6dbeb935ca46d1a6fd1ce472cbd73dff8082a9279a6f53076df64a976a0764550","href":"https://static.observableusercontent.com/files/6e98da4e948218eeb9c43a5175a25c5ebf732d0d957d4676ef634a78cb7c81b6dbeb935ca46d1a6fd1ce472cbd73dff8082a9279a6f53076df64a976a0764550","name":"us-places.csv","type":"text/csv","lastModified":1585347126016.853,"size":21972},{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1585318764771.403,"size":795407}] 2f:{"title":"United States Coronavirus Daily Cases Map (COVID-19)","cells":[{"id":0,"value":"md`# United States Coronavirus Daily Cases Map (COVID-19)\n\nIn late January, a team of journalists at The New York Times began [tracking each confirmed case](https://www.nytimes.com/interactive/2020/us/coronavirus-us-cases.html) of the new coronavirus in the United States. Working with freelance reporters and teams of journalism students, they continue to work around the clock to gather the most detailed county-level data available. In a better timeline, this data would be centrally gathered and reported by the CDC — but alas, we live in the country we have. As of publication (March 27), the United States has more confirmed cases than any other nation.\n\n*Source: [The New York Times](https://www.nytimes.com/article/coronavirus-county-data-us.html) *`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof day = Scrubber(dates.slice(0, data.length), {\n delay,\n loop: false,\n format: d => d.toLocaleDateString()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`

\n\n## Appendix\n\n*The implementation of this notebook lies below. It is not yet organized or commented.*\n\n---\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"legendRadii = [10, 1000, 10000, 50000]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1139,"value":"function placeName(d) {\n if (d.county === \"New York City\") return \"New York City\";\n const loc = getLocation(d);\n return `${loc.properties.name} ${\n d.state === \"Louisiana\" ? \"Parish\" : \"County\"\n }`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":942,"value":"function getLocation(d) {\n let location = countyMap.get(d.fips);\n if (!location && d.county === \"New York City\")\n location = countyMap.get(\"36061\");\n if (!location) location = stateMap.get(d.state);\n if (!location) console.warn(\"No location found for: \" + JSON.stringify(d));\n return location;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"map.update(index)","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"w = 975","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"h = 610","pinned":true,"hidden":false,"mode":"ojs"},{"id":1061,"value":"albersProjection = {\n // XXX super hacky\n const proj = d3.geoAlbersUsa().scale(1300);\n return function(coords) {\n const [x, y] = proj(coords);\n return [x + 6, y + 54];\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"magnitude = toMagnitude(maxCases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":865,"value":"countyMap = new Map(\n topojson.feature(us, us.objects.counties).features.map(d => [d.id, d])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":945,"value":"stateMap = new Map(\n topojson\n .feature(us, us.objects.states)\n .features.map(d => [d.properties.name, d])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"function toMagnitude(n) {\n var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);\n return Math.pow(10, order);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"mutable index = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"{\n mutable index = dates.indexOf(day);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"radius = d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([0, maxRadius])","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"colorScale = d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"delay = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"maxCases = d3.max(recentData.map(d => +d.cases))","pinned":true,"hidden":false,"mode":"ojs"},{"id":953,"value":"excludeTerritories = new Set([\"Guam\", \"Puerto Rico\", \"Virgin Islands\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":876,"value":"data = d3\n .nest()\n .key(d => d.date)\n .entries(rawData.filter(d => !excludeTerritories.has(d.state)))\n .map(d => d.values)\n .filter(d => d[0].date >= startDate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":817,"value":"rawData = d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"maxRadius = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"recentData = data[data.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"startDate = \"2020-03-01\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"dates = data.map(d => d[0].date).map(d => new Date(`${d}T20:00Z`))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1057,"value":"places = d3.csvParse(await FileAttachment(\"us-places.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"sFormat = d3.format(\".1s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"numFormat = d3.format(\"~s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}