45:["$","title",null,{"children":"COVID-19 in Washington state | 1907040114 | Observable"}] 4d:T8aa,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", "#074869") .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", "1.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("x", margin.left + 300) // .attr("y", margin.top + 30) .attr("y", margin.top + 50) .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.max([18, (18 * viewbox.height) / 600])) ); if (mounted) { annotate(root.select("#annotations").raise()); } else { mutable mounted = true; } return node; }4e:T1a43,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("fill", "yellow") .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-01-19")); // 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 ; 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", 400) .attr("y", 65) .attr("font-size", "0.85em") // .text("grey: total tests; pink: positive tests"); .text("grey: 总测试人数; pink: 阳性人数"); svg .selectAll("text.no-data") .data([null]) .join("text") .attr("class", "subtitle") .attr("x", x(new Date("2020-01-19T23:59-08:00"))) .attr("y", y(0) - 10) .attr("font-size", "0.85em") .attr("text-anchor", "end") // .text("poor/no data available prior to March 08"); .text(""); svg .selectAll("text.no-data") .data([null]) .join("text") .attr("class", "subtitle") .attr("x", x(new Date("2020-01-19T23:59-08:00"))) .attr("y", y(0) - 100) .attr("font-size", "0.85em") .attr("text-anchor", "end") // .text("incomplete data after March 22"); .text(""); 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(); }4f:T1732,map = function(root) { const width = root.attr("width"); // const height = root.attr("height"); const height = root.attr("width"); const projection = d3 .geoConicEqualArea() .parallels([34, 40.5]) // .parallels([540, 600]) .rotate([240, 0]) .fitSize([width, height], topojson.feature(wa, wa.objects.china_province_basemap)); const path = d3.geoPath(projection); const STROKE_WEIGHT = 0.75; function joinDataToFeature(feat) { const row = data .filter( row => row.County === feat.properties.ProvEN && 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.ProvEN ).Population; return feat; } const mapCountiesData = topojson .feature(wa, wa.objects.china_province_basemap) .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.ProvEN; }) .on("mousedown", function(d) { // helper for placing county labels; check the console const name = d.properties.ProvEN; 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.ProvEN); // ...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.china_province_basemap, (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.china_province_basemap, (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.china_province_basemap).features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.ProvEN === 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); }50:T1a9c,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", "none") .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.min(data, d => d.Date); if (mutable selectedDate.getTime() !== date.getTime()) { mutable selectedDate = date; } }); root.on("mouseleave", () => { mutable selectedDate = d3.min(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" // ); }51: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(); }); }52:T1029,annotations = [ { id: "note-first-us-case", note: { title: "新冠肺炎疫情发生", label: "2019年12月", 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: "武汉封城*", label: "1月23日", href: "http://k.sina.com.cn/article_5855598209_15d0556810400148xu.html", wrap: 100 }, data: getCasesOnDate(new Date("2020-01-23T10:17")), dy: -50 }, { id: "note-employers-advise-wfh", note: { title: "全国新增治愈数超过确诊数*", label: "2月18日", href: "http://k.sina.com.cn/article_5855598209_15d0556810400148xu.html", wrap: 90 }, data: getCasesOnDate(new Date("2020-02-18T10:17")), 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: "医疗人员援助武汉", label: "3月8日", href: "http://www.nhc.gov.cn/xcs/s3574/202003/a54a40ae28764f3581f36cc31204433c.shtml", wrap: 80 }, data: getCasesOnDate(new Date("2020-03-08T11: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: "我国本轮疫情高峰期已过去", label: "3月12日", href: "http://www.nhc.gov.cn/xcs/yqfkdt/202003/9df571ff7f144bc69f63bbb636fe2b2d.shtml", wrap: 85 }, data: getCasesOnDate(new Date("2020-03-12T11: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: "首批国家援鄂医疗队撤离武汉", label: "3月17日", href: "http://www.nhc.gov.cn/xcs/s3574/202003/01426fc0590249ecac89a2874214e523.shtml", 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 // } ]53:T949,countyLabels = [ { name: "Beijing", position: [-118.505, 46.958], rotation: -0.75 }, { name: "Tianjin", position: [-117.205, 46.105], rotation: -0.75 }, { name: "Hebei", position: [-119.415, 46.053] }, { name: "Shanxi", position: [-120.619, 47.825] }, { name: "Neimenggu", position: [-123.94, 47.98], rotation: 1.25 }, { name: "Liaoning", position: [-122.480, 45.722] }, { name: "Jilin", position: [-117.930, 46.284], rotation: -0.25 }, { name: "Heilongjiang", position: [-122.704, 46.194], rotation: 0.65 }, { name: "Shanghai", position: [-119.769, 47.63], rotation: -0.75 }, { name: "Jiangsu", position: [-118.490, 48.617], rotation: -0.5 }, { name: "Zhejiang", position: [-118.900, 46.557], rotation: -0.35 }, { name: "Anhui", position: [-117.523, 46.502], rotation: -1 }, { name: "Fujian", position: [-119.504, 47.093] }, { name: "Jiangxi", position: [-123.886, 47.166], rotation: 0.25, spans: [{ text: "Grays", dx: 0, dy: -7 }, { text: "Harbor", dx: 2, dy: 7 }] }, { name: "Shandong", position: [-122.900, 48.226], rotation: 0.5 }, { name: "Henan", position: [-123.799, 47.678], rotation: 0.5 }, { name: "Hubei", position: [-121.83, 47.479], rotation: 0.5}, { name: "Hunan", position: [-122.672, 47.526] }, { name: "Guangdong", position: [-120.651, 47.063] }, { name: "Guangxi", position: [-120.751, 45.835], rotation: 0.3 }, { name: "Hainan", position: [-122.407, 46.520], rotation: 0.5 }, { name: "Chongqing", position: [-118.412, 47.460], rotation: -0.5 }, { name: "Sichuan", position: [-123.181, 47.260] }, { name: "Guizhou", position: [-119.766, 48.530], rotation: -0.35 }, { name: "Yunnan", position: [-123.650, 46.532], rotation: 0.75 }, { name: "Xizang", position: [-117.295, 48.650], rotation: -1, spans: [{ text: "Pend", dx: 0, dy: -7 }, { text: "Oreille", dx: 3, dy: 7 }] }, { name: "Shaanxi", position: [-122.069, 46.966], rotation: 0.25 }, { name: "Gansu", position: [-123.480, 48.720] }, { name: "Qinghai", position: [-121.75, 48.421] }, { name: "Ningxia", position: [-121.923, 46.014], rotation: 0.25 }, { name: "Xinjiang", position: [-121.705, 48.026] }, { name: "Taiwan", position: [-117.425, 47.519], rotation: -1.5 }, { name: "Hongkong", position: [-117.845, 48.282], rotation: -1 }, { name: "Macau", position: [-122.851, 46.850], rotation: 0.5 } ] 54:[{"id":"7e1061af4f4e766b47803909314fe4238701914a9ba15c377060d11f026f1da5532e553536669cbd6676c80b86658701c55aaa14631543f9318f6155ba52301b","href":"https://static.observableusercontent.com/files/7e1061af4f4e766b47803909314fe4238701914a9ba15c377060d11f026f1da5532e553536669cbd6676c80b86658701c55aaa14631543f9318f6155ba52301b","name":"populations1@1.csv","type":"text/csv","lastModified":1640871057986.336,"size":698},{"id":"bfff59eb79b95fefeefd374e23a1537742fec52dd1a15a328548abd20dcb63127b69692f66c30a57d68cd9a79c5abff3140c4dc66c0600c2772e6deae9eb33d1","href":"https://static.observableusercontent.com/files/bfff59eb79b95fefeefd374e23a1537742fec52dd1a15a328548abd20dcb63127b69692f66c30a57d68cd9a79c5abff3140c4dc66c0600c2772e6deae9eb33d1","name":"tests-15@1.csv","type":"text/csv","lastModified":1640873011556.779,"size":11180},{"id":"ff6b92b2711ce9cc02822b37e0aae166f783d037917eb852d19b003657a098a4d649c16d645dd807d6024e067fdd9d50151d62fd981dc90b3aed475ec43a63f9","href":"https://static.observableusercontent.com/files/ff6b92b2711ce9cc02822b37e0aae166f783d037917eb852d19b003657a098a4d649c16d645dd807d6024e067fdd9d50151d62fd981dc90b3aed475ec43a63f9","name":"china_province_basemap-1.json","type":"application/json","lastModified":1640779856542.561,"size":684563},{"id":"3675a3e555b87d7a86d5752d00608df70c00e9eb0250e700f4d91fd009e944ba6f700aa53552a8674e69b705a4d780da40d893a4a3f6bde2c9c0617582def1e7","href":"https://static.observableusercontent.com/files/3675a3e555b87d7a86d5752d00608df70c00e9eb0250e700f4d91fd009e944ba6f700aa53552a8674e69b705a4d780da40d893a4a3f6bde2c9c0617582def1e7","name":"over.csv","type":"text/csv","lastModified":1640855928423.491,"size":126016}] 49:{"id":"9385bfcde17d247a","slug":"covid-19-in-washington-state","title":"COVID-19 in Washington state","thumbnail":"01b3b4052b2bb63ce12a8d748548daad012e858dd2439517a92832c26f1530fa","access_level":"public","create_time":"$D2021-12-29T09:04:04.728Z","update_time":"$D2022-01-12T07:25:16.695Z","view_time":null,"first_public_time":"$D2021-12-29T15:05:07.352Z","has_unpublished_edits":null,"fork":{"id":"402cc5ea77797f4f","slug":"covid-19-in-washington-state","title":"COVID-19 in Washington state","owner":{"id":"cbb2b32473d3e648","login":"jake-low","name":"Jake Low"}},"stars":0,"starred":false,"owner":{"type":"team","id":"15d7bbe2fc32fb69","login":"1907040114","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3888,"publish_version":3888,"role":null,"authored":false,"authors":[{"type":"individual","id":"2f069f8fea5cfbea","login":"1907040114","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2f069f8fea5cfbea","login":"1907040114","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2587,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3094,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"mutable selectedDate = d3.max(data, d => d.Date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"mutable selectedCounty = \"Total\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"mutable mounted = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3477,"value":"// waFeatures=topojson.feature(wa, wa.objects.china_province_basemap).features.map(joinDataToFeature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3515,"value":"// b=populations.find().Population","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3483,"value":"provinceJson = FileAttachment(\"china_province_basemap-1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3480,"value":"provinceFeatures = topojson.feature(provinceJson, provinceJson.objects.china_province_basemap);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3557,"value":"// a=topojson\n// .feature(wa, wa.objects.china_province_basemap)\n// .features.map(joinDataToFeature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3762,"value":"width=680","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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-01-19T23:59-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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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\", \"0.8em\")\n .style(\"font-weight\", \"normal\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"fill\",\"white\")\n .attr(\"transform\", \"rotate(-60)\")\n .filter(d => d.toDateString() === selectedDate.toDateString())\n .style(\"font-weight\", \"bold\")\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2093,"value":"viewbox = ({ x: 0, y: 0, width: 800, height: 550 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"margin = ({ top: 20, right: 50, bottom: 60, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2129,"value":"aspectRatio = viewbox.width / viewbox.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":" wa = FileAttachment(\"china_province_basemap-1.json\").json()// wa = FileAttachment(\"wa.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"casesBeforeSelectedDate = casesInSelectedCounty.filter(\n d => d.date <= selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"deathsBeforeSelectedDate = deathsInSelectedCounty.filter(\n d => d.date <= selectedDate\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"casesAfterSelectedDate = casesInSelectedCounty.filter(\n d => d.date > selectedDate\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"deathsAfterSelectedDate = deathsInSelectedCounty.filter(\n d => d.date > selectedDate\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2305,"value":"allCounties = new Set([\n \"Beijing\",\n\"Tianjin\",\n\"Hebei\",\n\"Shanxi\",\n\"Neimenggu\",\n\"Liaoning\",\n\"Jilin\",\n\"Heilongjiang\",\n\"Shanghai\",\n\"Jiangsu\",\n\"Zhejiang\",\n\"Anhui\",\n\"Fujian\",\n\"Jiangxi\",\n\"Shandong\",\n\"Henan\",\n\"Hubei\",\n\"Hunan\",\n\"Guangdong\",\n\"Guangxi\",\n\"Hainan\",\n\"Chongqing\",\n\"Sichuan\",\n\"Guizhou\",\n\"Yunnan\",\n\"Xizang\",\n\"Shaanxi\",\n\"Gansu\",\n\"Qinghai\",\n\"Ningxia\",\n\"Xinjiang\",\n\"Taiwan\",\n\"Hongkong\",\n\"Macau\",\n\"Total\"\n\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3216,"value":"populations = d3.csvParse(\n await FileAttachment(\"populations1@1.csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"rawData = d3\n .csvParse(await FileAttachment(\"over.csv\").text(), d3.autoType)\n .sort((a, b) => a.Date > b.Date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"data = rawData.map(d => ({ ...d, Date: quantizeDate(d.Date) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2757,"value":"rawTestsData = d3.csvParse(await FileAttachment(\"tests-15@1.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2811,"value":"testsData = rawTestsData.map(d => ({ ...d, Date: quantizeDate(d.Date) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2751,"value":"formatNumber = new Intl.NumberFormat('en-US').format","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3102,"value":"isTouchCapableDevice = 'ontouchstart' in window","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3098,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3214,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 44:null