31:T682,md`# Covid-19 derived chart This notebook intends to offer a complementary view on the global number of cases of Covid-19 infection published daily by [Johns Hopkins’ CSSE](https://systems.jhu.edu/). **Filter**. This notebook has a hardcoded filter to show some western countries familiar to American readers. (Why hardcoded? Because I'm at work and don't have time to learn the right way to do multiselect right now.) **Scale**. By using a logarithmic scale, we can visualize more countries—even if they are to this day less infected than the province of Hubei, China whence the epidemics originated. **Coordinates system**. By setting the *x* and *y* dimensions to something else than _confirmed cases_ vs _time_, we can compare the countries’ (or provinces’) trajectories in a different space. For example, while Italy and Iran presented roughly the same numbers of cases and deaths on March 3rd, the dynamics of the infection were clearly following different patterns. **Trend lines** help limit the clutter and focus on the current dynamics in each country. *These trends are not to be taken as a model that would persist in the future.* The data is also grouped in a format that might be easier to work with than the original format. _This notebook was prepared for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/), which researches (among other things) visualisation tools for cumulative data. Comments and suggestions welcome!_`32:T17cc,chart = function*(options) { options = options || {}; const w = options.width || width, height = options.height || w * 0.7, axisX = options.axisX || "date", axisY = options.axisY || "confirmed", groupBy = options.groupBy || "country", useLog = options.useLog || false; 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 series = d3 .rollups( data.filter(d => d.ymd <= maxDate).filter(d => d.country == "Italy" || d.country == "US" || d.country == "Sweden" || d.country == "Russia" || d.country == "Argentina" || d.country == "India" || d.country == "Brazil"), //data.filter(d => d.ymd <= maxDate), 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, recovered: d3.sum(v.filter(d => d.type === "recovered"), d => d.total) || 0, country: v[0].country, province: v[0].province, ymd: v[0].ymd, date: parseDate(v[0].ymd) }), d => d[groupBy], d => d.ymd ) .reverse(); const x = axisX === "date" ? d3.scaleTime().domain(d3.extent(data, d => d.date)) : d3[useLog ? "scaleLog" : "scaleLinear"]().domain([ 1, d3.max(series, ([, s]) => d3.max(s, ([, d]) => d[axisX])) ]), y = d3[useLog ? "scaleLog" : "scaleLinear"]().domain([ 1, d3.max(series, ([, s]) => d3.max(s, ([, d]) => d[axisY])) ]); x.range([120, w - 100]); y.range([height - 90, 40]); const zero = .6, // where to put our zeros on a log scale zeroAxis = .4; // where to put the axis const line = d3.line().curve(d3.curveMonotoneY); const s = svg .selectAll("g") .data(series) .join("g"); const lines = s .append("path") .attr("d", d => { let points = d[1].map(d => [ x(d[1][axisX] || zero), y(d[1][axisY] || zero) ]); 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].country)); const circles = s .style("fill", d => color(d[1][0][1].country)) .selectAll("circle") .data(d => (showPoints ? d[1] : [])) .join("circle"); circles .attr("r", 2.5) .attr("cx", d => x(d[1][axisX] || zero)) .attr("cy", d => y(d[1][axisY] || zero)); const labels = svg.append("g"); labels .selectAll("text") .data(series) .join("text") .text(d => d[0].replace(/Mainland China:/, "").replace(/:$/, "")) .attr( "transform", d => `translate(${x(d[1][d[1].length - 1][1][axisX] || zero)},${y( d[1][d[1].length - 1][1][axisY] || zero ) - 5})` ) .attr("text-anchor", "middle") .attr("dx", -6) .attr("dy", -4) .style("fill", d => color(d[1][0][1].country)); labels.call(occlusion); // try a few times to move occluded labels down their lines // gives them a second chance at finding a spot for (let i = 1; i < 14; i++) { labels .selectAll(".occluded") .classed("occluded", false) .attr("transform", d => { const b = d[1].slice(-i)[0]; if (b) return `translate(${x(b[1][axisX] || zero)},${y( b[1][axisY] || zero )})`; }); 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][groupBy]} ${d[0]} c: ${numformat(d[1].confirmed)} d: ${numformat(d[1].deaths)} r: ${numformat( d[1].recovered )}` ); else tooltip.call(callout, null); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); }33:[] 2f:{"title":"Covid-19 derived chart","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"html`

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

\n\n${viewof axisX}\n${viewof axisY}\n${viewof groupBy}\n${viewof useLog}\n${viewof showPoints}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"html`

\n\n${viewof useRegression}\n${viewof regressionPeriod}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"chart({ axisX, axisY, groupBy, useLog })","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"md`_Given no options, the chart defaults to a line chart of confirmed cases, grouped by country:_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"chart()","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"md`## Data\n\nThe dataset is fetched directly from Johns Hopkins’ CSSE [dashboard](https://gisanddata.maps.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6) github repo. This notebook makes of course no claim re: the accuracy of the numbers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { data } from \"@fil/ncov2019-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`## Inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof axisY = select({\n options: [\"confirmed\", \"deaths\", \"recovered\"],\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\", \"recovered\"],\n value: \"date\",\n description: \"X dimension\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof groupBy = select({\n options: [\"country\", \"province\"],\n description: \"group by\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"viewof useLog = checkbox({\n options: [\"Use log scales\"],\n value: [\"Use log scales\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"viewof showPoints= checkbox({\n options: [\"Show points\"],\n value: [\"Show points\"]\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 = Scrubber(d3.range(21), {\n autoplay: false,\n loop: false,\n alternate: true,\n delay: 700,\n format: () => \"delay\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"color = (groupBy,\nd3.scaleOrdinal(\n d3.schemeCategory10.concat(d3.schemeAccent).concat(d3.schemeDark2)\n))","pinned":true,"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"},{"id":621,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}