30:T164c,chart = function*() { const w = Math.max(width, 700); const height = w * 0.6; const color = d3.scaleOrdinal(d3.schemeTableau10); const svg = d3 .create("svg") .attr("class", "chart") .attr("viewBox", [0, 0, w, height]); yield svg.node(); const maxDate = d3.timeFormat("%Y-%m-%d")( new Date(Date.now() - 24 * 3600 * 1000 * regressionDelay) ); const filteredData = data .filter(d => d.ymd >= "2020-01-22") .filter(d => d.ymd <= maxDate); const series = d3 .rollups( filteredData, v => ({ confirmed: d3.sum(v.filter(d => d.type === "confirmed"), d => d.total) || 0, deaths: d3.sum(v.filter(d => d.type === "death"), d => d.total) || 0, region: v[0].region, province: v[0].province, ymd: v[0].ymd, date: parseDate(v[0].ymd) }), d => d.region, d => d.ymd, );; const zero = .6; // where to put our zeros on a log scale const zeroAxis = .4; // where to put the axis for (const s of series) { const days = s[1]; for (let i = 0; i < days.length; i++) { const day = days[i][1]; day.x = day[axisX] || zero; day.y = day[axisY] || zero; } } const filteredSeries = series .filter(s => s[0] !== "World") .sort((a, b) => b[1].slice(-1)[0][1].y - a[1].slice(-1)[0][1].y) .slice(0, numberOfRegions); const axisScale = useLog ? d3.scaleLog() : d3.scaleLinear(); const xDomain = [1, d3.max(filteredSeries, ([, s]) => d3.max(s, ([, d]) => d.x))]; const yDomain = [1, d3.max(filteredSeries, ([, s]) => d3.max(s, ([, d]) => d.y))]; const x = axisX === "date" ? d3.scaleTime().domain(d3.extent(filteredData, d => d.date)) : axisScale.copy().domain(xDomain); const y = axisScale.copy().domain(yDomain); const margin = width / 20; x.range([margin + 25, w - margin]); y.range([height - margin - 20, margin]); const line = d3.line().curve(d3.curveMonotoneY); const s = svg .selectAll("g") .data(filteredSeries) .join("g"); const lines = s .append("path") .attr("d", d => { let points = d[1].map(d => [ x(d[1].x), y(d[1].y) ]); if (useRegression) points = d3.regressionLinear()( points.slice( Math.max(0, points.length - 1 - regressionPeriod), Math.max(0, points.length) ) ); return line(points); }) .style("fill", "none") .style("stroke-width", 1.5) .style("stroke", d => color(d[1][0][1].region)); const circles = s .style("fill", d => color(d[1][0][1].region)) .selectAll("circle") .data(d => d[1]) .join("circle"); circles .attr("r", useRegression ? 2.5 : 0) .attr("cx", d => x(d[1].x)) .attr("cy", d => y(d[1].y)); const labels = svg.append("g"); labels .selectAll("text") .data(filteredSeries) .join("text") .text(d => d[0] .replace("Korea, South", "South Korea") ) .classed("occluded", true) .attr("text-anchor", "end") .attr("dx", -5) .attr("dy", -4) .style("fill", d => color(d[1][0][1].region)); for (let i = 1; i < 50; i += 5) { labels .selectAll(".occluded") .classed("occluded", false) .attr("transform", d => { const b = d[1].slice(-i)[0]; if (b) return `translate(${x(b[1].x)},${y(b[1].y)})`; }); labels.call(occlusion); } const axis = svg.append("g"); const axisB = d3.axisBottom(x), axisL = d3.axisLeft(y); const formatN = d3.format(",d"), logTickFormat = d => (String(d)[0] === "1" ? formatN(d) : ""); if (useLog) { axisL.tickFormat(logTickFormat); if (axisX !== "date") axisB.tickFormat(logTickFormat); } axis .append("g") .call(axisB) .attr("transform", `translate(0, ${y(zeroAxis)})`) .append("text") .text(axisX === "date" ? axisX : `cumulative ${axisX}`) .attr("fill", `currentColor`) .attr("text-anchor", `end`) .attr("transform", `translate(${x.range()[1]}, ${-2})`); axis .append("g") .call(axisL) .attr("transform", `translate(${x.range()[0] - 30}, 0)`) .append("text") .text(`cumulative ${axisY}`) .attr("fill", `currentColor`) .attr("text-anchor", `start`) .attr("transform", `translate(${2}, ${y.range()[1]})`); const grid = svg.insert("g", "g"); grid .append("g") .call(axisL) .call(g => g .selectAll(".tick line") .attr("x2", x.range()[0]) .attr("x1", x.range()[1]) .style("stroke", "#ddd") .style("stroke-width", .5) ) .call(g => g.selectAll(".domain,text").remove()); grid .append("g") .call(axisB) .call(g => g .selectAll(".tick line") .attr("y2", y.range()[0]) .attr("y1", y.range()[1]) .style("stroke", "#ddd") .style("stroke-width", .5) ) .call(g => g.selectAll(".domain,text").remove()); const tooltip = svg.append("g"), xy = []; circles.each(function() { xy.push([+this.getAttribute("cx"), +this.getAttribute("cy") + 2]); }); const delaunay = d3.Delaunay.from(xy); const numformat = d3.format(",d"); svg.on("touchmove mousemove", function() { const m = d3.mouse(this), i = delaunay.find(...m), dist = Math.hypot(m[0] - xy[i][0], m[1] - xy[i][1]), d = circles.data()[i]; if (dist < 10) tooltip.attr("transform", `translate(${xy[i]})`).call( callout, `${d[1].region} ${d[0]}\nc: ${numformat(d[1].confirmed)} d: ${numformat(d[1].deaths)}` ); else tooltip.call(callout, null); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); }31:[] 2e:{"title":"Coronavirus Trends (COVID-19)","cells":[{"id":636,"value":"md`# Coronavirus Trends (COVID-19)\n\nYouTube recommendation: [\"Exponential growth and epidemics\" by 3Blue1Brown](https://www.youtube.com/watch?v=Kas0tIxDvrg)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"html`

\n\n${viewof axisX}\n${viewof axisY}\n${viewof useLog}\n${viewof numberOfRegions}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"html`

\n\n${viewof useRegression}\n${viewof regressionPeriod}\n${viewof regressionDelay}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"html`

\n\n${viewof dataSource}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"md`## Thanks\nThanks to https://observablehq.com/@fil for the initial data import and graph.\n\n## Data\nThe dataset is fetched directly from various sources. This notebook makes no claims regarding the accuracy of the numbers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {\n dataGlobal as data1Global,\n dataUS as data1US,\n} from \"@neelance/johns-hopkins-csse-covid-19\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"import { data as data2 } from \"@neelance/ourworldindata-org-covid-19\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"import { data as data3 } from \"@neelance/the-new-york-times-covid-19\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"import { data as data4 } from \"@neelance/rki-covid-19-in-germany\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":737,"value":"md`### Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"viewof dataSource = select({\n options: [\n \"Johns Hopkins CSSE (Global)\",\n \"Our World in Data (Global)\",\n \"Johns Hopkins CSSE (US)\",\n \"The New York Times (US)\",\n \"Robert Koch Institute (Germany)\",\n ],\n value: \"Johns Hopkins CSSE (Global)\",\n description: \"data source\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":807,"value":"data = ({\n \"Johns Hopkins CSSE (Global)\": data1Global,\n \"Our World in Data (Global)\": data2,\n \"Johns Hopkins CSSE (US)\": data1US,\n \"The New York Times (US)\": data3,\n \"Robert Koch Institute (Germany)\": data4,\n})[dataSource]","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof axisY = select({\n options: [\"confirmed\", \"deaths\"],\n value: \"confirmed\",\n description: \"Y dimension\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"viewof axisX = select({\n options: [\"date\", \"confirmed\", \"deaths\"],\n value: \"date\",\n description: \"X dimension\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":762,"value":"viewof numberOfRegions = slider({\n min: 10,\n max: 30,\n value: 10,\n step: 1,\n description: \"number of regions\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"viewof useLog = checkbox({\n options: [\"Use logarithmic scales\"],\n value: [\"Use logarithmic scales\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"viewof useRegression = checkbox({\n options: [\"Trend lines\"],\n value: []\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"viewof regressionPeriod = slider({\n min: 3,\n max: 20,\n value: 0,\n step: 1,\n description: \"number of days past\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"viewof regressionDelay = slider({\n min: 0,\n max: 20,\n value: 0,\n step: 1,\n description: \"delay\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`### Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-delaunay@5\", \"d3-regression\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"import { checkbox, select, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"import { occlusion } with { d3 } from \"@fil/occlusion\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}