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:{"title":"COVID-19 in Washington state","cells":[{"id":0,"value":"md`# COVID-19 in Washington state`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":367,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2587,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3094,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"mutable selectedDate = d3.max(data, d => d.Date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"mutable selectedCounty = \"Total\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"mutable mounted = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1218,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":2093,"value":"viewbox = ({ x: 0, y: 0, width: 1000, height: 550 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"margin = ({ top: 20, right: 50, bottom: 60, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2129,"value":"aspectRatio = viewbox.width / viewbox.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"wa = FileAttachment(\"wa.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1448,"value":"casesBeforeSelectedDate = casesInSelectedCounty.filter(\n d => d.date <= selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"deathsBeforeSelectedDate = deathsInSelectedCounty.filter(\n d => d.date <= selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1459,"value":"casesAfterSelectedDate = casesInSelectedCounty.filter(\n d => d.date > selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1462,"value":"deathsAfterSelectedDate = deathsInSelectedCounty.filter(\n d => d.date > selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":3216,"value":"populations = d3.csvParse(\n await FileAttachment(\"populations.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1928,"value":"data = rawData.map(d => ({ ...d, Date: quantizeDate(d.Date) }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2757,"value":"rawTestsData = d3.csvParse(await FileAttachment(\"tests@16.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2811,"value":"testsData = rawTestsData.map(d => ({ ...d, Date: quantizeDate(d.Date) }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2751,"value":"formatNumber = new Intl.NumberFormat('en-US').format","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":644,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3102,"value":"isTouchCapableDevice = 'ontouchstart' in window","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3098,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-random@2\", \"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3214,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}