2b:null 2c:["$","title",null,{"children":"COVID-19 in Washington state | Jake Low | Observable"}] 31:T856,chart = { let node = this; if (node === undefined) { node = DOM.svg(); d3.select(node) .append("rect") .attr("class", "background") .attr("width", "100%") .attr("height", "100%") .attr("fill", "white") .on("touchstart mouseover", () => { mutable selectedCounty = "Total"; mutable selectedDate = d3.max(data, d => d.Date); }); d3.select(node) .append("g") .attr("id", "plot") .append("g") .attr("id", "annotations"); d3.select(node) .append("svg") .attr("id", "map"); mutable mounted = false; } const root = d3.select(node); let titleString = "Counties with at least one case (pink) or death (red) on "; if (mapShows == "cases-per-capita") { titleString = "Cases per capita on "; } else if (mapShows == "deaths-per-capita") { titleString = "Deaths per capita on "; } titleString += formatDateShort(selectedDate); root .selectAll("text.title") .data([null]) .join("text") .attr("class", "title") .attr("x", 270) .attr("y", margin.top + 15) .attr("font-size", "0.85em") .attr("text-anchor", "middle") .text(titleString); root .attr("width", width) .attr("height", width / aspectRatio) .attr("viewBox", `0 0 ${viewbox.width} ${viewbox.height}`) .attr("preserveAspectRatio", "none"); root.on("mouseleave", () => { // HACK put this here because sometimes the event listener on the county // element itself doesn't fire? mutable selectedCounty = "Total"; }); plot(root.select("#plot")); map( root .select("#map") .attr("x", margin.left - 20) .attr("y", margin.top + 30) .attr("width", viewbox.width * 0.425) .attr("height", viewbox.height - 250) // .attr("viewBox", `0 0 ${viewbox.width * 0.5} ${viewbox.height - 250}`) // .attr("preserveAspectRatio", "xMidYMid") .attr("font-size", d3.min([18, (18 * viewbox.height) / 600])) ); if (mounted) { annotate(root.select("#annotations").raise()); } else { mutable mounted = true; } return node; }32:T19d1,chart2 = { const height = viewbox.height / 2; let node = this; if (node === undefined) { node = DOM.svg(); } const svg = d3.select(node); svg .attr("width", "100%") .attr("viewBox", `0 0 ${viewbox.width} ${height}`) .attr("preserveAspectRatio", "none"); const allDaysInRange = d3.timeDay.range(...d3.extent(testsData, d => d.Date)); const testsByDay = Array.from( d3.group([...testsData, ...allDaysInRange.map(dt => ({ Date: dt }))], d => d.Date.getTime() ), ([k, v]) => v ) .map(day => [ day[0].Date, day.length > 1 ? d3.rollup(day, v => d3.sum(v, d => d.Count), d => d.Result) : new Map() ]) .map( ([day, data]) => ( data.set("Total", d3.sum([...data.values()])), [day, data] ) ); // const rollup = d3.rollup(day, v => d3.sum(v, d => d.Count), d => d.Result); // const obj = { Date: day[0].Date }; // [...rollup.entries()].reduce( // (obj, [key, value]) => ((obj[key] = value), obj), // obj // ); // return obj; // }); testsByDay.sort((a, b) => a[0].getTime() - b[0].getTime()); // return testsByDay; const testsPerDay = testsByDay .map(([day, data], i) => { if (i > 1) { const [prevDay, prevData] = testsByDay[i - 1]; const Positive = (data.get("Positive") || NaN) - (prevData.get("Positive") || NaN); const Negative = (data.get("Negative") || NaN) - (prevData.get("Negative") || NaN); const Pending = (data.get("Pending") || NaN) - (prevData.get("Pending") || NaN); const Total = (data.get("Total") || NaN) - (prevData.get("Total") || NaN); return { Date: day, Positive, Negative, Pending, Total }; } else { return { Date: day, Positive: NaN, Negative: NaN, Pending: NaN, Total: NaN }; } }) .filter(d => d.Date >= new Date("2020-03-01")); // FIXME if better data becomes available later. // return testsPerDay; const y = d3 .scaleLinear() .domain([0, d3.max(testsPerDay, d => d.Total)]) .nice() .range([height - margin.bottom, margin.top]); const yAxis = g => g .attr("transform", `translate(${viewbox.width - margin.right},0)`) .call(d3.axisRight(y).ticks(5)) .call(g => g .style("font-size", "small") .select(".domain") .remove() ); const extent = d3.extent(data, d => d.Date); const difference = (extent[1] - extent[0]) / 86000 / 1000; const distance = x(extent[1]) - x(extent[0]); const interval = distance / difference; const bandwidth = interval - 6; svg .selectAll("text.title") .data([null]) .join("text") .attr("class", "title") .attr("x", 60) .attr("y", 40) .attr("font-size", "1.125em") .text("Tests per day"); svg .selectAll("text.subtitle") .data([null]) .join("text") .attr("class", "subtitle") .attr("x", 45) .attr("y", 65) .attr("font-size", "0.85em") .text("grey: total tests; pink: positive tests"); svg .selectAll("text.no-data") .data([null]) .join("text") .attr("class", "subtitle") .attr("x", x(new Date("2020-03-07T12:00-07:00"))) .attr("y", y(0) - 10) .attr("font-size", "0.85em") .attr("text-anchor", "end") .text("poor/no data available prior to March 08"); svg .selectAll("text.no-data") .data([null]) .join("text") .attr("class", "subtitle") .attr("x", x(new Date("2020-03-22T12:00-07:00"))) .attr("y", y(0) - 100) .attr("font-size", "0.85em") .attr("text-anchor", "end") .text("incomplete data after March 22"); svg .selectAll("rect.total-tests") .data(testsPerDay) .join(enter => enter .append("rect") .attr("class", "total-tests") .attr("x", d => x(d.Date)) .attr("y", d => y(d.Total)) .attr("height", d => y(0) - y(d.Total)) .attr("width", bandwidth) .attr("transform", `translate(-${bandwidth / 2},0)`) ) .attr("fill", d => d.Date.getTime() === selectedDate.getTime() ? "#888" : "#ccc" ); svg .selectAll("rect.positive-tests") .data(testsPerDay) .join(enter => enter .append("rect") .attr("class", "positive-tests") .attr("x", d => x(d.Date)) .attr("y", d => y(d.Positive)) .attr("height", d => y(0) - y(d.Positive)) .attr("width", bandwidth) .attr("transform", `translate(-${bandwidth / 2},0)`) ) .attr("fill", d => d.Date.getTime() === selectedDate.getTime() ? colors.cases : colors.casesFaded ); svg .selectAll("text.total-tests-label") .data(testsPerDay) .join(enter => enter .append("text") .attr("class", "total-tests-label") .attr("x", d => x(d.Date)) .attr("y", d => y(d.Total)) .attr("dy", -4) .attr("text-anchor", "middle") .attr("font-size", "small") .text(d => formatNumber(d.Total)) ) .attr("visibility", d => d.Total && d.Total !== d.Negative && d.Date.getTime() === selectedDate.getTime() ? "visible" : "hidden" ); svg .selectAll("text.positive-tests-label") .data(testsPerDay) .join(enter => enter .append("text") .attr("class", "positive-tests-label") .attr("x", d => x(d.Date)) .attr("y", d => y(d.Positive)) .attr("dy", -4) .attr("text-anchor", "middle") .attr("font-size", "small") .attr("fill", "black") .text(d => formatNumber(d.Positive)) ) .attr("visibility", d => d.Date.getTime() === selectedDate.getTime() ? "visible" : "hidden" ); svg .selectAll("g.x-axis") .data([null]) .join("g") .attr("class", "x-axis") .call(xAxis) .attr("transform", `translate(0,${height - margin.bottom})`); svg .selectAll("g.y-axis") .data([null]) .join("g") .attr("class", "y-axis") .attr("transform", `translate(0,${viewbox.height - margin.bottom})`) .call(yAxis); svg.on("touchmove mousemove", function() { const datum = bisect(d3.mouse(this)[0]); const date = datum ? datum.date : d3.max(data, d => d.Date); if (mutable selectedDate.getTime() !== date.getTime()) { mutable selectedDate = date; } }); svg.on("mouseleave", () => { mutable selectedDate = d3.max(data, d => d.Date); }); return svg.node(); }33:T1696,map = function(root) { const width = root.attr("width"); const height = root.attr("height"); const projection = d3 .geoConicEqualArea() .parallels([34, 40.5]) .rotate([120, 0]) .fitSize([width, height], topojson.feature(wa, wa.objects.counties)); const path = d3.geoPath(projection); const STROKE_WEIGHT = 0.75; function joinDataToFeature(feat) { const row = data .filter( row => row.County === feat.properties.NAME && row.Date <= selectedDate ) .slice(-1)[0]; feat.properties.Cases = row ? row.Cases : 0; feat.properties.Deaths = row ? row.Deaths : 0; feat.properties.Population = populations.find( p => p.County === feat.properties.NAME ).Population; return feat; } const mapCountiesData = topojson .feature(wa, wa.objects.counties) .features.map(joinDataToFeature); const color = d3 .scaleLinear() .domain([0, mapShows === "cases-per-capita" ? 0.001 : 0.0001]) .interpolate(() => d3.interpolateOranges); function fillColor(d) { if (mapShows === "default") { if (d.properties.Deaths > 0) { return colors.deaths; } else if (d.properties.Cases > 0) { return colors.cases; } else { return colors.grey2; } } else if (mapShows === "cases-per-capita") { const perCapita = d.properties.Cases / d.properties.Population; return color(perCapita); } else if (mapShows === "deaths-per-capita") { const perCapita = d.properties.Deaths / d.properties.Population; return color(perCapita); } else { return "black"; } } const counties = root .selectAll("g.counties") .data([mapCountiesData]) .join("g") .attr("class", "counties") // .on("mouseleave", () => { // console.log(d3.event); // mutable selectedCounty = "Total"; // }) .selectAll("path") .data(d => d) .join("path") .attr("fill", fillColor) .attr("stroke", "none") .attr("stroke-width", STROKE_WEIGHT) .on("mouseover touchend", function(d) { // console.log("mouseover", d.properties.NAME); // mutable selectedDate = d3.max(data, d => d.Date); // reset for touch users mutable selectedCounty = d.properties.NAME; }) .on("mousedown", function(d) { // helper for placing county labels; check the console const name = d.properties.NAME; const point = projection.invert(d3.mouse(this)); console.log( `{ name: "${name}", position: [${point[0].toFixed( 3 )}, ${point[1].toFixed(3)}] }` ); }) .attr("d", path); counties.selectAll("title").remove(); if (mapShows !== "default") { counties.append("title").text(d => { const type = mapShows === "cases-per-capita" ? "case" : "death"; const count = type == "case" ? d.properties.Cases : d.properties.Deaths; const perCapita = count / d.properties.Population; const per100k = (perCapita * 100000).toFixed(type === "case" ? 0 : 1); return `${per100k === "0.0" ? "0" : per100k} ${type}${ per100k === "1" ? "" : "s" } per 100k`; }); } // add titles for tooltips to unlabeled counties if (mapShows === "default") { counties .filter(d => d.properties.Cases == 0) .append("title") .text(d => d.properties.NAME); // ...and remove it from labeled counties counties .filter(d => d.properties.Cases != 0) .selectAll("title") .remove(); } // draw intra-county borders root .selectAll("path.county-borders") .data([topojson.mesh(wa, wa.objects.counties, (a, b) => a !== b)]) .join("path") .attr("class", "county-borders") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", STROKE_WEIGHT) .attr("stroke-linejoin", "round") .attr("d", path); // draw state outline root .selectAll("path.state-outline") .data([topojson.mesh(wa, wa.objects.counties, (a, b) => a === b)]) .join("path") .attr("class", "state-outline") .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-width", STROKE_WEIGHT) .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", path); // draw county highlights (invisible by default) root .selectAll("g.county-highlights") .data([null]) .join("g") .attr("class", "county-highlights") .selectAll("path") .data(topojson.feature(wa, wa.objects.counties).features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.NAME === selectedCounty ? colors.highlight : "none" ) .attr("stroke-width", STROKE_WEIGHT * 3) .attr("stroke-linejoin", "round") .attr("d", path); const labels = mapShows === "default" ? visibleCountyLabels : countyLabels; // draw county labels root .selectAll("g.county-labels") .data([null]) .join("g") .attr("class", "county-labels") .selectAll("text.county-label") .data( labels.map(d => { const [x, y] = projection(d.position); return { ...d, x, y }; }) ) .join("text") .attr("class", "county-label") .attr( "transform", d => `translate(${d.x},${d.y}) rotate(${d.rotation || 0})` ) .selectAll("tspan") .data(d => d.spans ? d.spans.map(span => ({ ...span, x: d.x, y: d.y })) : [{ text: d.name }] ) .join("tspan") .attr("x", 0) .attr("y", 0) .attr("dx", d => d.dx) .attr("dy", d => d.dy) .text(d => d.text); // svg // .append("path") // .datum(topojson.mesh(wa, wa.objects.lakes)) // .attr("fill", "white") // .attr("stroke", "black") // .attr("stroke-linejoin", "round") // .attr("d", path); }34:T1a8b,plot = function(root) { root.style("touch-action", "pan-y"); // FIXME good idea or bad? // create the active area for the timeline scrubber // change the fill to e.g. 'papayawhip' to see it root .selectAll("path.brush-area") .data([null]) .join("path") .attr("class", "brush-area") .attr("fill", "white") .attr( "d", ` M${viewbox.width},${viewbox.height} L${viewbox.width},0 L${viewbox.width * 0.8},0 L${viewbox.width * 0.45},${viewbox.height * 0.45} L0,${viewbox.height * 0.6} L0,${viewbox.height} Z ` ) .on("mouseenter", () => { mutable selectedCounty = "Total"; }); root.on("touchmove mousemove", function() { const datum = bisect(d3.mouse(this)[0]); const date = datum ? datum.date : d3.max(data, d => d.Date); if (mutable selectedDate.getTime() !== date.getTime()) { mutable selectedDate = date; } }); root.on("mouseleave", () => { mutable selectedDate = d3.max(data, d => d.Date); }); root .selectAll("g.x-axis") .data([null]) .join("g") .attr("class", "x-axis") .call(xAxis); root .selectAll("g.y-axis") .data([null]) .join("g") .attr("class", "y-axis") .attr("transform", `translate(0,${viewbox.height - margin.bottom})`) .call(yAxis); // draw the "shadow" of total cases and deaths (to compare against) root .selectAll("path.cases-shadow") .data([totalCases]) .join("path") .attr("class", "cases-shadow") .attr("fill", colors.grey1) .attr("d", area); root .selectAll("path.deaths-shadow") .data([totalDeaths]) .join("path") .attr("class", "deaths-shadow") .attr("fill", colors.grey2) .attr("d", area); // draw all cases for selected county in lighter colors root .selectAll("path.cases-after-selected-date") .data([casesInSelectedCounty]) .join("path") .attr("class", "cases-after-selected-date") .attr("fill", colors.casesFaded) .attr("d", area); root .selectAll("path.deaths-after-selected-date") .data([deathsInSelectedCounty]) .join("path") .attr("class", "deaths-after-selected-date") .attr("fill", colors.deathsFaded) .attr("d", area); // then draw data for before the currently selected date on top, in darker colors root .selectAll("path.cases-before-selected-date") .data([casesBeforeSelectedDate]) .join("path") .attr("class", "cases-before-selected-date") .attr("fill", colors.cases) .attr("d", area); root .selectAll("path.deaths-before-selected-date") .data([deathsBeforeSelectedDate]) .join("path") .attr("class", "deaths-before-selected-date") .attr("fill", colors.deaths) .attr("d", area); // draw value labels at each vertex on the line root .selectAll("text.inline-label.cases") .data(casesInSelectedCounty) .join("text") .attr("class", "inline-label cases") .attr("visibility", "hidden") .attr( "dx", d => `${d.value !== null ? d.value.toString().length * -0.25 : 0}em` ) .attr("dy", "-0.5em") .attr("x", d => x(d.date)) .attr("y", d => d3.min([y(0) - 15, y(d.value)])) // prevent visual overlap with deaths numbers .text(d => (d.value !== null ? d.value : "?")) .filter(d => d.date <= selectedDate) // .attr("visibility", "visible") .call(text => text .filter((d, i, data) => i === data.length - 1) .attr("visibility", "visible") .append("tspan") .attr("font-weight", "bold") .text(d => " " + (d.value === 1 ? "case" : "cases")) ); root .selectAll("text.inline-label.deaths") .data(deathsInSelectedCounty) .join("text") .attr("class", "inline-label deaths") .attr("visibility", "hidden") .attr( "dx", d => `${d.value !== null ? d.value.toString().length * -0.25 : 0}em` ) .attr("dy", "-0.5em") .attr("x", d => x(d.date)) .attr("y", d => y(d.value)) .text(d => (d.value !== null ? d.value : "?")) .filter(d => d.date <= selectedDate) // .attr("visibility", "visible") .call(text => text .filter((d, i, data) => i === data.length - 1) .attr("visibility", "visible") .append("tspan") .attr("font-weight", "bold") .text(d => " " + (d.value === 1 ? "death" : "deaths")) ); // root // .selectAll("text.inline-label.cases") // .data( // casesInSelectedCounty, // (d, i) => `inline-label-cases-${selectedCounty}-${i}-${d.value}` // ) // .join( // enter => // enter // .append("text") // .attr("class", "inline-label cases") // .attr("visibility", "hidden") // .attr("dx", d => `${d.value.toString().length * -0.25}em`) // .attr("dy", "-0.5em") // .attr("x", d => x(d.date)) // .attr("y", d => d3.min([y(0) - 15, y(d.value)])) // prevent visual overlap with deaths numbers // .text(d => d.value) // .append("tspan") // .attr("class", "unit") // .attr("visibility", "hidden") // .attr("font-weight", "bold") // .text(d => " " + (d.value === 1 ? "case" : "cases")), // update => // update // .attr("visibility", d => // d.date <= selectedDate ? "visible" : "hidden" // ) // .selectAll("tspan.unit") // .attr("visibility", d => // d.date.getTime() === selectedDate.getTime() ? "visible" : "hidden" // ), // exit => exit.remove() // ); // root // .selectAll("text.inline-label.deaths") // .data( // deathsInSelectedCounty // //(d, i) => `inline-label-deaths-${selectedCounty}-${i}-${d.value}` // ) // .join( // enter => // enter // .append("text") // .attr("class", "inline-label deaths") // .attr("dx", d => `${d.value.toString().length * -0.25}em`) // .attr("dy", "-0.5em") // .attr("x", d => x(d.date)) // .attr("y", d => y(d.value)) // .text(d => d.value) // .append("tspan") // .attr("class", "unit") // .attr("font-weight", "bold") // .text(d => " " + (d.value === 1 ? "death" : "deaths")), // update => update, // exit => exit.remove() // ) // .attr("visibility", d => (d.date <= selectedDate ? "visible" : "hidden")) // .selectAll("tspan.unit") // .attr("visibility", d => // d.date.getTime() === selectedDate.getTime() ? "visible" : "hidden" // ); }35:T5c5,annotate = function(root) { const makeAnnotations = d3 .annotation() .type(d3.annotationLabel) .accessors({ x: d => x(d.date), y: d => d3.min([y(0) - 35, y(d.value) - 25]) // offset from graph area }) .accessorsInverse({ date: d => x.invert(d.x), value: d => y.invert(d.y) }) .annotations(annotations); root.call(makeAnnotations); // add ids and classes so we can find individual notes for styling root .selectAll("g.annotation") .attr("id", d => d.id) .attr( "class", d => "annotation date-" + (d && d.data && d.data.date ? quantizeDate(d.data.date) .toDateString() .replace(/\s/g, "-") : "undated") ); // add hyperlinks to annotation note text root .selectAll("g.annotation-note > g.annotation-note-content") .each(function(d) { if (d && d.note && d.note.href) { const parent = this.parentNode; const anchor = d3 .create("svg:a") .attr("href", d.note.href) .attr("target", "_blank") .text(this.innerHTML); parent.removeChild(this); anchor.insert(() => this); parent.appendChild(anchor.node()); } }); root.selectAll("g.annotation-note").on("mousemove", function(d) { if (d && d.data && d.data.date) { mutable selectedDate = quantizeDate(d.data.date); } d3.event.stopPropagation(); }); }36:T10d9,annotations = [ { id: "note-first-us-case", note: { title: "First U.S. case", label: "Jan 21 in Snohomish County", href: "https://www.cdc.gov/media/releases/2020/p0121-novel-coronavirus-travel-case.html", wrap: 165 }, x: x(d3.min(data, d => d.Date)) - 30, y: 0.875 * y(0), dx: 60, type: d3.annotationCustomType(d3.annotationLabel, { className: "annotation-label-with-arrow", connector: { type: "line", end: "arrow" }, note: { align: "middle", lineType: "vertical" } }) }, { id: "note-first-us-death", note: { title: "First U.S. death*", label: "in King County", href: "https://www.seattletimes.com/seattle-news/health/one-king-county-patient-has-died-due-to-covid-19-infection/", wrap: 100 }, data: getCasesOnDate(new Date("2020-02-29T10:17")), dy: -50 }, { id: "note-employers-advise-wfh", note: { label: "Major employers begin advising work-from-home", href: "https://www.theverge.com/2020/3/5/21166686/coronavirus-amazon-google-facebook-microsoft-twitter-seattle-staff-remote-work", wrap: 90 }, data: getCasesOnDate(new Date("2020-03-06")), dy: -50 }, // { // id: "note-who-declares-pandemic", // note: { // title: "WHO declares coronavirus a pandemic", // href: "https://twitter.com/WHO/status/1237777021742338049?s=20", // wrap: 80 // }, // data: getCasesOnDate(new Date("2020-03-11T11:39")), // y: y(getCasesOnDate(new Date("2020-03-11T11:39")).value) - 170, // dy: -20 // }, { id: "note-school-closures", note: { title: "Seattle-area schools close", label: "Gov. bans gatherings of >250 people", href: "https://www.seattletimes.com/seattle-news/politics/inslee-orders-halt-on-large-gatherings-in-seattle-region-asks-schools-to-prepare-for-closure-to-slow-coronavirus-spread/", wrap: 80 }, data: getCasesOnDate(new Date("2020-03-11T11:39")), dx: -20, dy: -50, type: d3.annotationCustomType(d3.annotationCalloutCurve, { connector: { type: "curve" }, note: { lineType: "none", align: "middle" } }), connector: { curve: d3.curveBasis, points: [[0, -25], [-20, -25]] } }, { id: "note-restaurants-shut-down", note: { title: "Restaurants, bars shut down", label: "No events with >50 people", href: "https://www.seattletimes.com/seattle-news/king-county-and-washington-state-to-act-on-bars-restaurants-and-gatherings/", wrap: 85 }, data: getCasesOnDate(new Date("2020-03-16T11:59")), dx: -15, dy: -40, type: d3.annotationCustomType(d3.annotationCalloutCurve, { connector: { type: "curve" }, note: { lineType: "none", align: "middle" } }), connector: { curve: d3.curveBasis, points: [[0, -20], [-15, -20]] } }, { id: "note-100-deaths", note: { title: "100 deaths nationwide", label: "half are in WA", href: "https://www.seattletimes.com/nation-world/u-s-coronavirus-death-toll-reaches-100/", wrap: 80 }, data: getCasesOnDate(new Date("2020-03-17T13:40")), dx: 25, dy: -100, type: d3.annotationCustomType(d3.annotationCalloutCurve, { connector: { type: "curve" }, note: { lineType: "none", align: "middle" } }), connector: { curve: d3.curveBasis, points: [[0, -50], [25, -50]] } }, { id: "note-stay-at-home", note: { title: "Gov. issues two week stay-at-home order", label: "except crucial activities", href: "https://www.seattletimes.com/seattle-news/inslee-to-hold-televised-address-monday-evening-to-announce-enhanced-strategies-on-covid-19/", wrap: 100 }, data: getCasesOnDate(new Date("2020-03-23T17:30")), dx: -0, dy: -100 }, { id: "note-stay-at-home", note: { title: "Stay-at-home order extended", label: "until May 4", href: "https://www.seattletimes.com/seattle-news/politics/gov-inslee-extends-washington-states-coronavirus-stay-home-order-through-end-of-may-4/", wrap: 100 }, data: getCasesOnDate(new Date("2020-04-02T17:04")), dx: -0, dy: -30 } ]37:Taee,countyLabels = [ { name: "Adams", position: [-118.505, 46.958], rotation: -0.75 }, { name: "Asotin", position: [-117.205, 46.105], rotation: -0.75 }, { name: "Benton", position: [-119.415, 46.053] }, { name: "Chelan", position: [-120.619, 47.825] }, { name: "Clallam", position: [-123.94, 47.98], rotation: 1.25 }, { name: "Clark", position: [-122.480, 45.722] }, { name: "Columbia", position: [-117.930, 46.284], rotation: -0.25 }, { name: "Cowlitz", position: [-122.704, 46.194], rotation: 0.65 }, { name: "Douglas", position: [-119.769, 47.63], rotation: -0.75 }, { name: "Ferry", position: [-118.490, 48.617], rotation: -0.5 }, { name: "Franklin", position: [-118.900, 46.557], rotation: -0.35 }, { name: "Garfield", position: [-117.523, 46.502], rotation: -1 }, { name: "Grant", position: [-119.504, 47.093] }, { name: "Grays Harbor", position: [-123.886, 47.166], rotation: 0.25, spans: [{ text: "Grays", dx: 0, dy: -7 }, { text: "Harbor", dx: 2, dy: 7 }] }, { name: "Island", position: [-122.900, 48.226], rotation: 0.5 }, { name: "Jefferson", position: [-123.799, 47.678], rotation: 0.5 }, { name: "King", position: [-121.83, 47.479] }, { name: "Kitsap", position: [-122.672, 47.526] }, { name: "Kittitas", position: [-120.651, 47.063] }, { name: "Klickitat", position: [-120.751, 45.835], rotation: 0.3 }, { name: "Lewis", position: [-122.407, 46.520], rotation: 0.5 }, { name: "Lincoln", position: [-118.412, 47.460], rotation: -0.5 }, { name: "Mason", position: [-123.181, 47.260] }, { name: "Okanogan", position: [-119.766, 48.530], rotation: -0.35 }, { name: "Pacific", position: [-123.650, 46.532], rotation: 0.75 }, { name: "Pend Oreille", position: [-117.295, 48.650], rotation: -1, spans: [{ text: "Pend", dx: 0, dy: -7 }, { text: "Oreille", dx: 3, dy: 7 }] }, { name: "Pierce", position: [-122.069, 46.966], rotation: 0.25 }, { name: "San Juan", position: [-123.480, 48.720] }, { name: "Skagit", position: [-121.75, 48.421] }, { name: "Skamania", position: [-121.923, 46.014], rotation: 0.25 }, { name: "Snohomish", position: [-121.705, 48.026] }, { name: "Spokane", position: [-117.425, 47.519], rotation: -1.5 }, { name: "Stevens", position: [-117.845, 48.282], rotation: -1 }, { name: "Thurston", position: [-122.851, 46.850], rotation: 0.5 }, { name: "Wahkiakum", position: [-123.655, 46.050], rotation: 0.75 }, { name: "Walla Walla", position: [-118.640, 46.106], rotation: -0.25, spans: [{ text: "Walla", dx: 0, dy: -7 }, { text: "Walla", dx: 8, dy: 7 }] }, { name: "Whatcom", position: [-121.744, 48.766], rotation: 0.25 }, { name: "Whitman", position: [-117.503, 46.925], rotation: -1.0 }, { name: "Yakima", position: [-120.698, 46.355] } ]38:[{"id":"98c01cdb9fb12ba634d8dffe2760ee9658982b138337f6fc0c95f5a7ab83eeeb725019de109dbb8442a14f800d35efdde3187866d1a1cff310505bf7ae2c3fa4","href":"https://static.observableusercontent.com/files/98c01cdb9fb12ba634d8dffe2760ee9658982b138337f6fc0c95f5a7ab83eeeb725019de109dbb8442a14f800d35efdde3187866d1a1cff310505bf7ae2c3fa4","name":"tests@7.csv","type":"text/csv","lastModified":1585357647592.87,"size":1909},{"id":"30dde6f9f792c2dbb9d810a8d7693c681637a223c50097596e26e49bad66f447210d7cb28de5c6f07a7f9032ddaec3581203a8cc863f9e69f2fdf735ef727d98","href":"https://static.observableusercontent.com/files/30dde6f9f792c2dbb9d810a8d7693c681637a223c50097596e26e49bad66f447210d7cb28de5c6f07a7f9032ddaec3581203a8cc863f9e69f2fdf735ef727d98","name":"counties@10.csv","type":"text/csv","lastModified":1585357661412.434,"size":17735},{"id":"8faf49ea34cfb3b90b89f33fff6912af0b4986c1117fe462a6160f811d4f5014c055abae0a2b0f3c55e35d886d320d9dc78b451d5350d41c4a9e2f1baf7cc582","href":"https://static.observableusercontent.com/files/8faf49ea34cfb3b90b89f33fff6912af0b4986c1117fe462a6160f811d4f5014c055abae0a2b0f3c55e35d886d320d9dc78b451d5350d41c4a9e2f1baf7cc582","name":"tests@13.csv","type":"text/csv","lastModified":1585986102393.401,"size":2284},{"id":"de3dc336073ff3f09fbbef28c99c63c64058369af2ecdee715f617849db1d1c48a9591b1c03a3c167fcf85a2715a1f746204be7ab0cbc14076e087688874a6a9","href":"https://static.observableusercontent.com/files/de3dc336073ff3f09fbbef28c99c63c64058369af2ecdee715f617849db1d1c48a9591b1c03a3c167fcf85a2715a1f746204be7ab0cbc14076e087688874a6a9","name":"counties@17.csv","type":"text/csv","lastModified":1585986190088.495,"size":27820},{"id":"6ca9c7dbc1bc84cc07013eef569aa76510d74acc0f32f508040757a7fd2f942958c2b2ead2df54cf6b357841b7a0f6545b4490baba8b52505bfd483947d65e11","href":"https://static.observableusercontent.com/files/6ca9c7dbc1bc84cc07013eef569aa76510d74acc0f32f508040757a7fd2f942958c2b2ead2df54cf6b357841b7a0f6545b4490baba8b52505bfd483947d65e11","name":"tests@9.csv","type":"text/csv","lastModified":1585471736957.055,"size":1984},{"id":"1697d0ec7f605b10fda49507996e0d15bc341f5bbbc6f0e8a67698fbaff7ae57a03b915514223c10bba434c97e2dc793447ee669a9b89e048ba2a7464fdfd4eb","href":"https://static.observableusercontent.com/files/1697d0ec7f605b10fda49507996e0d15bc341f5bbbc6f0e8a67698fbaff7ae57a03b915514223c10bba434c97e2dc793447ee669a9b89e048ba2a7464fdfd4eb","name":"counties@12.csv","type":"text/csv","lastModified":1585471750963.009,"size":19030},{"id":"acaaa838add7def797d83207ed5c6f41be566b00a6b1a74445337fe9fa8b3c323916f4640715fd2256f16b7396cedd842da79d2b21d3155e7baa04c38f0dc70f","href":"https://static.observableusercontent.com/files/acaaa838add7def797d83207ed5c6f41be566b00a6b1a74445337fe9fa8b3c323916f4640715fd2256f16b7396cedd842da79d2b21d3155e7baa04c38f0dc70f","name":"counties@14.csv","type":"text/csv","lastModified":1585852448711.148,"size":24847},{"id":"d1f095515564769b6dc52a6a1622eacbb9134004980d698b8674795866d98feb7d5428dbf2d2885789c0a933be9553f5081ef0dba0335f7739d74bec008c99f7","href":"https://static.observableusercontent.com/files/d1f095515564769b6dc52a6a1622eacbb9134004980d698b8674795866d98feb7d5428dbf2d2885789c0a933be9553f5081ef0dba0335f7739d74bec008c99f7","name":"tests@10.csv","type":"text/csv","lastModified":1585852466713.144,"size":2134},{"id":"038a547ce5025ee0ca4e030b498f29bacc692cad1e196dc8f9250768b4b80396da2ca1a4e933ad2d70d9e69ecef134e38c1d27f53954bfaa78c0e5fa5f75e652","href":"https://static.observableusercontent.com/files/038a547ce5025ee0ca4e030b498f29bacc692cad1e196dc8f9250768b4b80396da2ca1a4e933ad2d70d9e69ecef134e38c1d27f53954bfaa78c0e5fa5f75e652","name":"populations.csv","type":"text/csv","lastModified":1584754269616.196,"size":878},{"id":"b6e25766fa14fd7ecf338744186b1dd6dee770d8a3028bbcfa4e452e497d31e94bf3f9aa90b29771cf59a51f6c430c6f910cfff7df3901f4af0003344fd8fec1","href":"https://static.observableusercontent.com/files/b6e25766fa14fd7ecf338744186b1dd6dee770d8a3028bbcfa4e452e497d31e94bf3f9aa90b29771cf59a51f6c430c6f910cfff7df3901f4af0003344fd8fec1","name":"wa.topo.json","type":"application/json","lastModified":1584755789519.301,"size":434789},{"id":"2efd55475470166c17e013d543250561bfe59e3393711921f38626064aaf0ea7b89d25f68adfc6ed4d3558127ec29a66a01189bc2e3c58378555180ca2a1e2de","href":"https://static.observableusercontent.com/files/2efd55475470166c17e013d543250561bfe59e3393711921f38626064aaf0ea7b89d25f68adfc6ed4d3558127ec29a66a01189bc2e3c58378555180ca2a1e2de","name":"counties@5.csv","type":"text/csv","lastModified":1584917350760.709,"size":11616},{"id":"fa24281c9aae164f5686a46e19e42116193a82ba35c528303407398935397ab99dddcdd5837af93904cc7cbfab50fa64be9eebd05eaf600adf87fefc75741742","href":"https://static.observableusercontent.com/files/fa24281c9aae164f5686a46e19e42116193a82ba35c528303407398935397ab99dddcdd5837af93904cc7cbfab50fa64be9eebd05eaf600adf87fefc75741742","name":"tests@2.csv","type":"text/csv","lastModified":1584951969983.712,"size":1534},{"id":"bd817dd9a31ab67a1e1be9222cd67994ef0de2de1f2e3587853c210e01f4231d916108e39749f95615e18a656a460fe4c2aa0bd366a5414f7d1af3a912d01197","href":"https://static.observableusercontent.com/files/bd817dd9a31ab67a1e1be9222cd67994ef0de2de1f2e3587853c210e01f4231d916108e39749f95615e18a656a460fe4c2aa0bd366a5414f7d1af3a912d01197","name":"tests@3.csv","type":"text/csv","lastModified":1585001808756.398,"size":1609},{"id":"c2b51ce67ea94e4ec1cc3e183927d9e8713e9eb9f4d5fe3be2dd3fb0e2455abff7015579cf80fd4abd67aabd04c9b093188f56c96cd25f943884c1440caf44ce","href":"https://static.observableusercontent.com/files/c2b51ce67ea94e4ec1cc3e183927d9e8713e9eb9f4d5fe3be2dd3fb0e2455abff7015579cf80fd4abd67aabd04c9b093188f56c96cd25f943884c1440caf44ce","name":"counties@6.csv","type":"text/csv","lastModified":1585001825617.773,"size":12797},{"id":"7421b230556634d125b11a69ca759ddee0609d853d6e6a717a995202d6418a2dc12beb31500b272654475f25dc1e8b7572da81da66c4b523ae537bd7942e337e","href":"https://static.observableusercontent.com/files/7421b230556634d125b11a69ca759ddee0609d853d6e6a717a995202d6418a2dc12beb31500b272654475f25dc1e8b7572da81da66c4b523ae537bd7942e337e","name":"counties@7.csv","type":"text/csv","lastModified":1585110649691.043,"size":13979},{"id":"5b4aee8df765f9a3dde7980f8ddad58e78751d2eeeb567c70372555c7eee6200b457246d0392c82f97f304e59ca184d30a3eada3b1d5099b57228249b64c0139","href":"https://static.observableusercontent.com/files/5b4aee8df765f9a3dde7980f8ddad58e78751d2eeeb567c70372555c7eee6200b457246d0392c82f97f304e59ca184d30a3eada3b1d5099b57228249b64c0139","name":"tests@4.csv","type":"text/csv","lastModified":1585110679032.546,"size":1684},{"id":"51c126c1fb719b18697f23e691c333dc8ba1d600c820bfbe6c780c6dfe2f98dddf5c588ba1119cfe9a67b540118060b6d859469cc4e27c57ae50cc276c4f030a","href":"https://static.observableusercontent.com/files/51c126c1fb719b18697f23e691c333dc8ba1d600c820bfbe6c780c6dfe2f98dddf5c588ba1119cfe9a67b540118060b6d859469cc4e27c57ae50cc276c4f030a","name":"tests@5.csv","type":"text/csv","lastModified":1585210853833.773,"size":1759},{"id":"a146ecf383b1c8c16b3ff770a21efa605623868abb31ae93b732a00e5ca4de8411bb2d8407d5a29badc890117c84e518dd9f673b3c0a41940e8d6f859e9ff5ce","href":"https://static.observableusercontent.com/files/a146ecf383b1c8c16b3ff770a21efa605623868abb31ae93b732a00e5ca4de8411bb2d8407d5a29badc890117c84e518dd9f673b3c0a41940e8d6f859e9ff5ce","name":"counties@8.csv","type":"text/csv","lastModified":1585210868825.806,"size":15192},{"id":"5a9189d90a50cfe07a899fe4d3fae6eecc5ce91c0786e876f258827224a0848e0aab3b6108b93be5b4a00060fda818beb3977144253c313cf02b3bf1afeddff8","href":"https://static.observableusercontent.com/files/5a9189d90a50cfe07a899fe4d3fae6eecc5ce91c0786e876f258827224a0848e0aab3b6108b93be5b4a00060fda818beb3977144253c313cf02b3bf1afeddff8","name":"counties@9.csv","type":"text/csv","lastModified":1585271948192.578,"size":16445},{"id":"2d7313ba067d918c417eee0b8e5ac1b230fbd20bfd04299453d7f1fa930b3bc33a12d09a83eef1f69c6ea6d5714dbd05fb11427cc9c6f79e628925a920158453","href":"https://static.observableusercontent.com/files/2d7313ba067d918c417eee0b8e5ac1b230fbd20bfd04299453d7f1fa930b3bc33a12d09a83eef1f69c6ea6d5714dbd05fb11427cc9c6f79e628925a920158453","name":"tests@6.csv","type":"text/csv","lastModified":1585271971394.416,"size":1834},{"id":"88b4bb07d8ad3308b9038c9a3c4a4a3fdba9214fd4dd674fc625109a04074317b336b060e989bc54003b7c740321025fe792b2580fa3094fcffd3ca2b0d04330","href":"https://static.observableusercontent.com/files/88b4bb07d8ad3308b9038c9a3c4a4a3fdba9214fd4dd674fc625109a04074317b336b060e989bc54003b7c740321025fe792b2580fa3094fcffd3ca2b0d04330","name":"tests@11.csv","type":"text/csv","lastModified":1585874349606.896,"size":2209},{"id":"8ef8a7abf712312420f5891a0f2b24cee82f546d8747316e54475b7a9e59b91675e5effaa805981319185c3559a9533e21233068d4893046b87de226d9e63417","href":"https://static.observableusercontent.com/files/8ef8a7abf712312420f5891a0f2b24cee82f546d8747316e54475b7a9e59b91675e5effaa805981319185c3559a9533e21233068d4893046b87de226d9e63417","name":"counties@15.csv","type":"text/csv","lastModified":1585874358572.741,"size":26333},{"id":"2b571fdc18125887f569b659ae097431e0a892461098326d449cfbd1491404350039995fdc6f915f481f6368d8ada2b02a775be2f713513689453d0ecb68977f","href":"https://static.observableusercontent.com/files/2b571fdc18125887f569b659ae097431e0a892461098326d449cfbd1491404350039995fdc6f915f481f6368d8ada2b02a775be2f713513689453d0ecb68977f","name":"tests@15.csv","type":"text/csv","lastModified":1586506036572.457,"size":2714},{"id":"913d4b14fe18118af7f69819b7200dd912b21252d5cb37b9b8e4b805ed2550cb25952ad962bc9a732ecde2887b9607082b88d05c84bc8d9ac8904c6d8ca3d100","href":"https://static.observableusercontent.com/files/913d4b14fe18118af7f69819b7200dd912b21252d5cb37b9b8e4b805ed2550cb25952ad962bc9a732ecde2887b9607082b88d05c84bc8d9ac8904c6d8ca3d100","name":"counties@19.csv","type":"text/csv","lastModified":1586506055415.746,"size":36801},{"id":"cad5950d01ca679221c052bfbd5a4d5ca0129c53a653eccce67711ff9c941a044ff8ed720d473bb8b2376dddddbad8ef6716c27e108028ad332c10020d78309a","href":"https://static.observableusercontent.com/files/cad5950d01ca679221c052bfbd5a4d5ca0129c53a653eccce67711ff9c941a044ff8ed720d473bb8b2376dddddbad8ef6716c27e108028ad332c10020d78309a","name":"counties@20.csv","type":"text/csv","lastModified":1586664797548.329,"size":39807},{"id":"0b9acd98a393038d3a01a95e787957e36e690d8213c78925996d9ae4b252ebc7ba07aaae29667d6c7b8b72edf40b3c6af87cfebcc49224c14b0ed237d2139d5d","href":"https://static.observableusercontent.com/files/0b9acd98a393038d3a01a95e787957e36e690d8213c78925996d9ae4b252ebc7ba07aaae29667d6c7b8b72edf40b3c6af87cfebcc49224c14b0ed237d2139d5d","name":"tests@16.csv","type":"text/csv","lastModified":1586664811990.669,"size":2855},{"id":"88a1180651265314b8b467e537939c24f381430a5698441b7245493756d383a188a1bb048003aa9aacdcdecec48e664bf4dcfde46877fd8b9c436d2db8d9bb5b","href":"https://static.observableusercontent.com/files/88a1180651265314b8b467e537939c24f381430a5698441b7245493756d383a188a1bb048003aa9aacdcdecec48e664bf4dcfde46877fd8b9c436d2db8d9bb5b","name":"counties@18.csv","type":"text/csv","lastModified":1586393725928.707,"size":35301},{"id":"f4ee1d5cf3637c10b50cb088798bc220e6dca9bf17ce689ee2d21becf12b104a565eb4d7b2f76cfa224d27c5c0ffb21f6e6b81cd0ab1692f78ecb70f7e121958","href":"https://static.observableusercontent.com/files/f4ee1d5cf3637c10b50cb088798bc220e6dca9bf17ce689ee2d21becf12b104a565eb4d7b2f76cfa224d27c5c0ffb21f6e6b81cd0ab1692f78ecb70f7e121958","name":"tests@14.csv","type":"text/csv","lastModified":1586394104611.323,"size":2644}] 2f:{"id":"402cc5ea77797f4f","slug":"covid-19-in-washington-state","title":"COVID-19 in Washington state","thumbnail":"51fcbab5c318322fd1bf496f929974db6455f8c82c6aa02acd0e1a983691a83a","access_level":"public","create_time":"$D2020-03-20T23:26:40.579Z","update_time":"$D2020-07-17T01:41:24.301Z","view_time":null,"first_public_time":"$D2020-03-23T18:27:09.532Z","fork":false,"stars":73,"starred":false,"owner":{"type":"team","id":"cbb2b32473d3e648","login":"jake-low","name":"Jake Low","avatar_url":"https://avatars-next.observableusercontent.com/fcff7503af57e71a7006d2543ad38643918ba16eb09e01f116b42d94a497c0a0","tier":"starter_2024"},"version":3464,"publish_version":3464,"role":null,"authored":false,"authors":[{"type":"individual","id":"e30eca3d7ea0ab2c","login":"jake-low","name":"Jake Low","avatar_url":"https://avatars-next.observableusercontent.com/fcff7503af57e71a7006d2543ad38643918ba16eb09e01f116b42d94a497c0a0","tier":null}],"members":[{"type":"individual","id":"e30eca3d7ea0ab2c","login":"jake-low","name":"Jake Low","avatar_url":"https://avatars-next.observableusercontent.com/fcff7503af57e71a7006d2543ad38643918ba16eb09e01f116b42d94a497c0a0","tier":null,"role":"editor"}],"comments":[{"id":"df760d644a5574a6","reply_to_id":null,"content":"This is an awesome visualization. I really love the annotations and the available interactions, and have been sending this to people as an example of a thoughtful visualization. It looks like maybe you moved on to the national version and this one is not being updated anymore. Would you consider tweaking it so that the annotations are still visible? I think that the x scale just needs to be changed, e.g., \n .domain([new Date(\"2020-02-17T12:00-08:00\"), new Date()])\nbecomes\n .domain([new Date(\"2020-02-17T12:00-08:00\"), d3.max(data, d => d.Date)]). \n\nThanks!","create_time":"$D2020-07-16T12:39:40.958Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9dc9f884d5f95f34","login":"gallowayevan","name":"Evan Galloway","avatar_url":"https://avatars-next.observableusercontent.com/ec81d47e8647af7f76ea8f171c5d7792d26d3e9a0b353b893529f22882a121c4","tier":null}},{"id":"ced5526c329bd3fe","reply_to_id":"df760d644a5574a6","content":"Thank you for the very nice comment. I've just incorporated your suggestion (thanks also for providing the code snippet).\n\nI have indeed stopped updating this chart; I was scraping the data for it from doh.wa.gov using some scripts but in early April they changed their reporting format and transcribing each day's data manually quickly became too painful. I see now that they've gone back to providing scrapable HTML tables in addition to the pretty but machine-unfriendly graphics; and there's also a weekly summary report in XLSX format.\n\nAnyway, I appreciate your nice feedback and bug-fix suggestion a lot; thanks.","create_time":"$D2020-07-17T01:40:35.510Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e30eca3d7ea0ab2c","login":"jake-low","name":"Jake Low","avatar_url":"https://avatars-next.observableusercontent.com/fcff7503af57e71a7006d2543ad38643918ba16eb09e01f116b42d94a497c0a0","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":59,"collection":{"id":"e7cc41ec60819d92","slug":"coronavirus","title":"Coronavirus","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"COVID-19 in Washington state","cells":[{"id":0,"value":"md`# COVID-19 in Washington state`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":531,"value":"md`\nI made this interactive visualization to explore the outbreak of the SARS-CoV-2 virus in my home state. ${\n isTouchCapableDevice ? \"Tap\" : \"Hover over\"\n} a county to see data for that county, or ${\n isTouchCapableDevice ? \"tap on\" : \"hover over\"\n} the infection graph to see the state of the map at that time. The timeline callouts are clickable hyperlinks to source articles.\n\nData is scraped regularly from the [Washington Department of Health website](https://www.doh.wa.gov/Emergencies/Coronavirus) and available on [GitHub](https://github.com/jake-low/covid-19-wa-data).\n\n${\n isTouchCapableDevice\n ? \"Tip: rotate your mobile device for the best experience\"\n : \"\"\n}\n\n**Last updated: ${formatDate(d3.max(rawData, d => d.Date))}.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3218,"value":"viewof mapShows = radio({\n title: 'Map shows the following',\n options: [\n { label: 'Cases per capita', value: 'cases-per-capita' },\n { label: 'Deaths per capita', value: 'deaths-per-capita' },\n { label: 'Counties with at least one case or death', value: 'default' }\n ],\n value: 'cases-per-capita'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2587,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1698,"value":"md`\n\n\nFirst U.S. death\\*: On February 29th, the Seattle Times reported that [a patient in King County had become the first person in the United States to die of COVID-19](https://www.seattletimes.com/seattle-news/health/one-king-county-patient-has-died-due-to-covid-19-infection/). The patient, a man in his 50’s, had died the previous day at EvergreenHealth hostpital in Kirkland. However, on March 3rd, King County Department of Health announced that [two people who had both died on February 26th had also been infected with SARS-CoV-2](https://www.kingcounty.gov/depts/health/news/2020/March/3-covid19-8-deaths.aspx), a fact which had been discovered post-mortem, making these two individuals the earliest known deaths.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3094,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"mutable selectedDate = d3.max(data, d => d.Date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"mutable selectedCounty = \"Total\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1652,"value":"mutable mounted = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1177,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1961,"value":"styleAnnotations = {\n // mutate annotation links based on their class, in order to\n // underline them when the corresponding date is selected\n\n const root = d3.select(chart);\n\n root.selectAll(\"g.annotation\").classed(\"highlighted\", false);\n\n const selectedClass =\n \"date-\" + selectedDate.toDateString().replace(/\\s/g, \"-\");\n\n root.selectAll(`g.annotation.${selectedClass}`).classed(\"highlighted\", true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1218,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1190,"value":"x = {\n const x = d3\n .scaleTime()\n // .domain([d3.min(data, d => d.Date), new Date()])\n .domain([new Date(\"2020-02-17T12:00-08:00\"), d3.max(data, d => d.Date)])\n // .niceEnd(d3.timeDay.every(1))\n .range([margin.left, viewbox.width - margin.right]);\n\n const handler = {\n apply: function(target, thisArg, argumentsList) {\n return target(quantizeDate(...argumentsList));\n }\n };\n\n return new Proxy(x, handler);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1192,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.Cases)])\n .nice()\n .range([viewbox.height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${viewbox.height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(new Set(data.map(d => d.Date.getTime())).size)\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .selectAll(\"text\")\n .style(\"text-anchor\", \"end\")\n .style(\"font-size\", \"small\")\n .style(\"font-weight\", \"normal\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"transform\", \"rotate(-65)\")\n .filter(d => d.toDateString() === selectedDate.toDateString())\n .style(\"font-weight\", \"bold\")\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1196,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${viewbox.width - margin.right},0)`)\n .call(d3.axisRight(y))\n .call(g =>\n g\n .style(\"font-size\", \"small\")\n .select(\".domain\")\n .remove()\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1198,"value":"area = d3\n .area()\n .curve(d3.curveLinear)\n // .defined(d => d.value !== null)\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1647,"value":"bisect = {\n const bisector = d3.bisector(d => d.date).left;\n\n return function(mx) {\n const date = x.invert(mx);\n const index = bisector(totalCases, date, 1);\n const a = totalCases[index - 1];\n const b = totalCases[index];\n if (b === undefined) return a;\n return date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2093,"value":"viewbox = ({ x: 0, y: 0, width: 1000, height: 550 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"margin = ({ top: 20, right: 50, bottom: 60, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2129,"value":"aspectRatio = viewbox.width / viewbox.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"wa = FileAttachment(\"wa.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"// casesInSelectedCounty = data\n// .filter(row => row.County === selectedCounty)\n// .map(row => ({ date: row.Date, value: row.Cases }))\n\ncasesInSelectedCounty = casesCache.get(selectedCounty)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"// deathsInSelectedCounty = data\n// .filter(row => row.County === selectedCounty)\n// .map(row => ({ date: row.Date, value: row.Deaths }))\ndeathsInSelectedCounty = deathsCache.get(selectedCounty)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1448,"value":"casesBeforeSelectedDate = casesInSelectedCounty.filter(\n d => d.date <= selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1450,"value":"deathsBeforeSelectedDate = deathsInSelectedCounty.filter(\n d => d.date <= selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1459,"value":"casesAfterSelectedDate = casesInSelectedCounty.filter(\n d => d.date > selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1462,"value":"deathsAfterSelectedDate = deathsInSelectedCounty.filter(\n d => d.date > selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1434,"value":"// totalCases = data\n// .filter(row => row.County === \"Total\")\n// .map(row => ({ date: row.Date, value: row.Cases }));\ntotalCases = casesCache.get(\"Total\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1436,"value":"// totalDeaths = data\n// .filter(row => row.County === \"Total\")\n// .map(row => ({ date: row.Date, value: row.Deaths }))\ntotalDeaths = deathsCache.get(\"Total\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2316,"value":"casesCache = {\n const cache = new Map();\n\n for (const county of allCounties) {\n cache.set(\n county,\n data\n .filter(row => row.County === county)\n .map(row => ({ date: row.Date, value: row.Cases }))\n );\n }\n\n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2297,"value":"deathsCache = {\n const cache = new Map();\n\n for (const county of allCounties) {\n cache.set(\n county,\n data\n .filter(row => row.County === county)\n .map(row => ({ date: row.Date, value: row.Deaths }))\n );\n }\n\n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2305,"value":"allCounties = new Set([\n \"King\",\n \"Pierce\",\n \"Snohomish\",\n \"Spokane\",\n \"Clark\",\n \"Thurston\",\n \"Kitsap\",\n \"Yakima\",\n \"Whatcom\",\n \"Benton\",\n \"Skagit\",\n \"Cowlitz\",\n \"Grant\",\n \"Franklin\",\n \"Island\",\n \"Lewis\",\n \"Chelan\",\n \"Clallam\",\n \"Grays Harbor\",\n \"Mason\",\n \"Walla Walla\",\n \"Whitman\",\n \"Kittitas\",\n \"Stevens\",\n \"Douglas\",\n \"Okanogan\",\n \"Jefferson\",\n \"Asotin\",\n \"Klickitat\",\n \"Pacific\",\n \"Adams\",\n \"San Juan\",\n \"Pend Oreille\",\n \"Skamania\",\n \"Lincoln\",\n \"Ferry\",\n \"Wahkiakum\",\n \"Columbia\",\n \"Garfield\",\n \"Total\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3216,"value":"populations = d3.csvParse(\n await FileAttachment(\"populations.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1222,"value":"function getCasesOnDate(date) {\n // find datum with same day (different time ok)\n const row = data.find(\n row =>\n row.County === \"Total\" && row.Date.toDateString() === date.toDateString()\n );\n\n return { date, value: row !== undefined ? row.Cases : 0 };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"rawData = d3\n .csvParse(await FileAttachment(\"counties@20.csv\").text(), d3.autoType)\n .sort((a, b) => a.Date > b.Date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1928,"value":"data = rawData.map(d => ({ ...d, Date: quantizeDate(d.Date) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2757,"value":"rawTestsData = d3.csvParse(await FileAttachment(\"tests@16.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2811,"value":"testsData = rawTestsData.map(d => ({ ...d, Date: quantizeDate(d.Date) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2751,"value":"formatNumber = new Intl.NumberFormat('en-US').format","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"formatDate = new Intl.DateTimeFormat('en-US', {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric'\n}).format","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3060,"value":"formatDateShort = new Intl.DateTimeFormat('en-US', {\n weekday: 'short',\n month: 'long',\n day: 'numeric'\n}).format","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1917,"value":"quantizeDate = d => {\n const midnight = new Date(d.toISOString());\n midnight.setHours(0, 0, 0, 0);\n return midnight;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"colors = ({\n cases: \"#ffaaa5\",\n deaths: \"#ff4d4d\",\n casesFaded: \"#ffd5d2\",\n deathsFaded: \"#ffa6a6\",\n highlight: \"#4f32ff\",\n grey1: \"#f5f5f5\",\n grey2: \"#e8e8e8\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"visibleCountyLabels = countyLabels.filter(label => {\n return (\n data\n .filter(row => row.Date <= selectedDate)\n .find(row => row.County === label.name && row.Cases > 0) !== undefined\n );\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3102,"value":"isTouchCapableDevice = 'ontouchstart' in window","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":689,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3098,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-random@2\", \"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3214,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"