31:T287c,chartCumulative = { const svg = d3.select(DOM.svg(width, heightPositiveTestsGraph)) .attr("id", "svg_combined") const orderDate = "2020-03-25" const electionDate = "2020-04-07" const strikeDownDate = "2020-05-13" const labelOffset = 3 const labelPosY = margin.top + 28 const chartTitleMain = svg.append("text") .attr("class", "chart-title") .attr("x", margin.left) .attr("y", widthUnder400 ? 8 : 30) .text(`Cumulative ${widthUnder400 ? "" : "COVID-19 "}Positive Test Results in`) .property("style", titleStyleString) document.body.appendChild(svg.node()) const titleWidth = chartTitleMain.node().getBBox().width svg.remove() svg.append("text") .attr("class", "chart-title chart-title-location") .attr("x", margin.left + titleWidth + 4) .attr("y", widthUnder400 ? 8 : 30) .text(() => { if (selectedCounty === "All Wisconsin") return "Wisconsin" else return `${selectedCounty} County` }) .property("style", titleLocationStyleString) svg.append("text") .attr("class", "label") .attr("x", margin.left) .attr("y", widthUnder400 ? 20 : 50) .text("Data source: Wisconsin Department of Health Services") svg.append("g") .call(xAxis) .attr("transform", `translate(0,${heightPositiveTestsGraph - margin.bottom})`) svg.append("g") .call(yAxis) // svg.append("line") // .attr("class", "anno-line") // .attr("x1", xScale(parseDate(orderDate))) // .attr("y1", (heightPositiveTestsGraph / 1.15) - 12) // .attr("x2", xScale(parseDate(orderDate))) // .attr("y2", heightPositiveTestsGraph - margin.bottom) // svg.append("line") // .attr("class", "anno-line") // .attr("x1", xScale(parseDate(electionDate))) // .attr("y1", labelPosY - 12) // .attr("x2", xScale(parseDate(electionDate))) // .attr("y2", heightPositiveTestsGraph - margin.bottom) // svg.append("line") // .attr("class", "anno-line") // .attr("x1", xScale(parseDate(strikeDownDate))) // .attr("y1", labelPosY - 80) // .attr("x2", xScale(parseDate(strikeDownDate))) // .attr("y2", heightPositiveTestsGraph - margin.bottom) const stateArea = svg.append("path") .datum(dataFromUrlByState) .attr("d", area) .attr("class", "area-state") .style("fill", baseColor) .style("stroke", "none") .style("opacity", 0.1) .style("display", showRelativeToState ? "block" : "none") const selectArea = svg.append("path") .datum(data) .attr("d", area) .attr("class", "area-county") .style("fill", baseColor) .style("stroke", "none") .style("opacity", 0.3) const selectLine = svg.append("path") .datum(data) .attr("d", line) .attr("class", "time-line") .style("stroke", baseColor) .style("stroke-width", 4) .style("fill", "none") .style("stroke-linecap", "round") .style("stroke-linejoin", "round") const hospitalLine = svg.append("path") .datum(dataFromUrlByState.filter(d => parseDate(d.date) >= parseDate("2020-04-01"))) .attr("d", lineHospital) .attr("class", "line-hospital") .style("stroke", baseColor) .style("stroke-width", 2.5) .style("stroke-linecap", "round") .style("stroke-linejoin", "round") .style("fill", "none") .style("display", (widthUnder400 || selectedCounty !== "All Wisconsin") ? "none" : "block") const icuLine = svg.append("path") .datum(dataFromUrlByState.filter(d => parseDate(d.date) >= parseDate("2020-04-04"))) .attr("d", lineICU) .attr("class", "line-icu") .style("stroke", baseColor) .style("stroke-width", 2.5) .style("stroke-linecap", "round") .style("stroke-linejoin", "round") .style("fill", "none") .style("display", (widthUnder400 || selectedCounty !== "All Wisconsin") ? "none" : "block") const deathsArea = svg.append("path") .datum(data) .attr("d", areaDeaths) .attr("class", "area-deaths") .style("fill", "red") .style("fill-opacity", 0.5) .style("stroke", "none") const positivePoints = svg.selectAll(".data-point-positive") .data(data) .join("circle") .attr("class", "data-point-positive") .attr("cx", d => xScale(parseDate(d.date))) .attr("cy", d => yScale(d.cumulative_test_positive)) .attr("r", 0.75) .style("fill", data.length > 1 ? "white" : baseColor) const hospitalizedPoints = svg.selectAll(".data-point-hospitalized") .data(dataFromUrlByState.filter(d => parseDate(d.date) >= parseDate("2020-04-01"))) .join("circle") .attr("class", "data-point-hospitalized") .attr("cx", d => xScale(parseDate(d.date))) .attr("cy", d => yScale(d.cumulative_hospitalizations)) .attr("r", 0.75) .style("fill", "white") .style("display", (widthUnder400 || selectedCounty !== "All Wisconsin") ? "none" : "block") const icuPoints = svg.selectAll(".data-point-icu") .data(dataFromUrlByState.filter(d => parseDate(d.date) >= parseDate("2020-04-04"))) .join("circle") .attr("class", "data-point-icu") .attr("cx", d => xScale(parseDate(d.date))) .attr("cy", d => yScale(d.cumulative_intensive_care)) .attr("r", 0.75) .style("fill", "white") .style("display", (widthUnder400 || selectedCounty !== "All Wisconsin") ? "none" : "block") if (!widthUnder400) { const mapPos = { x1: margin.left, y1: margin.top * 0.35, x2: width * 0.35, y2: width * 0.55 } const mapExtent = [ [mapPos.x1, mapPos.y1], [mapPos.x2, mapPos.y2] ] renderMap({ node: svg, extent: mapExtent, mapType: "choropleth", showCountyLabels: false, legendXPos: mapPos.x1 + (width * 0.02), legendYPos: mapPos.y2 }) } svg.selectAll(".all-wi-label") .data(dataFromUrlByState.filter(d => (selectedCounty !== "All Wisconsin") && (d.date === formatDate(maxDate)))) .join("text") .attr("class", "label all-wi-label") .attr("x", d => xScale(parseDate(d.date)) + 7) .attr("y", d => yScale(d.cumulative_test_positive) + 10) .text("All Wisconsin") const positiveTestsLabel = svg.selectAll(".label-value") .data(data.filter((d, i) => i === 0)) .join("text") .attr("class", "label-value") .attr("x", xScale(d3.max(data.map(d => parseDate(d.date)))) + labelOffset) .attr("y", d => latestLabelPositions.positive_main) .text(d => d3.format(",")(d.cumulative_test_positive)) const positiveTestSubLabel1 = svg.append("text") .attr("class", "label label-1st-row") .attr("x", xScale(parseDate(data[0].date)) + labelOffset) .attr("y", latestLabelPositions.positive_1st) .text(() => { if (!widthUnder400 && yScale(data[0].cumulative_test_positive) < heightPositiveTestsGraph - margin.bottom - 34) return "total pos. tests" else return "pos. tests" }) const positiveTestSubLabel2 = svg.append("text") .attr("class", "label label-2nd-row") .attr("x", xScale(parseDate(data[0].date)) + labelOffset) .attr("y", latestLabelPositions.positive_2nd) .text(() => { if (selectedCounty !== "All Wisconsin") return `in ${selectedCounty} County` else return "" }) const hospitalizationsLabel = svg.append("text") .attr("class", "label-value-hospital") .attr("x", xScale(d3.max(dataFromUrlByState.map(d => parseDate(d.date)))) + labelOffset) .attr("y", latestLabelPositions.hospitalized) .text(() => { if (selectedCounty === "All Wisconsin") { return `${d3.format(",")(dataFromUrlByState[0].cumulative_hospitalizations)} total hosp.` } else return "" }) const icuLabel = svg.append("text") .attr("class", "label-value-hospital") .attr("x", xScale(d3.max(dataFromUrlByState.map(d => parseDate(d.date)))) + labelOffset) .attr("y", latestLabelPositions.intensive) .text(() => { if ((data[0].cumulative_test_positive > data[0].cumulative_deaths + 40) && selectedCounty === "All Wisconsin") { return `${d3.format(",")(dataFromUrlByState[0].cumulative_intensive_care)} total icu` } else return "" }) const deathsLabel = svg.append("text") .attr("class", "label-value-deaths") .attr("x", xScale(d3.max(data.map(d => parseDate(d.date)))) + labelOffset) .attr("y", latestLabelPositions.deaths) .text(() => { const deathsValue = data[0].cumulative_deaths if (deathsValue !== 0) return `${d3.format(",")(deathsValue)} ${(widthUnder400 || selectedCounty !== "All Wisconsin") ? "" : "total"} death${deathsValue === 1 ? "" : "s"}` else return "" }) svg.append("text") .attr("class", "label label-1st-case") .attr("x", margin.left) .attr("y", heightPositiveTestsGraph - margin.bottom - 30) .text(d => { if (!widthUnder400 && selectedCounty === "All Wisconsin") return `⟵ 1st case reported on ${d3.timeFormat("%b. %e")(minDate)}th` else return "" }) // svg.append("text") // .attr("class", "label-event-right") // .attr("x", xScale(parseDate(orderDate)) - labelOffset) // .attr("y", heightPositiveTestsGraph / 1.15) // .text(`"Safer at Home" order`) // svg.append("text") // .attr("class", "label-event-right") // .attr("x", xScale(parseDate(orderDate)) - labelOffset) // .attr("y", (heightPositiveTestsGraph / 1.15) + 14) // .text(`began on ${d3.timeFormat("%b. %e")(parseDate(orderDate))}th`) // svg.append("text") // .attr("class", "label-event") // .attr("x", xScale(parseDate(electionDate)) + labelOffset) // .attr("y", labelPosY) // .text(`Wisconsin`) // svg.append("text") // .attr("class", "label-event") // .attr("x", xScale(parseDate(electionDate)) + labelOffset) // .attr("y", labelPosY + 14) // .text(`election ${d3.timeFormat("%b. %e")(parseDate(electionDate))}th`) // svg.append("text") // .attr("class", "label-event-right") // .attr("x", xScale(parseDate(strikeDownDate)) - labelOffset) // .attr("y", labelPosY - 70) // .text(`"Safer at Home"`) // svg.append("text") // .attr("class", "label-event-right") // .attr("x", xScale(parseDate(strikeDownDate)) - labelOffset) // .attr("y", labelPosY + 14 - 70) // .text(`order struck down`) applyChartStyles(svg) return svg.node() }32:T14d6,chartDaily = { const svg = d3.select(DOM.svg(width, heightDailyPositiveGraph)) .attr("class", "bar-graph") const chartTitleMain = svg.append("text") .attr("class", "chart-title") .attr("x", margin.left) .attr("y", widthUnder400 ? 8 : 30) .text(`Daily ${widthUnder400 ? "" : "COVID-19 "}Positive Test Results in`) .property("style", titleStyleString) document.body.appendChild(svg.node()) const titleWidth = chartTitleMain.node().getBBox().width svg.remove() svg.append("text") .attr("class", "chart-title chart-title-location") .attr("x", margin.left + titleWidth + 4) .attr("y", widthUnder400 ? 8 : 30) .text(() => { if (selectedCounty === "All Wisconsin") return "Wisconsin" else return `${selectedCounty} County` }) .property("style", titleLocationStyleString) svg.append("text") .attr("class", "label") .attr("x", margin.left) .attr("y", widthUnder400 ? 20 : 50) .text("Data source: Wisconsin Department of Health Services") const chartGroup = svg.append("g") chartGroup.append("g") .call(xAxisBar) .attr("transform", `translate(0,${heightDailyPositiveGraph - margin.bottom})`) chartGroup.append("g") .call(yAxisBar) chartGroup.selectAll(".daily-bar-all") .data(dataFromUrlByState.filter(d => parseDate(d.date) > d3.timeDay.offset(minDate, + 20))) .join("rect") .attr("class", "bar daily-bar-all") .attr("x", d => xScaleBar(parseDate(d.date)) + 1) .attr("y", d => yScaleBar(d.daily_test_positive)) .attr("width", xScaleBar.bandwidth() - 1) .attr("height", d => yScaleBar(0) - yScaleBar(d.daily_test_positive)) chartGroup.selectAll(".daily-bar") .data(data.filter(d => parseDate(d.date) > d3.timeDay.offset(minDate, + 20))) .join("rect") .attr("class", "bar daily-bar") .attr("x", d => xScaleBar(parseDate(d.date)) + 1) .attr("y", d => yScaleBar(d.daily_test_positive)) .attr("width", xScaleBar.bandwidth() - 1) .attr("height", d => { if (d.daily_test_positive >= 0) return yScaleBar(0) - yScaleBar(d.daily_test_positive) else return 0 }) chartGroup.selectAll(".daily-bar-deaths") .data(data.filter(d => parseDate(d.date) > d3.timeDay.offset(minDate, + 20))) .join("rect") .attr("class", "bar daily-bar-deaths") .attr("x", d => xScaleBar(parseDate(d.date)) + 1) .attr("y", d => yScaleBar(d.daily_deaths)) .attr("width", xScaleBar.bandwidth() - 1) .attr("height", d => yScaleBar(0) - yScaleBar(d.daily_deaths)) const dailyPositiveAverages = data.map(d => { const date = parseDate(d.date) const lastNDayRange = d3.timeDay.offset(date, -rollingAvgDayCount) const dayPlusOne = d3.timeDay.offset(date, 1) const lastNDayData = data.filter(c => { const cDate = parseDate(c.date) return (c.county === d.county) && (cDate > lastNDayRange && cDate < dayPlusOne) }) const dailyTestPositiveAvg = d3.mean(lastNDayData.map(a => +a.daily_test_positive)) return {"daily_test_positive_avg": dailyTestPositiveAvg, "date": d.date} }) chartGroup.append("path") .datum(() => { if (selectedCounty === "All Wisconsin") { return data } else { return dailyPositiveAverages } }) .attr("d", lineDailyAvg) .attr("class", "time-line") .style("stroke", baseColor) .style("stroke-width", 3) .style("fill", "none") .style("stroke-linecap", "round") .style("stroke-linejoin", "round") chartGroup.selectAll(".all-wi-label") .data(dataFromUrlByState.filter(d => (selectedCounty !== "All Wisconsin") && (d.date === formatDate(maxDate)))) .join("text") .attr("class", "label all-wi-label") .attr("x", d => xScaleBar(parseDate(d.date)) + xScaleBar.bandwidth() - 170) .attr("y", d => yScaleBar(d3.max(dataFromUrlByState, d => d.daily_test_positive)) - 7) .text(widthUnder400 ? "" : "Compared to all of Wisconsin") chartGroup.selectAll(".bar-label") .data(data.filter(d => d.date === formatDate(maxDate))) .join("text") .attr("class", "bar-label") .attr("x", d => xScaleBar(parseDate(d.date)) + 3) .attr("y", d => { if (selectedCounty === "All Wisconsin") { return yScaleBar(d.daily_test_positive_avg) + 2 } else { const latestAvg = dailyPositiveAverages.filter(c => c.date === formatDate(maxDate))[0].daily_test_positive_avg return yScaleBar(latestAvg) + 2 } }) .text(d => { if (widthUnder400) return "" else { if (selectedCounty === "All Wisconsin") { return `${d3.format(",")(Math.round(d.daily_test_positive_avg))} avg.` } else { const latestAvg = dailyPositiveAverages.filter(c => c.date === formatDate(maxDate))[0].daily_test_positive_avg return `${d3.format(",")(Math.round(latestAvg))} avg.` } } }) chartGroup.append("text") .attr("class", "label label-1st-case") .attr("x", margin.left) .attr("y", heightDailyPositiveGraph - margin.bottom - 40) .text(d => { if (!widthUnder400) return `⟵ 1st case reported on ${d3.timeFormat("%b. %e")(minDate)}` else return "" }) applyChartStyles(svg) return svg.node() }33:T132e,chartCumlativeTotalTests = { const svg = d3.select(DOM.svg(width, heightTotalTestsGraph)) const chartTitleMain = svg.append("text") .attr("class", "chart-title") .attr("x", margin.left) .attr("y", widthUnder400 ? 10 : 30) .text(showPercentOfTests ? `Percent Positive ${widthUnder400 ? "" : "COVID-19 "}Test Results in` : `Cumulative ${widthUnder400 ? "" : "COVID-19 "} Tests in`) .property("style", titleStyleString) document.body.appendChild(svg.node()) const titleWidth = chartTitleMain.node().getBBox().width svg.remove() svg.append("text") .attr("class", "chart-title chart-title-location") .attr("x", margin.left + titleWidth + 4) .attr("y", widthUnder400 ? 10 : 30) .text(() => { if (selectedCounty === "All Wisconsin") return "Wisconsin" else return `${selectedCounty} County` }) .property("style", titleLocationStyleString) svg.append("text") .attr("class", "label") .attr("x", margin.left) .attr("y", widthUnder400 ? 20 : 50) .text("Data source: Wisconsin Department of Health Services") svg.append("text") .attr("class", "label") .attr("x", margin.left) .attr("y", widthUnder400 ? 30 : 70) .text(selectedCounty !== "All Wisconsin" ? "Negative test results are not broken down by county" : "") svg.append("g") .call(xAxis) .attr("transform", `translate(0,${heightTotalTestsGraph - margin.bottom})`) svg.append("g") .call(yAxisTotalTests) const totalTestsArea = svg.append("path") .datum(data) .attr("d", areaTotalTests) .attr("class", "area-total-tests") .style("fill", baseColor) .style("stroke", "none") .style("opacity", 0.3) const positiveArea = svg.append("path") .datum(data) .attr("d", areaPositiveTotal) .attr("class", "area-positive") .style("fill", baseColor) .style("fill-opacity", 0.4) .style("stroke", "none") .style("display", showPercentOfTests ? "none" : "block") const selectLine = svg.append("path") .datum(data) .attr("d", lineTotalTests) .attr("class", "timeline-total-tests") .style("stroke", baseColor) .style("stroke-width", 4) .style("fill", "none") .style("stroke-linecap", "round") .style("stroke-linejoin", "round") svg.selectAll(".data-point") .data(data) .join("circle") .attr("class", "data-point") .attr("cx", d => xScale(parseDate(d.date))) .attr("cy", d => { if (showPercentOfTests) return yScaleTotalTests(d.percent_positive_of_all_tests) else return yScaleTotalTests(d.cumulative_test_positive + d.cumulative_test_negative) }) .attr("r", 1.25) .style("fill", data.length > 1 ? "white" : baseColor) svg.selectAll(".label-value") .data(() => { const latestData = data.filter((d, i) => i === 0) if (showPercentOfTests) return latestData else return latestData.concat(latestData) }) .join("text") .attr("class", "label-value") .attr("x", xScale(d3.max(data.map(d => parseDate(d.date)))) + 7) .attr("y", (d, i) => { if (showPercentOfTests) return yScaleTotalTests(d.percent_positive_of_all_tests) - 5 else if (!showPercentOfTests && i === 0) return yScaleTotalTests(d.cumulative_test_positive + d.cumulative_test_negative) - 5 else if (!showPercentOfTests && i === 1) return yScaleTotalTests(d.cumulative_test_positive) - 5 }) .text((d, i) => { let num if (showPercentOfTests || i === 1) num = d3.format(".2%")(d.percent_positive_of_all_tests) else if (i === 0) num = d3.format(",")(d.cumulative_test_positive + d.cumulative_test_negative) return num }) svg.selectAll(".label-1st-row") .data(() => { const latestData = data.filter((d, i) => i === 0) if (showPercentOfTests) return latestData else return latestData.concat(latestData) }) .join("text") .attr("class", "label label-1st-row") .attr("x", xScale(d3.max(data.map(d => parseDate(d.date)))) + 7) .attr("y", (d, i) => { if (showPercentOfTests) return yScaleTotalTests(d.percent_positive_of_all_tests) + 9 else if (!showPercentOfTests && i === 0) return yScaleTotalTests(d.cumulative_test_positive + d.cumulative_test_negative) + 9 else if (!showPercentOfTests && i === 1) return yScaleTotalTests(d.cumulative_test_positive) + 9 }) .text((d, i) => { if (showPercentOfTests || i === 1) return "positive tests" else if (i === 0) return "total tests" }) svg.append("text") .attr("class", "label") .attr("x", margin.left) .attr("y", heightTotalTestsGraph - margin.bottom - 50) .text(() => { if (selectedCounty === "All Wisconsin") return "total tests only available from Mar. 16" return "total tests only available from Mar. 31" }) applyChartStyles(svg) return svg.node() }34:T112a,chartDailyTests = { const svg = d3.select(DOM.svg(width, heightDailyTestsGraph)) .attr("class", "bar-graph") const chartTitleMain = svg.append("text") .attr("class", "chart-title") .attr("x", margin.left) .attr("y", widthUnder400 ? 8 : 30) .text(`Daily ${widthUnder400 ? "" : "COVID-19 "} Tests in`) .property("style", titleStyleString) document.body.appendChild(svg.node()) const titleWidth = chartTitleMain.node().getBBox().width svg.remove() svg.append("text") .attr("class", "chart-title chart-title-location") .attr("x", margin.left + titleWidth + 4) .attr("y", widthUnder400 ? 8 : 30) .text(() => { if (selectedCounty === "All Wisconsin") return "Wisconsin" else return `${selectedCounty} County` }) .property("style", titleLocationStyleString) svg.append("text") .attr("class", "label") .attr("x", margin.left) .attr("y", widthUnder400 ? 20 : 50) .text("Source: Wisconsin Department of Health Services") const chartGroup = svg.append("g") chartGroup.append("g") .call(xAxisBar) .attr("transform", `translate(0,${heightDailyTestsGraph - margin.bottom})`) chartGroup.append("g") .call(yAxisBarTests) chartGroup.selectAll(".daily-bar") .data(data.filter(d => { if (selectedCounty === "All Wisconsin") return parseDate(d.date) > parseDate("2020-03-15") else return parseDate(d.date) > parseDate("2020-03-30") })) .join("rect") .attr("class", "bar daily-bar") .attr("x", d => xScaleBar(parseDate(d.date)) + 1) .attr("y", (d, i) => { let previousDayPos = 0 let previousDayNeg = 0 if ((selectedCounty === "All Wisconsin" && d.date !== "2020-03-16") || (selectedCounty !== "All Wisconsin" && d.date !=="2020-03-31")) { previousDayPos = data[i + 1].cumulative_test_positive previousDayNeg = data[i + 1].cumulative_test_negative } const daily = (d.cumulative_test_positive + d.cumulative_test_negative) - (previousDayPos + previousDayNeg) return yScaleBarTests(daily) }) .attr("width", xScaleBar.bandwidth() - 2) .attr("height", (d, i) => { let previousDayPos = 0 let previousDayNeg = 0 if ((selectedCounty === "All Wisconsin" && d.date !== "2020-03-16") || (selectedCounty !== "All Wisconsin" && d.date !=="2020-03-31")) { previousDayPos = data[i + 1].cumulative_test_positive previousDayNeg = data[i + 1].cumulative_test_negative } const daily = (d.cumulative_test_positive + d.cumulative_test_negative) - (previousDayPos + previousDayNeg) return yScaleBarTests(0) - yScaleBarTests(daily) }) chartGroup.selectAll(".bar-label") .data(data.filter(d => d.date === formatDate(maxDate))) .join("text") .attr("class", "bar-label") .attr("x", d => xScaleBar(parseDate(d.date)) + (xScaleBar.bandwidth() / 2)) .attr("y", (d, i) => { let previousDayPos = 0 let previousDayNeg = 0 if ((selectedCounty === "All Wisconsin" && d.date !== "2020-03-16") || (selectedCounty !== "All Wisconsin" && d.date !=="2020-03-31")) { previousDayPos = data[i + 1].cumulative_test_positive previousDayNeg = data[i + 1].cumulative_test_negative } const daily = (d.cumulative_test_positive + d.cumulative_test_negative) - (previousDayPos + previousDayNeg) return yScaleBarTests(daily) - 4 }) .attr("dx", d => d.date === formatDate(maxDate) ? 7 : 0) .text((d, i) => { let previousDayPos = 0 let previousDayNeg = 0 if ((selectedCounty === "All Wisconsin" && d.date !== "2020-03-16") || (selectedCounty !== "All Wisconsin" && d.date !=="2020-03-31")) { previousDayPos = data[i + 1].cumulative_test_positive previousDayNeg = data[i + 1].cumulative_test_negative } const daily = (d.cumulative_test_positive + d.cumulative_test_negative) - (previousDayPos + previousDayNeg) if (daily < 0) { return "fix" } else if ((i % 2 === 1 || widthUnder400) && daily !== yScaleBarTests.domain()[1]) { return "" } else { if (daily > 99) return d3.format(".3s")(daily) else return daily } }) applyChartStyles(svg) return svg.node() }35:T826,latestLabelPositions = { const h = widthUnder400 ? 9 : 13 const yBase = yScale.range()[0] - 1 const latestData = data.filter((d, i) => i === 0)[0] const latestEntireStateData = dataFromUrlByState.filter(d => d.date === formatDate(maxDate))[0] const positive = latestData.cumulative_test_positive const hospitalized = latestEntireStateData.cumulative_hospitalizations const intensive = latestEntireStateData.cumulative_intensive_care const deaths = latestData.cumulative_deaths let positiveYPos = yScale(positive) - 3 let positiveYPos1 = positiveYPos + h let positiveYPos2 = positiveYPos + (h * 2) let hospitalizedYPos = yScale(hospitalized) let intensiveYPos = yScale(intensive) let deathsYPos = yScale(deaths) if (selectedCounty === "All Wisconsin") { const deathIntensiveDist = deathsYPos - intensiveYPos if (deathIntensiveDist <= h && deathIntensiveDist >= -h) { intensiveYPos = intensiveYPos + ((h + deathIntensiveDist) / 2) deathsYPos = deathsYPos - ((h + deathIntensiveDist) / 2) } const intensiveHospitalDist = intensiveYPos - hospitalizedYPos if (intensiveHospitalDist <= h) { hospitalizedYPos = hospitalizedYPos - (intensiveHospitalDist / 2) - 2 intensiveYPos = intensiveYPos + (intensiveHospitalDist / 2) + 2 } } if (selectedCounty === "All Wisconsin") { if (positiveYPos1 > yBase - (h * 2)) { positiveYPos1 = yBase - (h * 2) positiveYPos = positiveYPos1 - h } } else { if (positiveYPos2 > yBase - h) { positiveYPos2 = deaths > 0 ? yBase - h : yBase positiveYPos1 = positiveYPos2 - h positiveYPos = positiveYPos2 - (h * 2) } } if (hospitalizedYPos > yBase - (h * 2)) hospitalizedYPos = yBase - (h * 2) if (deathsYPos > (yBase - h)) deathsYPos = yBase if (intensiveYPos > yBase) intensiveYPos = yBase - h return { positive_main: positiveYPos, positive_1st: positiveYPos1, positive_2nd: positiveYPos2, hospitalized: hospitalizedYPos, intensive: intensiveYPos, deaths: deathsYPos } }36:T206e,function renderMap({ node = node, extent = extent, mapType = mapType, showCountyLabels = showCountyLabels, legendXPos = legendXPos, legendYPos = legendYPos, } = {}) { const latestDataByCounty = dataFromUrlByCounty.filter(row => row.date === formatDate(maxDate)) const mapArea = node.append("g") const mapGroup = mapArea.append("g") const paths = mapGroup.append("g") paths.selectAll("path") .data(geoJson.features) .join("path") .attr("fill", d => { const county = latestDataByCounty.filter(c => c.county === d.properties.NAME)[0] const ePop = populationDataParsed.filter(c => c.county === d.properties.NAME)[0] const val = county.cumulative_test_positive / ePop.population if (mapType === "choropleth") { if (val === 0) return "white" else return colorScale(val * perCapita) } else return colorScale(0) }) .attr("d", geoPath(extent)) .style("stroke", d => { let strokeColor = "#ACC2D4" if (mapType === "choropleth" && d.properties.NAME === selectedCounty) strokeColor = strokeHighlightColor return strokeColor }) .on("click", function() { const n = d3.select(this) mutable selectedCounty = n.data()[0].properties.NAME n.raise() }) .style("stroke-width", d => { let strokeWidth = 0.5 if (mapType === "choropleth" && d.properties.NAME === selectedCounty) { strokeWidth = 2 } return strokeWidth }) .style("cursor", "pointer") .on("mouseover", handleMouseOver) .on("touchmove mousemove", handleMouseMove) .on("touchend mouseleave", handleMouseLeave) .append("title") const border = topojson.merge(wisconsinCountyTopo, wisconsinCountyTopo.objects.cb_2015_wisconsin_county_20m.geometries) mapGroup.append("path") .datum(border) .attr("d", geoPath(extent)) .property("style", ` fill: none; stroke: #476882; stroke-width: ${mapType === "spark" ? 1.5 : 1}; stroke-linejoin: round; `) if (mapType === "choropleth") { mapArea.append("text") .attr("x", (extent[1][0] - extent[0][0]) / 2) .attr("y", legendYPos - 28) .text("Reset to show all of Wisconsin") .on("click", () => { mutable selectedCounty = "All Wisconsin" }) .property("style", ` display: ${selectedCounty !== "All Wisconsin" ? "block" : "none"}; cursor: pointer; font-size: 14px; font-weight: 600; fill: ${baseColor}; text-anchor: middle; `) mapArea.append("g") .attr("transform", `translate(${legendXPos},${legendYPos})`) .call(legend) } else if (mapType === "bubble") { const bubbleScale = d3.scaleSqrt() .domain([0, d3.max(latestDataByCounty.map(d => d.cumulative_test_positive))]) .range([0, 15]) paths.selectAll("bubble") .data(geoJson.features) .join("circle") .attr("class", "bubble") .attr("transform", d => { const [cx, cy] = geoPath(extent).centroid(d) return `translate(${cx},${cy})` }) .attr("cx", 0) .attr("cy", 0) .attr("r", d => { const county = latestDataByCounty.filter(c => c.county === d.properties.NAME)[0] return bubbleScale(county.cumulative_test_positive) }) .attr("fill", baseColor) .style("stroke", baseColor) .style("fill-opacity", d => d.properties.NAME === selectedCounty ? 0.8 : 0.15) .style("pointer-events", "none") .append("title") .text(d => { const count = latestDataByCounty.filter(c => c.county === d.properties.NAME)[0].cumulative_test_positive return `${d.properties.NAME} County: ${d3.format(",")(count)} cases` }) } else if (mapType === "spark") { const sparkGroups = paths.selectAll(".spark-group") .data(Array.from(counties)) .join("g") .attr("class", "spark-group") .attr("transform", d => { const countyData = geoJson.features.filter(c => c.properties.NAME === d[0]) const [cx, cy] = geoPath(extent).centroid(countyData[0]) const [[x1, y1],[x2, y2]] = geoPath(extent).bounds(countyData[0]) const h = y2 - y1 const midDate = parseDate(d[1][Math.round(d[1].length / 2)].date) const minCountyDate = d3.min(d[1].map(dt => parseDate(dt.date))) const midDist = xScaleSpark(midDate) - xScaleSpark(minCountyDate) const xMove = xScaleSpark(maxDate) - midDist // const yMove = yScaleSpark.range()[0] - (((width * 0.6) - margin.top - margin.bottom) * 0.1) const yMove = yScaleSpark.range()[0] return `translate(${cx - xMove},${cy - yMove})` }) const sparkAreaStyleString = ` stroke: none; fill: ${baseColor}; fill-opacity: 0.3; pointer-events: none; ` const sparkStyleString = ` stroke: ${baseColor}; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; ` const legendData = counties.get("Milwaukee") const sparkAreas = sparkGroups.append("path") .datum(d => d[1]) .attr("class", "spark-area") .attr("d", sparkArea) .property("style", sparkAreaStyleString) .style("fill-opacity", d => (selectedCounty === d[0].county) ? 0.8 : 0.3) const sparkPaths = sparkGroups.append("path") .datum(d => d[1].filter(f => f.cumulative_test_positive > 0)) .attr("class", "spark") .attr("d", sparkline) .property("style", sparkStyleString) const sparkLegend = mapArea.append("g") .attr("transform", () => { const y = -yScaleSpark.range()[0] + (width * 0.75) return `translate(${width * 0.8}, ${y})` }) .style("display", widthUnder400 ? "none" : "block") sparkLegend.append("path") .datum(legendData) .attr("class", "spark-area") .attr("d", sparkArea) .property("style", sparkAreaStyleString) .attr("transform", `scale(1.6,0.6)`) sparkLegend.append("path") .datum(legendData) .attr("class", "spark") .attr("d", sparkline) .attr("vector-effect", "non-scaling-stroke") .property("style", sparkStyleString) .attr("transform", `scale(1.6,0.6)`) sparkLegend.append("text") .attr("class", "label-middle") .attr("x", () => { const date = parseDate(legendData[Math.round(legendData.length / 2)].date) return xScaleSpark(date) * 1.6 }) .attr("y", yScaleSpark.range()[0] * 0.6 + 14) .text("time since first case") sparkLegend.append("text") .attr("class", "label") .attr("x", xScaleSpark(maxDate) * 1.6 + 3) .attr("y", (yScaleSpark.range()[0] / 2) * 0.6 + 14) .text("postive") sparkLegend.append("text") .attr("class", "label") .attr("x", xScaleSpark(maxDate) * 1.6 + 3) .attr("y", (yScaleSpark.range()[0] / 2) * 0.6 + 27) .text("tests") } if (showCountyLabels) { const countyLabels = paths.selectAll(".county-label") .data(Array.from(counties)) .join("text") .attr("class", "map-county-label") .attr("x", 0) .attr("y", d => { const countyData = geoJson.features.filter(c => c.properties.NAME === d[0]) const [[x1, y1], [x2, y2]] = geoPath(extent).bounds(countyData[0]) let dyRatio = 0.2 const moveBy35 = ["Waukesha", "Kenosha", "Marquette", "Eau Claire", "Washington", "Winnebago"] const moveBy15 = ["Iron", "Door", "Ashland", "Green Lake", "Milwaukee", "Marinette"] const moveBy0 = ["Pepin"] if (moveBy35.indexOf(d[0]) > -1) dyRatio = 0.35 else if (moveBy15.indexOf(d[0]) > -1) dyRatio = 0.12 else if (moveBy0.indexOf(d[0]) > -1) dyRatio = 0.0 return (y2 - y1) * dyRatio }) .text(d => d[1][0].county) .attr("transform", d => { const countyData = geoJson.features.filter(c => c.properties.NAME === d[1][0].county) const [cx, cy] = geoPath(extent).centroid(countyData[0]) return `translate(${cx},${cy})` }) } applyChartStyles(mapArea)//node }37:T5c4,function handleMouseOver(d) { const countyNode = d3.select(this) const mapContainer = d3.select(this.parentNode.parentNode.parentNode.parentNode).attr("id") if (mapContainer === "svg_combined" && d.properties.NAME !== selectedCounty) { countyNode.style("stroke", strokeHighlightColor) .style("stroke-width", 2) .raise() } else if (d.properties.NAME !== selectedCounty) { countyNode.style("fill", colorScale(4)) } else { countyNode.style("stroke", strokeHighlightColor) .style("stroke-width", 2) .raise() } tooltip.style("opacity", 0.9) const latestDataByCounty = dataFromUrlByCounty.filter(row => row.date === formatDate(maxDate)) const count = latestDataByCounty.filter(c => c.county === d.properties.NAME)[0].cumulative_test_positive const pop = populationDataParsed.filter(c => c.county === d.properties.NAME)[0].population const str = `${d.properties.NAME} County:
${d3.format(",")(count)} case${count === 1 ? "" : "s"} (${d3.format(",")(Math.round(count / pop * perCapita))} per ${d3.format(",")(perCapita)} people)` // return `${d.properties.NAME}: ${d3.format(",")(count)} ${d3.format(",")(pop)}` // debug const renderedTooltip = tooltip.html(str) .style("left", () => { const w = parseFloat(tooltip.style("width").replace("px", "")) return `${d3.event.pageX - (w / 2)}px` }) .style("top", (d3.event.pageY - 66) + "px") }38:Ta9b,dataEarlyFillInState = [ { "date": "2020-03-14", "geoid": "55", "cumulative_test_positive": 27, "cumulative_test_negative": "unknown", "cumulative_deaths": 0, "daily_test_positive": 8, "daily_deaths": 0, "percent_positive_of_all_tests": 0, "cumulative_hospitalizations": "unknown", "cumulative_intensive_care": "unknown", "daily_test_positive_avg": 3.7142857143 }, { "date": "2020-03-13", "geoid": "55", "cumulative_test_positive": 19, "cumulative_test_negative": "unknown", "cumulative_deaths": 0, "daily_test_positive": 11, "daily_deaths": 0, "percent_positive_of_all_tests": 0, "cumulative_hospitalizations": "unknown", "cumulative_intensive_care": "unknown", "daily_test_positive_avg": 2.5714285714 }, { "date": "2020-03-12", "geoid": "55", "cumulative_test_positive": 8, "cumulative_test_negative": "unknown", "cumulative_deaths": 0, "daily_test_positive": 2, "daily_deaths": 0, "percent_positive_of_all_tests": 0, "cumulative_hospitalizations": "unknown", "cumulative_intensive_care": "unknown", "daily_test_positive_avg": 1 }, { "date": "2020-03-11", "geoid": "55", "cumulative_test_positive": 6, "cumulative_test_negative": "unknown", "cumulative_deaths": 0, "daily_test_positive": 3, "daily_deaths": 0, "percent_positive_of_all_tests": 0, "cumulative_hospitalizations": "unknown", "cumulative_intensive_care": "unknown", "daily_test_positive_avg": 0.7142857143 }, { "date": "2020-03-10", "geoid": "55", "cumulative_test_positive": 3, "cumulative_test_negative": "unknown", "cumulative_deaths": 0, "daily_test_positive": 1, "daily_deaths": 0, "percent_positive_of_all_tests": 0, "cumulative_hospitalizations": "unknown", "cumulative_intensive_care": "unknown", "daily_test_positive_avg": 0.2857142857 }, { "date": "2020-03-09", "geoid": "55", "cumulative_test_positive": 2, "cumulative_test_negative": "unknown", "cumulative_deaths": 0, "daily_test_positive": 1, "daily_deaths": 0, "percent_positive_of_all_tests": 0, "cumulative_hospitalizations": "unknown", "cumulative_intensive_care": "unknown", "daily_test_positive_avg": 0.1428571429 }, { "date": "2020-02-05", "geoid": "55", "cumulative_test_positive": 1, "cumulative_test_negative": "unknown", "cumulative_deaths": 0, "daily_test_positive": 1, "daily_deaths": 0, "percent_positive_of_all_tests": 0, "cumulative_hospitalizations": "unknown", "cumulative_intensive_care": "unknown", "daily_test_positive_avg": 1 } ]39:T927,dataFromUrlByState = { // const parsedData = dataFromUrl.filter(d => d.GEO === "State") let cleanedData = dataState.map(d => { const percentPos = +d.POS_NEW / (+d.POS_NEW + +d.NEG_NEW) const date = parseDate(d.date) const lastNDayRange = d3.timeDay.offset(date, -rollingAvgDayCount) const dayPlusOne = d3.timeDay.offset(date, 1) const lastNDayData = dataState.filter(c => { const cDate = parseDate(c.date) return cDate > lastNDayRange && cDate < dayPlusOne }) const dailyTestPositiveAvg = d3.mean(lastNDayData.map(a => +a.POS_NEW)) return { date: d.date, geoid: d.GEOID, cumulative_test_positive: +d.POSITIVE, cumulative_test_negative: +d.NEGATIVE, cumulative_deaths: +d.DEATHS, daily_test_positive: +d.POS_NEW, daily_deaths: +d.DTH_NEW, percent_positive_of_all_tests: isNaN(percentPos) ? 0 : percentPos, cumulative_hospitalizations: +d.HOSP_YES, cumulative_intensive_care: +d.IC_YES, daily_test_positive_avg: dailyTestPositiveAvg } }) cleanedData = cleanedData.sort((a, b) => d3.ascending(parseDate(b.date), parseDate(a.date))) const daysNotInUrlData = d3.scaleTime() .domain([parseDate("2020-03-14"), parseDate("2020-02-05")]) .ticks(d3.timeDay.every(1)).map(d => formatDate(d)) daysNotInUrlData.forEach(day => { const matchingDay = dataEarlyFillInState.filter(d => d.date === day) if (matchingDay.length > 0) { cleanedData.push(matchingDay[0]) } else { const previousDay = daysNotInUrlData[daysNotInUrlData.indexOf(day) - 1] let previousMatchingDay = parseDate(day) do { previousMatchingDay = d3.timeDay.offset(previousMatchingDay, -1) } while (dataEarlyFillInState.filter(d => d.date === formatDate(previousMatchingDay)).length === 0) let entry = dataEarlyFillInState.filter(d => d.date === formatDate(previousMatchingDay))[0] let entryCopy if (entry) { // Making deep copy prevents dataEarlyFillInState objects from getting overwritten entryCopy = JSON.parse(JSON.stringify(entry)) entryCopy["date"] = day entryCopy["daily_test_positive"] = 0 } cleanedData.push(entryCopy) } }) return cleanedData }3a:Ta61,function applyChartStyles(e) { e.property("style", ` font-family: "Helvetica", "Arial", sans-serif; `) e.selectAll("svg .label") .property("style", ` font-size: ${widthUnder400 ? 9 : 13}px; `) e.selectAll("svg .label-right") .property("style", ` font-size: ${widthUnder400 ? 9 : 13}px; text-anchor: end; `) e.selectAll("svg .label-middle") .property("style", ` font-size: ${widthUnder400 ? 9 : 13}px; text-anchor: middle; `) e.selectAll("svg .label-value") .property("style", ` font-size: ${widthUnder400 ? 10 : 17}px; font-weight: 800; fill: ${baseColor}; `) e.selectAll("svg .bar") .property("style", ` fill: ${baseColor}; fill-opacity: 0.8; `) e.selectAll("svg .daily-bar-all") .property("style", ` display: ${showRelativeToState ? "block" : "none"}; fill: ${baseColor}; opacity: 0.15; `) e.selectAll("svg .daily-bar-deaths") .property("style", ` fill: ${deathsColor}; `) e.selectAll("svg .y.axis line") .property("style", ` stroke: grey; stroke-dasharray: ${widthUnder400 ? "1,5" : "1,3"}; `) e.selectAll("svg .y.axis text") .property("style", ` font-size: ${widthUnder400 ? 9 : 12}px; `) e.selectAll("svg .bar-label") .property("style", ` font-size: 11px; font-weight: 800; fill: ${baseColor}; `) e.selectAll("svg .all-wi-label") .property("style", ` display: ${showRelativeToState ? "block" : "none"}; fill: ${baseColor}; font-size: ${widthUnder400 ? 9 : 13}px; opacity: 0.75; `) e.selectAll("svg .label-value-deaths") .property("style", ` fill: ${deathsColor}; font-size: ${widthUnder400 ? 9 : 13}px; font-weight: 800; `) e.selectAll("svg .label-value-hospital") .property("style", ` fill: ${baseColor}; font-size: ${widthUnder400 ? 9 : 13}px; font-weight: 800; `) e.selectAll("svg .label-event") .property("style", ` font-size: ${widthUnder400 ? 9 : 13}px; `) e.selectAll("svg .label-event-right") .property("style", ` font-size: ${widthUnder400 ? 9 : 13}px; text-anchor: end; `) e.selectAll("svg .anno-line") .property("style", ` stroke: ${baseColor}; stroke-dasharray: 5,2; stroke-opacity: 0.7; `) e.selectAll("svg .map-county-label") .property("style", ` font-size: 10px; font-weight: 400; font-family: sans-serif; fill: #476882; text-anchor: middle; pointer-events: none; `) }3b:T5e1,countyPopulationString = `county,geoid,population_estimate Adams,55001,20073 Ashland,55003,15712 Barron,55005,45252 Bayfield,55007,14992 Brown,55009,259786 Buffalo,55011,13167 Burnett,55013,15258 Calumet,55015,49807 Chippewa,55017,63635 Clark,55019,34491 Columbia,55021,56954 Crawford,55023,16288 Dane,55025,529843 Dodge,55027,87776 Door,55029,27439 Douglas,55031,43402 Dunn,55033,44498 Eau Claire,55035,102991 Florence,55037,4337 Fond du Lac,55039,102315 Forest,55041,9018 Grant,55043,51828 Green,55045,36864 Green Lake,55047,18757 Iowa,55049,23620 Iron,55051,5715 Jackson,55053,20506 Jefferson,55055,84652 Juneau,55057,26419 Kenosha,55059,168330 Kewaunee,55061,20360 La Crosse,55063,117850 Lafayette,55065,16735 Langlade,55067,19164 Lincoln,55069,27848 Manitowoc,55071,79407 Marathon,55073,135264 Marinette,55075,40537 Marquette,55077,15207 Menominee,55078,4579 Milwaukee,55079,954209 Monroe,55081,45502 Oconto,55083,37556 Oneida,55085,35345 Outagamie,55087,184754 Ozaukee,55089,88284 Pepin,55091,7262 Pierce,55093,41603 Polk,55095,43349 Portage,55097,70599 Price,55099,13490 Racine,55101,195398 Richland,55103,17539 Rock,55105,161769 Rusk,55107,14183 St. Croix,55109,87917 Sauk,55111,63596 Sawyer,55113,16370 Shawano,55115,41009 Sheboygan,55117,115205 Taylor,55119,20356 Trempealeau,55121,29438 Vernon,55123,30516 Vilas,55125,21593 Walworth,55127,103013 Washburn,55129,15689 Washington,55131,134535 Waukesha,55133,398879 Waupaca,55135,51444 Waushara,55137,24116 Winnebago,55139,169926 Wood,55141,73274`3c:[{"id":"16020f8183b21155f555c6e573ed5ac775a1b7067ca71f9934be6c4fec90caa40fbc590155b5f869f5551023fa816aca2fa019dd52bba4b3aba699099d2a3130","href":"https://static.observableusercontent.com/files/16020f8183b21155f555c6e573ed5ac775a1b7067ca71f9934be6c4fec90caa40fbc590155b5f869f5551023fa816aca2fa019dd52bba4b3aba699099d2a3130","name":"wisconsin-counties.json","type":"application/json","lastModified":1585877386775.769,"size":25029}] 2f:{"title":"Wisconsin Confirmed COVID-19 Cases","cells":[{"id":0,"value":"md`\n# Wisconsin Confirmed COVID-19 Cases\nUpdated at ${updateTime} CDT, ${d3.timeFormat(\"%B %e, %Y\")(maxDate)}
\nThese graphs use testing data from [Wisconsin Department of Health Services](https://www.dhs.wisconsin.gov/outbreaks/index.htm).
(Confirmed cases are likely behind actual cases)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5380,"value":"viewof showRelativeToState = {\n let isDisabled = \"\"\n let checked = false\n let label = \"Show county relative to all of Wisconsin\"\n \n if (selectedCounty === \"All Wisconsin\") {\n isDisabled = \"disabled\"\n checked = false\n label = `~~${label}~~`\n }\n \n const form = html`\n \n `\n \n form.oninput = () => {\n form.value = form.inputVal.checked\n }\n \n form.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"viewof selectedCountyDropdown = {\n const arr = [...countyNames].sort()\n arr.unshift(\"All Wisconsin\")\n \n const arrWithValues = arr.map(d => {\n // const latestRow = dataCounty.filter(c => (c.date === formatDate(maxDate)) && (c.county === d))\n const latestRow = dataFromUrlByCounty.filter(c => (c.date === formatDate(maxDate)) && (c.county === d))\n \n let caseCount = latestRow.length > 0 ? latestRow[0].cumulative_test_positive : 0\n \n if (d === \"All Wisconsin\") caseCount = dataFromUrlByState.filter(r => r.date === formatDate(maxDate))[0].cumulative_test_positive\n \n return { label: `${d} - (${d3.format(\",\")(caseCount)} positive test${caseCount !== 1 ? \"s\" : \"\"})`, value: d }\n }) \n \n const select = makeSelect(\"\", arrWithValues, \"Select a county\", arr.indexOf(selectedCounty)).getElementsByTagName(\"select\")[0]\n \n select.value = mutable selectedCounty\n select.oninput = () => mutable selectedCounty = select.value\n \n return select.form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4502,"value":"mapSpark = {\n const mapSVG = d3.select(DOM.svg(width, width * 0.75))\n .attr(\"id\", \"svg_sparkline_map\")\n \n const x1 = margin.left\n const y1 = margin.top * 0.75\n const x2 = width - margin.right\n const y2 = (width * 0.75) - margin.bottom\n \n const extent = [ [x1, y1], [x2, y2] ]\n \n const chartTitleMain = mapSVG.append(\"text\")\n .attr(\"class\", \"chart-title\")\n .attr(\"x\", margin.left)\n .attr(\"y\", widthUnder400 ? 10 : 30)\n .text(\"Cumulative COVID-19 Positive Test Results County Timelines\")\n .property(\"style\", titleStyleString)\n \n mapSVG.append(\"text\")\n .attr(\"class\", \"label\")\n .attr(\"x\", margin.left)\n .attr(\"y\", widthUnder400 ? 20 : 50)\n .text(\"Data source: Wisconsin Department of Health Services\")\n \n renderMap({\n node: mapSVG,\n extent: extent,\n mapType: \"spark\",\n showCountyLabels: false,\n legendXPos: width / 2 - 130,\n legendYPos: width / 2 - 30\n })\n \n applyChartStyles(mapSVG)\n \n return mapSVG.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"viewof showPercentOfTests = {\n let isDisabled = \"\" \n let label = \"Show positive results as percentage of all tests\"\n let checked = false\n \n // if (selectedCounty !== \"All Wisconsin\") {\n // isDisabled = \"disabled\"\n // label = `~~${label}~~ data not available for individual counties to show % positive of all tests`\n // }\n \n const form = html`\n \n `\n \n form.oninput = () => {\n form.value = form.inputVal.checked\n }\n \n form.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2638,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3621,"value":"mapBubble = {\n const mapSVG = d3.select(DOM.svg(width, width * 0.6))\n .attr(\"id\", \"svg_bubble_map\")\n \n const x1 = margin.left\n const y1 = margin.top / 2\n const x2 = width - margin.right\n const y2 = (width * 0.6) - (3 * margin.bottom)\n \n const extent = [ [x1, y1], [x2, y2] ]\n \n const chartTitleMain = mapSVG.append(\"text\")\n .attr(\"class\", \"chart-title\")\n .attr(\"x\", margin.left)\n .attr(\"y\", widthUnder400 ? 10 : 30)\n .text(\"COVID-19 Positive Test Results by County\")\n .property(\"style\", titleStyleString)\n \n renderMap({\n node: mapSVG,\n extent: extent,\n mapType: \"bubble\",\n showCountyLabels: false,\n legendXPos: width / 2 - 130,\n legendYPos: width / 2 - 30\n })\n \n return mapSVG.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5691,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3192,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4355,"value":"geoJson = topojson.feature(wisconsinCountyTopo, wisconsinCountyTopo.objects.cb_2015_wisconsin_county_20m)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3203,"value":"function geoPath(extent) {\n const projection = d3.geoMercator()\n .fitExtent(extent, geoJson)\n \n return d3.geoPath()\n .projection(projection)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3212,"value":"wisconsinCountyTopo = {\n const topo = await FileAttachment(\"wisconsin-counties.json\").json()\n \n const newTransform = {\n translate: [0, 0],\n scale: [0.0017, 0.0017]\n }\n \n let alteredTopo = {\n type: topo.type,\n transform: newTransform,\n arcs: topo.arcs,\n objects: topo.objects\n }\n \n return alteredTopo\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"data = {\n let dataset = []\n \n if (selectedCounty === \"All Wisconsin\") dataset = dataFromUrlByState\n else dataset = counties.get(selectedCounty)\n \n return dataset\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"counties = d3.group(dataFromUrlByCounty, d => d.county)","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"countyNames = [...counties.keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3446,"value":"legend = g => {\n const x = d3.scaleLinear()\n .domain(d3.extent(colorScale.domain()))\n .rangeRound([0, 260])\n\n g.selectAll(\"rect\")\n .data(colorScale.range().map(d => colorScale.invertExtent(d)))\n .join(\"rect\")\n .attr(\"height\", 8)\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"fill\", d => colorScale(d[0]))\n\n g.append(\"text\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", -6)\n .attr(\"fill\", \"currentColor\")\n .attr(\"class\", \"label\")\n .attr(\"text-anchor\", \"start\")\n .text(`positive tests in county per ${d3.format(\",\")(perCapita)} people`)\n\n g.call(d3.axisBottom(x)\n .tickSize(13)\n .tickFormat(d => d)\n .tickValues(colorScale.range().slice(1).map(d => colorScale.invertExtent(d)[0]))\n .tickFormat(v => Math.round(v)))\n .select(\".domain\")\n .remove()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3449,"value":"colorScale = {\n const latestDataByCounty = dataFromUrlByCounty.filter(row => row.date === formatDate(maxDate))\n const perCapitaData = latestDataByCounty.map(d => {\n const pop = populationDataParsed.filter(c => c.county === d.county)[0].population\n return d.cumulative_test_positive / pop\n })\n \n const max = Math.round(d3.max(perCapitaData) * perCapita)\n\n return d3.scaleQuantize([0, max], d3.schemeBlues[9])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4907,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"tooltip\")\n .property(\"style\", `\n opacity: 0;\n position: absolute;\n font-size: 0.7em;\n font-family: sans-serif;\n font-weight: 400;\n padding: 4px;\n background: white;\n border: solid 1px ${colorScale(8)};\n border-radius: 3px;\n pointer-events: none;\n `)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5275,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":4910,"value":"function handleMouseMove(d) {\n const renderedTooltip = tooltip\n .style(\"left\", () => {\n const w = parseFloat(tooltip.style(\"width\").replace(\"px\", \"\"))\n\n return `${d3.event.pageX - (w / 2)}px`\n })\n .style(\"top\", (d3.event.pageY - 66) + \"px\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4914,"value":"function handleMouseLeave(d) {\n const mapContainer = d3.select(this.parentNode.parentNode.parentNode.parentNode).attr(\"id\")\n \n if (mapContainer === \"svg_combined\" && d.properties.NAME !== selectedCounty) {\n d3.select(this).style(\"stroke\", \"#ACC2D4\")\n .style(\"stroke-width\", 0.5)\n .lower()\n }\n else if (mapContainer === \"svg_combined\" && d.properties.NAME === selectedCounty) {\n d3.select(this).raise()\n }\n else if (d.properties.NAME !== selectedCounty) {\n d3.select(this).style(\"fill\", colorScale(0))\n }\n \n tooltip.style(\"opacity\", 0)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3216,"value":"populationDataParsed = {\n return d3.csvParse(countyPopulationString, ({county, geoid, population_estimate}) => {\n return {\n county: county,\n geoid: geoid,\n population: +population_estimate\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6831,"value":"dataUrlCsvState = `https://prod-hub-indexer.s3.amazonaws.com/files/859602b5d427456f821de3830f89301c/11/full/3857/859602b5d427456f821de3830f89301c_11_full_3857.csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6816,"value":"dataUrlCsvCounty = `https://prod-hub-indexer.s3.amazonaws.com/files/5374188992374b318d3e2305216ee413/12/full/3857/5374188992374b318d3e2305216ee413_12_full_3857.csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6626,"value":"dataState = {\n const csv = await d3.csv(dataUrlCsvState)\n \n const data = csv.map(d => {\n return {\n ...d,\n date: formatDate(new Date(d.DATE))\n }\n })\n \n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6612,"value":"dataCounty = {\n const csv = await d3.csv(dataUrlCsvCounty)\n \n const data = csv.map(d => {\n return {\n ...d,\n date: formatDate(new Date(d.DATE))\n }\n })\n \n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6397,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":6262,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":6248,"value":"dataFromUrlByCounty = { \n let cleanedData = dataCounty.map(d => {\n let percentPos = +d.POS_NEW / (+d.POS_NEW + +d.NEG_NEW)\n \n if (parseDate(d.date) < parseDate(\"2020-03-31\")) {\n percentPos = 0\n }\n \n return {\n date: d.date,\n geoid: d.GEOID,\n county: d.NAME,\n cumulative_test_positive: +d.POSITIVE,\n cumulative_test_negative: +d.NEGATIVE,\n cumulative_deaths: +d.DEATHS,\n daily_test_positive: +d.POS_NEW,\n daily_deaths: +d.DTH_NEW,\n percent_positive_of_all_tests: isNaN(percentPos) ? 0 : percentPos,\n }\n })\n \n cleanedData = cleanedData.sort((a, b) => d3.ascending(parseDate(b.date), parseDate(a.date)))\n \n return cleanedData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"xScale = d3.scaleTime()\n .domain([d3.timeDay.offset(minDate, + 19), d3.timeDay.offset(maxDateExtended, 1)]) // added day padding to match band scale for daily bar chart\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1438,"value":"yScale = {\n let max = d3.max(dataFromUrlByState.map(d => d.cumulative_test_positive))\n \n if (!showRelativeToState && selectedCounty !== \"All Wisconsin\") {\n max = d3.max(dataFromUrlByCounty.filter(c => c.county === selectedCounty).map(d => d.cumulative_test_positive))\n }\n \n return d3.scaleLinear()\n .domain([0, max])\n .range([heightPositiveTestsGraph - margin.bottom, margin.top])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"yScaleTotalTests = {\n let scale\n let max\n \n if (showPercentOfTests) {\n max = d3.max(data.map(d => d.percent_positive_of_all_tests))\n }\n else {\n max = d3.max(data.map(d => d.cumulative_test_positive + d.cumulative_test_negative))\n }\n \n scale = d3.scaleLinear()\n .domain([0, max])\n .range([heightTotalTestsGraph - margin.bottom, margin.top])\n \n return scale\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"xScaleBar = {\n const dates = d3.scaleTime()\n .domain([d3.timeDay.offset(minDate, + 20), maxDateExtended])\n .ticks(d3.timeDay.every(1))\n \n return d3.scaleBand()\n .domain(dates)\n .range([margin.left, width - margin.right])\n .paddingOuter(0.5) // added padding to make full day tick before and after beginning and end\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"yScaleBar = {\n let max = d3.max(dataFromUrlByState.map(d => d.daily_test_positive))\n \n if (!showRelativeToState && selectedCounty !== \"All Wisconsin\") {\n max = d3.max(dataFromUrlByCounty.filter(c => c.county === selectedCounty).map(d => d.daily_test_positive))\n }\n \n return d3.scaleLinear()\n .domain([0, max])\n .range([heightDailyPositiveGraph - margin.bottom, margin.top])\n .clamp(true)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2681,"value":"yScaleBarTests = {\n const max = d3.max(dataFromUrlByState.map((d, i) => {\n if (parseDate(d.date) <= parseDate(\"2020-03-15\")) return 0\n else {\n let previousDayPos = 0\n let previousDayNeg = 0\n \n if (d.date !== \"2020-03-16\") {\n previousDayPos = dataFromUrlByState[i + 1].cumulative_test_positive\n previousDayNeg = dataFromUrlByState[i + 1].cumulative_test_negative\n }\n\n return (d.cumulative_test_positive + d.cumulative_test_negative) - (previousDayPos + previousDayNeg)\n }\n }))\n \n return d3.scaleLinear()\n .domain([0, max])\n .range([heightDailyTestsGraph - margin.bottom, margin.top])\n .clamp(true)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4574,"value":"xScaleSpark = d3.scaleTime()\n .domain([d3.timeDay.offset(minDate, + 0), maxDate])\n .range([0, 60])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4579,"value":"yScaleSpark = {\n const maxOfAllCounties = d3.max(dataFromUrlByCounty.map(d => d.cumulative_test_positive))\n \n// const perCapitas = populationDataParsed.map(d => {\n// const countyTestPositive = latestData.filter(e => e.county === d.county)[0].cumulative_test_positive\n\n// return countyTestPositive / d.population * 10000\n// })\n \n// const maxPerCapita = d3.max(perCapitas)\n \n return d3.scaleLinear()\n .domain([0, maxOfAllCounties])\n .range([170, 0])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4536,"value":"sparkline = d3.line()\n .x(d => xScaleSpark(parseDate(d.date)))\n .y(d => yScaleSpark(d.cumulative_test_positive))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4598,"value":"sparkArea = d3.area()\n .x(d => xScaleSpark(parseDate(d.date)))\n .y0(yScaleSpark(0))\n .y1(d => yScaleSpark(d.cumulative_test_positive))","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"xAxis = g => {\n const daysToLabelTicks = d3.timeMonth\n .every(1)\n .range(minDate, maxDateExtended)\n .map(d => formatDate(d))\n \n const axis = g.attr(\"class\", \"x axis\")\n .call(d3.axisBottom(xScale)\n .ticks(d3.timeMonth.every(1))\n .tickFormat(v => {\n if (daysToLabelTicks.indexOf(formatDate(v)) > -1) {\n return formatDate(v) !== \"2020-02-29\" ? d3.timeFormat(\"%b\")(v) : \"\"\n }\n else return \"\"\n })\n )\n \n return axis\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"xAxisBar = g => {\n const daysToLabelTicks = d3.timeMonth\n .every(1)\n .range(minDate, maxDateExtended)\n .map(d => formatDate(d))\n \n const axis = g.attr(\"class\", \"x axis\")\n .call(d3.axisBottom(xScale)\n .ticks(d3.timeMonth.every(1))\n .tickFormat(v => {\n if (daysToLabelTicks.indexOf(formatDate(v)) > -1) {\n return d3.timeFormat(\"%b\")(v)\n }\n else return \"\"\n })\n )\n \n return axis\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"yAxis = g => g.attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisRight(yScale)\n .tickSize(width - margin.right - margin.left)\n .ticks(yScale.domain()[1] < 10 ? yScale.domain()[1] : 10)\n .tickFormat(v => d3.format(\"~s\")(v)))\n .call(g => g.select(\"line\").remove())\n .call(g => g.selectAll(\"path\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"yAxisBar = g => g.attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisRight(yScaleBar)\n .tickSize(width - margin.right - margin.left)\n .ticks(6))\n .call(g => g.select(\"line\").remove())\n .call(g => g.selectAll(\"path\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1478,"value":"yAxisTotalTests = g => g.attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisRight(yScaleTotalTests)\n .tickSize(width - margin.right - margin.left)\n .tickFormat(v => showPercentOfTests ? d3.format(\".0%\")(v) : d3.format(\"~s\")(v)))\n .call(g => g.select(\"line\").remove())\n .call(g => g.selectAll(\"path\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2688,"value":"yAxisBarTests = g => g.attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisRight(yScaleBarTests)\n .tickSize(width - margin.right - margin.left)\n .tickFormat(v => d3.format(\"~s\")(v))\n .ticks(4))\n .call(g => g.select(\"line\").remove())\n .call(g => g.selectAll(\"path\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"area = d3.area()\n .x(d => xScale(parseDate(d.date)))\n .y0(yScale(0))\n .y1(d => yScale(d.cumulative_test_positive))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2055,"value":"areaPositiveTotal = d3.area()\n .x(d => xScale(parseDate(d.date)))\n .y0(yScaleTotalTests(0))\n .y1(d => yScaleTotalTests(d.cumulative_test_positive))","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"areaDeaths = d3.area()\n .x(d => xScale(parseDate(d.date)))\n .y0(yScale(0))\n .y1(d => yScale(d.cumulative_deaths))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3093,"value":"lineHospital = d3.line()\n .x(d => xScale(parseDate(d.date)))\n .y(d => {\n if (d.cumulative_hospitalizations === \"unknown\") return yScale(0)\n else return yScale(d.cumulative_hospitalizations)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4113,"value":"lineICU = d3.line()\n .x(d => xScale(parseDate(d.date)))\n .y(d => {\n if (d.cumulative_intensive_care === \"unknown\") return yScale(0)\n else return yScale(d.cumulative_intensive_care)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1865,"value":"areaTotalTests = d3.area()\n .x(d => xScale(parseDate(d.date)))\n .y0(yScaleTotalTests(0))\n .y1(d => {\n if (showPercentOfTests) {\n return yScaleTotalTests(d.percent_positive_of_all_tests)\n }\n else {\n let cumulativeTestNegative = 0\n if (!isNaN(d.cumulative_test_negative)) cumulativeTestNegative = d.cumulative_test_negative\n return yScaleTotalTests(d.cumulative_test_positive + cumulativeTestNegative)\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"line = d3.line()\n .x(d => xScale(parseDate(d.date)))\n .y(d => yScale(d.cumulative_test_positive))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6901,"value":"lineDailyAvg = d3.line()\n .x(d => xScaleBar(parseDate(d.date)))\n .y(d => yScaleBar(d.daily_test_positive_avg))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1863,"value":"lineTotalTests = d3.line()\n .x(d => xScale(parseDate(d.date)))\n .y(d => {\n if (showPercentOfTests) {\n return yScaleTotalTests(d.percent_positive_of_all_tests)\n }\n else {\n let cumulativeTestNegative = 0\n if (!isNaN(d.cumulative_test_negative)) cumulativeTestNegative = d.cumulative_test_negative\n return yScaleTotalTests(d.cumulative_test_positive + cumulativeTestNegative)\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"minDate = d3.min(dataFromUrlByState.map(d => parseDate(d.date)))\n// minDate = parseDate('2020-09-01')","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"maxDate = d3.max(dataFromUrlByState.map(d => parseDate(d.date)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"maxDateExtended = d3.timeDay.offset(maxDate, 15)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5225,"value":"mutable selectedCounty = \"All Wisconsin\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6953,"value":"rollingAvgDayCount = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":2547,"value":"updateTime = \"2:00 pm\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"heightPositiveTestsGraph = width * 0.7","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"heightDailyPositiveGraph = width * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"heightTotalTestsGraph = width * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":2805,"value":"heightDailyTestsGraph = width * 0.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":2116,"value":"widthUnder400 = width < 640 ? true : false","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1754,"value":"titleStyleString = `\n font-family: \"Source Serif Pro\", \"Georgia\", sans-serif;\n ${widthUnder400 ? \"font-size: 12px\" : \"font-size: 24px\"};\n font-weight: 700;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1749,"value":"titleLocationStyleString = `\n font-family: \"Source Serif Pro\", \"Georgia\", sans-serif;\n ${widthUnder400 ? \"font-size: 12px\" : \"font-size: 24px\"};\n font-weight: 700;\n fill: ${baseColor};\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6650,"value":"parseDateFromApi = d3.timeParse(\"%Y%m%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6637,"value":"parseDateCsv = d3.timeParse(\"%Y/%m/%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"formatDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6988,"value":"perCapita = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"margin = ({\n \"top\": widthUnder400 ? 30 : 100,\n \"right\": widthUnder400 ? 23 : 32,\n \"bottom\": widthUnder400 ? 18 : 20,\n \"left\": widthUnder400 ? 0 : 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"baseColor = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"deathsColor = \"#C41B1B\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5140,"value":"strokeHighlightColor = \"#D800C2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3200,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"import {makeSelect, makeSliderWithValue} from \"@kemper/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3197,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}