2d:null 2e:["$","title",null,{"children":"Covid-19 derived chart | Fil | Observable"}] 33:T69b,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/). **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. Trend line labels are *not to be taken literally*. They are very likely *not* the best way to interpret these numbers, and do not take into account many important considerations. Trends should *not* be expected to follow forward at the same rate into the future. The data is also grouped in a format that might be easier to work with than the original format. A bookmark system allows to save any configuration as a link. _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!_ `34:T1fb5,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 dateDomain = d3.extent( series .map(d => d[1]) .flat() .filter(d => d[1][axisX] >= -10 * DAY), d => d[1][axisX] ); // return yield { dateDomain, series }; const isDateX = ["date", "daterelative"].includes(axisX), isDateY = ["date", "daterelative"].includes(axisY), per100kX = axisX.match(/100/), per100kY = axisY.match(/100/); const x = isDateX ? axisX === "date" ? d3.scaleTime().domain(dateDomain) : d3 .scaleLinear() .domain(dateDomain) .clamp(true) : d3[useLog ? "scaleLog" : "scaleLinear"]().domain([ per100kX ? 0.0001 : 1, d3.max(series, ([, s]) => Math.max(10, d3.max(s, ([, d]) => d[axisX])) ) ]), y = d3[useLog ? "scaleLog" : "scaleLinear"]().domain([ per100kY ? 0.0001 : 1, Math.max(10, d3.max(series, ([, s]) => d3.max(s, ([, d]) => d[axisY]))) ]); x.range([120, w - 100]); y.range([height - 90, 40]); const zero = y.invert(height - 50), // where to put our zeros on a log scale zeroAxis = y.invert(height - 30); // 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) ]); let transform = useLog ? Math.log10 : d => d; let pointsRaw = d[1].map(d => [ isDateX ? d[1][axisX] / DAY : transform(d[1][axisX] || zero), isDateY ? d[1][axisY] / DAY : transform(d[1][axisY] || zero) ]); if (useRegression) points = d3.regressionLinear()( points.slice( Math.max(0, points.length - 1 - regressionDelay - regressionPeriod), Math.max(0, points.length - regressionDelay) ) ); else if (smooth) { points = points.filter(d => d[1] < y(zero)); if (points.length > 4) { points = smoothPoints(points); line.curve(d3.curveMonotoneY); } } d.regression = d3.regressionLinear()( pointsRaw.slice( Math.max( 0, pointsRaw.length - 1 - regressionDelay - regressionPeriod ), Math.max(0, pointsRaw.length - regressionDelay) ) ); return line(points); }) .style("fill", "none") .style("stroke-width", 1.5) .style("stroke", d => color(groupBy === 'total' ? 1 : d[1][0][1][groupBy])); const circles = s .style("fill", d => color(groupBy === 'total' ? 1 : d[1][0][1][groupBy])) .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 => { const base = d[0] !== "Total" ? d[0].replace(/Mainland China:/, "").replace(/:$/, "") : label_region(); return axisY.match(/_daily/) ? base : `${base} ${ useRegression ? `${ isDateX && useLog ? (Math.log(2) / Math.log(10) / d.regression.a).toFixed(1) : d.regression.a.toFixed(1) } ${ useLog ? isDateX ? `days per 2x ${axisY}` : `10x ${axisY} per 10x ${axisX}` : isDateX ? `${axisY} per day` : `${axisY} per ${axisX}` }` : '' }`; }) .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(groupBy === 'total' ? 1 : d[1][0][1][groupBy])); 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(","), logTickFormat = d => Math.log10(d) - Math.floor(Math.log10(d)) === 0 ? formatN(d) : ""; if (useLog) { axisL.tickFormat(logTickFormat); if (!isDateX) axisB.tickFormat(logTickFormat); } if (axisX === "daterelative") axisB.tickFormat(d => Math.round(+d / DAY)); axis .append("g") .call(axisB) .attr("transform", `translate(0, ${y(zeroAxis)})`) .append("text") .text(isDateX ? 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(axisY.match(/_daily/) ? axisY : `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()); if (isDateX) { const eventsG = svg .append("g") .selectAll("g") .data(axisX === "daterelative" ? relativeevents : events) .join("g"); eventsG .append('line') .attr('x1', d => x(d.date)) .attr('x2', d => x(d.date)) .attr('y1', d => y(zeroAxis)) .attr('y2', d => y(y.domain()[1])) .style('stroke', '#aaa') .style('stroke-width', 1); eventsG .append('text') .text(d => d.name) .attr('x', 4) .attr('y', -4) .attr( 'transform', d => `translate(${x(d.date)},${y(zeroAxis)})rotate(-90)` ) .style('fill', '#aaa'); } // tooltip 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(event) { const m = d3.pointer(event), i = delaunay.find(...m), dist = Math.hypot(m[0] - xy[i][0], m[1] - xy[i][1]), d = circles.data()[i]; if (dist < 30) tooltip.attr("transform", `translate(${xy[i]})`).call( callout, `${groupBy === 'total' ? 'Total' : d[1][groupBy]} ${d[0]} c: ${numformat(d[1].confirmed)} d: ${numformat(d[1].deaths)}` ); else tooltip.call(callout, null); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); }35:T55a,allSeries = { const maxDate = d3.timeFormat("%Y-%m-%d")(Date.now()); return d3 .rollups( data.filter(d => d.ymd <= maxDate), v => { const confirmed_daily = d3.sum(v.filter(d => d.type === "confirmed"), d => d.cases) || 0, deaths_daily = d3.sum(v.filter(d => d.type === "death"), d => d.cases) || 0, 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, pop100k = groupBy === 'country' ? (population.has(v[0].country) ? population.get(v[0].country).pop2019 : 1e8) /* arbitrary value for bad data */ / 100000 : Infinity; return { confirmed, deaths, recovered, confirmed_daily, deaths_daily, "confirmed per 100k": confirmed / pop100k, "deaths per 100k": deaths / pop100k, country: v[0].country, province: v[0].province, ymd: v[0].ymd, date: parseDate(v[0].ymd) }; }, d => (groupBy === 'total' ? 'Total' : d[groupBy]), d => d.ymd ) .reverse(); }36:[{"id":"40f6dff6ec797b47ed68cb9995fa5f232cf4d6be428f012e5ae879564637f67793c34a63cc56bdb3dceddff75ed9731b9d15f1f7b4c7b51a2338b1adffc2ac0d","href":"https://static.observableusercontent.com/files/40f6dff6ec797b47ed68cb9995fa5f232cf4d6be428f012e5ae879564637f67793c34a63cc56bdb3dceddff75ed9731b9d15f1f7b4c7b51a2338b1adffc2ac0d","name":"population.csv","type":"text/csv","lastModified":1584957438187.687,"size":13015}] 31:{"id":"b6d5370c0863b90e","slug":"covid-19-derived-chart","title":"Covid-19 derived chart","thumbnail":null,"access_level":"public","create_time":"$D2020-03-04T08:15:34.925Z","update_time":"$D2026-05-23T20:15:15.674Z","view_time":null,"first_public_time":"$D2020-03-05T20:22:56.331Z","has_unpublished_edits":null,"fork":false,"stars":33,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":1169,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[{"id":"4a401c0e4afe8a8e","reply_to_id":null,"content":"What is this RuntimeError about?","create_time":"$D2021-11-04T20:22:25.456Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}},{"id":"fc10139495de9606","reply_to_id":"4a401c0e4afe8a8e","content":"I was using callout from https://observablehq.com/@d3/line-with-tooltip@260 but it disappeared when we refactored. It's fixed now. Thanks for telling me!","create_time":"$D2021-11-04T21:16:52.286Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":25,"collection":{"id":"e7cc41ec60819d92","slug":"coronavirus","title":"Coronavirus","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Covid-19 derived chart","cells":[{"id":657,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"chart({ axisX, axisY, groupBy, useLog })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"html`

\n\n${viewof useRegression}\n${viewof regressionPeriod}\n${viewof regressionDelay}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"md`

\n${viewof smooth} ${viewof smoothGaussian}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"md`

\n\n${viewof countryFilter}\n${viewof populationThreshold}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"md`_ The following slider (based on [John Burn-Murdoch](https://twitter.com/jburnmurdoch)’s original idea) plots the charts with a date relative to the day a country had *x* deaths._\n\n${viewof thresholdLog10}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"bookmark.create({\n countryFilter,\n axisX,\n axisY,\n groupBy,\n useLog,\n showPoints,\n useRegression,\n regressionPeriod,\n regressionDelay,\n deathsThreshold: Math.round(10 ** thresholdLog10),\n populationThreshold,\n smooth,\n smoothGaussian\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"md`\n\n_Thanks to [@jeffbaumes](/@jeffbaumes) for the following additions & suggestions:_\n- Trend line interpretation text\n- Historical trend line\n- Filter by country & min. population\n- Group by total\n- Values per 100k population (available only for the “country” grouping)\n\n_Thanks to [Michael Shafir](/@mshafir/covid-19-derived-chart) for the suggestion to filter by country and groups of countries._\n\n_Thanks to the [visionscarto](/@visionscarto) team for more great suggestions._\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { data as rawData } from \"@fil/ncov2019-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"data = rawData\n .filter(\n d =>\n countryFilter.includes(\"All\") ||\n countryFilter.length === 0 ||\n (countryFilter.includes(\"Outside China\") && d.country !== 'China') ||\n countryFilter.includes(d.country) ||\n (population.has(d.country) &&\n (countryFilter.includes(population.get(d.country).continentalRegion) ||\n countryFilter.includes(population.get(d.country).statisticalRegion)))\n )\n .filter(\n d =>\n !(+populationThreshold > 0) ||\n (population.has(d.country) &&\n population.get(d.country).pop2019 > +populationThreshold * 1e6)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"countries = rawData.map(d => d.country).filter((value, index, self) => self.indexOf(value) === index).sort();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"md`_Population & Region Data_\n\nextracted from Wikipedia and matched to the list of country names in the COVID dataset by [Jeff Baumes](/@jeffbaumes):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"population = FileAttachment(\"population.csv\")\n .text()\n .then(d3.csvParse)\n .then(data => new Map(data.map(d => [d.country, d])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"regions = [\n ...new Set(\n [...population.values()]\n .map(d => [d.continentalRegion, d.statisticalRegion])\n .flat()\n )\n].filter(d => d)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"dateThreshold = new Map(\n allSeries\n .map(d => [\n d[0],\n d3.min(d[1].filter(e => e[1].deaths >= threshold), e => e[1].date)\n ])\n .filter(d => d[1])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"series = {\n const series = allSeries.filter(d => dateThreshold.has(d[0]));\n\n for (const d of series) {\n d[1] = d[1].map(e => {\n e[1].daterelative = e[1].date - +dateThreshold.get(d[0]);\n return e;\n });\n }\n\n return series;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"events = [\n {\n name: 'WHO declares pandemic',\n date: parseDate('2020-03-11')\n }\n /*,\n {\n name: 'US declares national emergency',\n date: parseDate('2020-03-13'),\n },*/\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"relativeevents = [\n {\n name: 'Relative date reference',\n date: 0\n }\n /*,\n {\n name: 'US declares national emergency',\n date: parseDate('2020-03-13'),\n },*/\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"// Total\nfunction label_region() {\n return countryFilter.includes(\"All\") ? \"Total\" : countryFilter.join(\", \");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`## Inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"viewof countryFilter = select({\n options: [\n \"All\",\n /* \"Outside China\", */\n \"——————\",\n ...regions,\n \"——————\",\n ...countries\n ],\n value: preset.countryFilter || [\"All\"],\n description: \"Countries\",\n multiple: true,\n size: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof axisX = select({\n options: [\n \"date\",\n \"daterelative\",\n \"confirmed\",\n \"deaths\",\n \"recovered\",\n \"confirmed per 100k\",\n \"deaths per 100k\"\n ],\n value: preset.axisX || (threshold ? \"daterelative\" : \"date\"),\n description: \"X dimension\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof axisY = select({\n options: [\n \"confirmed\",\n \"deaths\",\n \"recovered\",\n \"confirmed_daily\",\n \"deaths_daily\",\n \"confirmed per 100k\",\n \"deaths per 100k\"\n ],\n value: preset.axisY || \"deaths\",\n description: \"Y dimension\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof groupBy = select({\n options: [\"country\", \"province\", \"total\"],\n value: preset.groupBy || \"country\",\n description: \"group by\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"viewof useLog = checkbox({\n options: [\"Use log scales\"],\n value: preset.useLog || false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"viewof showPoints = checkbox({\n options: [\"Show points\"],\n value: preset.showPoints === false ? false : [\"Show points\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"viewof useRegression = checkbox({\n options: [\"Trend lines\"],\n value: preset.useRegression ? [\"Trend lines\"] : []\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"viewof regressionPeriod = slider({\n min: 3,\n max: 30,\n value: preset.regressionPeriod || 0,\n step: 1,\n description: \"Days\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"viewof regressionDelay = slider({\n min: 0,\n max: 30,\n value: preset.regressionDelay||0,\n step: 1,\n description: \"Days from latest\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"viewof thresholdLog10 = slider({\n min: -.5,\n max: Math.log10(300),\n value: Math.log10(preset.deathsThreshold) || -.5,\n step: 0.01,\n format: v => `${Math.round(10 ** v)}`,\n description: \"align on deaths #\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"viewof populationThreshold = select({\n options: [\"—\", \"100\", \"50\", \"20\", \"10\", \"5\", \"1\"],\n value: preset.populationThreshold || \"—\",\n description: \"Population threshold (millions)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"threshold = Math.round(10 ** thresholdLog10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"// (with smooth=3, you get a moving average from 3 days before to 3 days after)\nviewof smooth = slider({\n description: \"smooth over x days (moving average)\",\n value: preset.smooth || 0,\n min: 0,\n step: 1,\n max: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"viewof smoothGaussian = checkbox({\n options: [\"gaussian kernel\"],\n value: preset.smoothGaussian && [\"gaussian kernel\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"md`## Bookmark`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"import { bookmark } from \"@severo/bookmark\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"preset = bookmark.read()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"color = (groupBy,\nd3.scaleOrdinal(\n d3.schemeCategory10.concat(d3.schemeSet2).concat(d3.schemeDark2)\n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"DAY = 8.64e7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\", \"d3-regression@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"import { checkbox, select, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"import { occlusion } from \"@fil/occlusion\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"// import { callout } from \"@d3/line-chart-with-tooltip\"\ncallout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call((text) =>\n text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .text((d) => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\n \"d\",\n `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"import { movingAverage } from \"@d3/moving-average\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"precision = 1e-4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"function applyKernel(points, w) {\n const values = new Float64Array(points.length).fill(0),\n total = new Float64Array(points.length).fill(0);\n let p = 1;\n for (let d = 0; p > precision; d++) {\n p = w(d);\n for (let i = 0; i < points.length; i++) {\n if (i + d < points.length) {\n values[i + d] += p * points[i];\n total[i + d] += p;\n }\n if (i - d >= 0) {\n values[i - d] += p * points[i];\n total[i - d] += p;\n }\n }\n }\n for (let i = 0; i < values.length; i++) {\n values[i] /= total[i];\n }\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"function smoothPoints(points) {\n if (smoothGaussian) {\n const w = d => Math.exp(-((d / smooth) ** 2));\n const mm = applyKernel(points.map(d => d[1]), w);\n points = points.map((d, i) => [d[0], mm[i]]).filter(d => d[1]);\n } else {\n const mm = movingAverage(points.map(d => d[1]), 2 * smooth + 1);\n points = points.map((d, i) => [d[0], mm[i + smooth]]).filter(d => d[1]);\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"