32:T451,{ let colors = ""; if (category == "region") { for (let i = 0; i < regions.length; i++) { i < regions.length - 1 ? (colors = colors + `✦ ${ regions[i] }, `) : (colors = colors + ` and ✦ ${ regions[i] }`); } return md`The chart is arranged into **regions** from West to East, with the U.S. pulled out to make trends easier to see. Here's the color scheme: ${colors}.`; } else if (category == "country") { for (let i = 0; i < codesHighlight.length; i++) { colors = colors + `✦ ${ d3.group(crosswalk, d => d["iso"]).get(codesHighlight[i])[0]["geo"] }, `; } return md`The chart is arranged into **countries**, with a few highlighted to show trends. Here's the color scheme: ${colors} and the rest are ✦.`; } }33:T84c,streamgraph = { // Create the svg container: const svg = d3 .create("svg") .attr("viewBox", [0, 0, dms.width, dms.height]) .attr("width", dms.width) .attr("height", dms.height) .style("background", "white"); const chart = svg .append("g") .attr("transform", `translate(${dms.marginLeft} ${dms.marginTop})`); // Add axes: const axisLeft = d3 .axisLeft(y) .ticks(10) .tickSize(-dms.chartWidth); chart .append("g") .attr("class", "axis") .call(axisLeft) .call(g => g.select(".domain").remove()) .call(g => g .selectAll(".tick text") .attr("x", 0) .attr("dy", -4) .attr("text-anchor", "start") ) .call(g => g.selectAll(".tick line").attr("stroke", "lightgray")); // Add streams: chart .append("g") .selectAll("path") .data(dataSeries) .join("path") .attr("d", area) .attr("fill", d => { if (category == "country") { return codesHighlight.indexOf(d["key"]) >= 0 ? color(d["key"]) : colorsGray; } else { return color(d["key"]); } }) .attr("class", d => "stream stream" + d["key"].split(" ").join("")) .on("mousemove", hover) .on("mouseleave", leave); const annotation = chart.append("g").attr("class", "annotation"); annotation.append("path").attr("pointer-events", "none"); annotation .append("text") .attr("class", "annotation annotation__date") .attr("x", 0) .attr("dy", -4) .attr("text-anchor", "start") .attr("font-size", "10px") .attr("font-family", "sans-serif"); annotation .append("text") .attr("class", "annotation annotation__data") .attr("x", dms.chartWidth) .attr("dy", -4) .attr("text-anchor", "end") .attr("font-size", "10px") .attr("font-family", "sans-serif"); annotation .append("text") .attr("class", "annotation annotation__country") .attr("x", dms.chartWidth) .attr("dy", 10) .attr("text-anchor", "end") .attr("font-size", "10px") .attr("font-family", "sans-serif"); return svg.node(); }34:T503,dataDeathsRolling = { const byCountry = d3.groups(data, d => d["iso"]); const byCountryWithAverages = byCountry.map(elem => { const allDays = elem[1]; const allDaysWithDaily = []; for (let i = 0; i < allDays.length; i++) { if (i > 0) { allDays[i].deathsDaily = allDays[i]["deaths"] - allDays[i - 1]["deaths"]; allDaysWithDaily.push(allDays[i]); } else { allDays[i].deathsDaily = allDays[i]["deaths"]; allDaysWithDaily.push(allDays[i]); } } const days = 14; const allDaysWithAverage = []; for (let i = 0; i < allDays.length; i++) { let daysTemp; if (i < days) { daysTemp = i; } else { daysTemp = days; } let numbersForAverage = []; for (let j = 0; j <= daysTemp; j++) { numbersForAverage.push(d3.max([allDays[i - j]["deathsDaily"], 0])); } allDays[i].deathsAvg = d3.sum(numbersForAverage) / numbersForAverage.length; allDaysWithAverage.push(allDays[i]); } return allDaysWithAverage; }); return d3 .merge(byCountryWithAverages) .sort( (a, b) => d3.ascending(timeParser(a["date"]), timeParser(b["date"])) || d3.ascending(a["country"], b["country"]) ); }35:[{"id":"b39349a352cf0f048514001ce932254f7df2572176b1c469fe235def2697b1d4e1388e5b5395a8c5fa9e46764f5ac2e94c6b1cd1f634bbe5db6ac9e5106583ed","href":"https://static.observableusercontent.com/files/b39349a352cf0f048514001ce932254f7df2572176b1c469fe235def2697b1d4e1388e5b5395a8c5fa9e46764f5ac2e94c6b1cd1f634bbe5db6ac9e5106583ed","name":"world-daily-historical-combined (3).csv","type":"text/csv","lastModified":1602271121329.469,"size":2593583},{"id":"f9d55009970191b0b79e2cb5a498561cb0daae583048d66ea6e027535b76be63481d5f13af52610ecd8bbae9eb4b83fb88a6c52a2d5adb8f87e005932456a0ad","href":"https://static.observableusercontent.com/files/f9d55009970191b0b79e2cb5a498561cb0daae583048d66ea6e027535b76be63481d5f13af52610ecd8bbae9eb4b83fb88a6c52a2d5adb8f87e005932456a0ad","name":"backfill.csv","type":"text/csv","lastModified":1601241611499.451,"size":437331},{"id":"5a40cab569f31539b71b02a23e6cd46b22685751b5bfe602b4d3e17cce4e4ce93a4538111ff4a0195cf8f7ba129da3cc8bc3bd132c52614db76eb12910fb1681","href":"https://static.observableusercontent.com/files/5a40cab569f31539b71b02a23e6cd46b22685751b5bfe602b4d3e17cce4e4ce93a4538111ff4a0195cf8f7ba129da3cc8bc3bd132c52614db76eb12910fb1681","name":"CrosswalkContinents-style-1.csv","type":"text/csv","lastModified":1601052152843.806,"size":5447},{"id":"a8ecc2bfc1f4824489c4d0478aa99884a805f308e11cdb3a3c29d1070636107abb8c73a2635b792ac722c51ca966c82cd91dcbcaa792db22c8328a45df33850b","href":"https://static.observableusercontent.com/files/a8ecc2bfc1f4824489c4d0478aa99884a805f308e11cdb3a3c29d1070636107abb8c73a2635b792ac722c51ca966c82cd91dcbcaa792db22c8328a45df33850b","name":"world-daily-historical-combined@1.csv","type":"text/csv","lastModified":1601302638279.62,"size":2462641},{"id":"ef8a93748e60d5a8a012fc95c6aadbaaafec4d628e2206dcfaad160d8210e0f54616a8bdfe9827900aa5d51a7ff3f14557822f4cb65d73416cb5fccb00347182","href":"https://static.observableusercontent.com/files/ef8a93748e60d5a8a012fc95c6aadbaaafec4d628e2206dcfaad160d8210e0f54616a8bdfe9827900aa5d51a7ff3f14557822f4cb65d73416cb5fccb00347182","name":"world-daily-historical-combined (4).csv","type":"text/csv","lastModified":1603143772083.56,"size":2713174},{"id":"a2fcbb5e02536a3bbd54e6c24bcb763bc7e8df47f132915d3660eb01741e0de9f850919b56e09a4a761b4ab8561338d15c2bca7a98da6b2ff40e08aa2512681f","href":"https://static.observableusercontent.com/files/a2fcbb5e02536a3bbd54e6c24bcb763bc7e8df47f132915d3660eb01741e0de9f850919b56e09a4a761b4ab8561338d15c2bca7a98da6b2ff40e08aa2512681f","name":"world-daily-historical-combined@2.csv","type":"text/csv","lastModified":1601343924488.44,"size":2462641},{"id":"c915355c5485df27a86204e530b6a7e144b56f49ee84126bfc0322311530d667f561b3b915956ebb854f4ac8baccaa1f13f67cfb4466a48cf765d0896f3f03e5","href":"https://static.observableusercontent.com/files/c915355c5485df27a86204e530b6a7e144b56f49ee84126bfc0322311530d667f561b3b915956ebb854f4ac8baccaa1f13f67cfb4466a48cf765d0896f3f03e5","name":"world-daily-historical-combined (1).csv","type":"text/csv","lastModified":1601517667865.884,"size":2486436},{"id":"892beb5fafe0013e9f8f755723166e59145500e53269579a416bb5a114e499d921d1b914f493b1badf857561463d5c9cf3f64e00ccbe50e97cf76e3c68f6eec2","href":"https://static.observableusercontent.com/files/892beb5fafe0013e9f8f755723166e59145500e53269579a416bb5a114e499d921d1b914f493b1badf857561463d5c9cf3f64e00ccbe50e97cf76e3c68f6eec2","name":"world-daily-historical-combined(1).csv","type":"text/csv","lastModified":1606083337337.23,"size":3123386},{"id":"12a104a4be9b4516ccfc04eda2c536a9f4195545c41e6e6dcb1ee33276482681cf1373a7ae53f594f496e5473df48146bfb22919bdee26709c4e0f51ac9e3229","href":"https://static.observableusercontent.com/files/12a104a4be9b4516ccfc04eda2c536a9f4195545c41e6e6dcb1ee33276482681cf1373a7ae53f594f496e5473df48146bfb22919bdee26709c4e0f51ac9e3229","name":"world-daily-historical-combined (5).csv","type":"text/csv","lastModified":1603953277394.431,"size":2833087},{"id":"10f6d4e140ca27c7c38706dd1cdf3ca1c413c0a08fc7fe640f9c002710fd552574243fff1bc18f69aff645606ecf784e20ffd46f64d054f284a9f231f1a127bd","href":"https://static.observableusercontent.com/files/10f6d4e140ca27c7c38706dd1cdf3ca1c413c0a08fc7fe640f9c002710fd552574243fff1bc18f69aff645606ecf784e20ffd46f64d054f284a9f231f1a127bd","name":"world-daily-historical-combined@4.csv","type":"text/csv","lastModified":1608166271161.683,"size":3360434},{"id":"4aec008f0b5b8575ed487a587dde107f8b14bf320e10f263b2a0a85bb7e22f0ed94537a02ab5f4ff6f20c7ad122922c733341ffe2eb55ff365180acae89942bd","href":"https://static.observableusercontent.com/files/4aec008f0b5b8575ed487a587dde107f8b14bf320e10f263b2a0a85bb7e22f0ed94537a02ab5f4ff6f20c7ad122922c733341ffe2eb55ff365180acae89942bd","name":"world-daily-historical-combined (1)@1.csv","type":"text/csv","lastModified":1608755680162.66,"size":3444332},{"id":"c9a97c04c04986aa4a95011ae54aead6417b45584d8cb56d765794f0328381aae76db1ba7796835fa4fe656a5b61a68dd9c81e74b8db7cbbe833ed68ea3dc50e","href":"https://static.observableusercontent.com/files/c9a97c04c04986aa4a95011ae54aead6417b45584d8cb56d765794f0328381aae76db1ba7796835fa4fe656a5b61a68dd9c81e74b8db7cbbe833ed68ea3dc50e","name":"world-daily-historical-combined@5.csv","type":"text/csv","lastModified":1610207192454.367,"size":3648347},{"id":"4344968c41f4cbb3dcf5197a8f7886c603e47ad14787eb95f038611d2a6c9096fcf2830bcafbcf18a2b8665521655c43e71148de11f46d27af64e99dcea76727","href":"https://static.observableusercontent.com/files/4344968c41f4cbb3dcf5197a8f7886c603e47ad14787eb95f038611d2a6c9096fcf2830bcafbcf18a2b8665521655c43e71148de11f46d27af64e99dcea76727","name":"world-daily-historical-combined (1)@2.csv","type":"text/csv","lastModified":1614128334056.553,"size":4697176},{"id":"a5f777985e74b32d7483aa3202b52ac307c7239441342772cbd9c2f13858faa5b81d34afdcfcf8bb4cbc195e0ee56af8e9392000b24148f01e93bfea26b364f7","href":"https://static.observableusercontent.com/files/a5f777985e74b32d7483aa3202b52ac307c7239441342772cbd9c2f13858faa5b81d34afdcfcf8bb4cbc195e0ee56af8e9392000b24148f01e93bfea26b364f7","name":"world-daily-historical-combined (2)@1.csv","type":"text/csv","lastModified":1619477864740.115,"size":5524424},{"id":"a57e9adc4f221789eabd76479d948ade331e2d6c5fa98a465d99ed52854892d80c6c76d13a2f3cefe4b051ccfb04262042851285414242a0877eacf144684a79","href":"https://static.observableusercontent.com/files/a57e9adc4f221789eabd76479d948ade331e2d6c5fa98a465d99ed52854892d80c6c76d13a2f3cefe4b051ccfb04262042851285414242a0877eacf144684a79","name":"world-daily-historical-combined@3.csv","type":"text/csv","lastModified":1601487969467.32,"size":2486436},{"id":"59a33ae3522d1ab0b09531ea34711c2dae6d3afd9b6fc8233c9c632dc7d5251850af09aca7340c2a438248efaed2a40bc51c8c71c9a1c93742189330ab9d317a","href":"https://static.observableusercontent.com/files/59a33ae3522d1ab0b09531ea34711c2dae6d3afd9b6fc8233c9c632dc7d5251850af09aca7340c2a438248efaed2a40bc51c8c71c9a1c93742189330ab9d317a","name":"world-daily-historical-combined (2).csv","type":"text/csv","lastModified":1601576347066.466,"size":2498335},{"id":"cc881867d1163409e51c65a2465374b6c4145c55c62f359ff8c43dcf38d2a43bc3d339b5f94ca618aec8732d38cd22e01c22e554f7a36baf28a3c957824cc1f1","href":"https://static.observableusercontent.com/files/cc881867d1163409e51c65a2465374b6c4145c55c62f359ff8c43dcf38d2a43bc3d339b5f94ca618aec8732d38cd22e01c22e554f7a36baf28a3c957824cc1f1","name":"world-daily-historical-combined (6).csv","type":"text/csv","lastModified":1605049005356.606,"size":2977720}] 30:{"title":"The coronavirus pandemic ends when this chart shrinks again","cells":[{"id":0,"value":"md`# The coronavirus pandemic ends when this chart shrinks again`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1902,"value":"{\n const totalDeaths =\n dataDeathsTotalCumulative[dataDeathsTotalCumulative.length - 1];\n\n return md`This project was an attempt at understanding the scale of the coronavirus pandemic — a pandemic which has, as of ${\n totalDeaths[0]\n }, taken at least **${commafy(\n Math.floor(totalDeaths[1] * 10) * 100\n )}** lives.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`Here's an excerpt from the [full story](https://www.washingtonpost.com/graphics/2020/world/coronavirus-deaths-1-million/):\n\n>*From the first wave in February in China through New York City’s April catastrophe and on to India’s current surge, the coronavirus has unleashed a worldwide suffering with no evident exit.*\n\n>*The deaths started as a trickle. Then they become a torrent.*\n\nThe global coronavirus death toll is broken down using a streamgraph, showing how many people have died every day since it began. In a way, this is the story of the entire pandemic to date. You can see the early coronavirus-related deaths in China, the surge in Europe and subsequently the U.S., the rising death toll in India — and one day, hopefully, a return to the sharp point at which we started.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`*Worldwide coronavirus deaths from [Johns Hopkins University](https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6) and [The Washington Post](https://www.washingtonpost.com/graphics/2020/world/mapping-spread-new-coronavirus/), plotted with a 14 day rolling average, last updated on ${dataDeathsTotalCumulative[dataDeathsTotalCumulative.length - 1][0]}*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`\n---\n## Configuring graphic containers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"dms = {\n let dimensions = {\n width: width,\n // height: width * 2,\n marginTop: 30,\n marginLeft: d3.min([30, width / 30])\n };\n\n dimensions.height =\n width > 600\n ? (dataDeathsTotalCumulative.length - 1) * 7 + dimensions.marginTop * 2\n : (dataDeathsTotalCumulative.length - 1) * 3.5 + dimensions.marginTop * 2;\n\n dimensions.marginBottom = dimensions.marginTop;\n dimensions.marginRight = dimensions.marginLeft;\n\n dimensions.chartWidth =\n dimensions.width - dimensions.marginLeft - dimensions.marginRight;\n dimensions.chartHeight =\n dimensions.height - dimensions.marginTop - dimensions.marginBottom;\n\n return dimensions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1869,"value":"md`## Setting up data methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"viewof category = radio({\n options: [\n { label: 'Regions', value: 'region' },\n { label: 'Countries', value: 'country' }\n ],\n value: 'region'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"viewof switcher = radio({\n options: [\n { label: 'Daily', value: 'daily' },\n { label: 'Cumulative', value: 'cumulative' }\n ],\n value: 'daily'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"timeParser = d3.timeParse(\"%m/%d/%y\")\n// timeParser = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"timeFormatter = function(date) {\n const months = [\n \"Jan.\",\n \"Feb.\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"Aug.\",\n \"Sept.\",\n \"Oct.\",\n \"Nov.\",\n \"Dec.\"\n ];\n const monthIndex = +d3.timeFormat('%m')(date) - 1;\n const day = +d3.timeFormat('%e')(date);\n let remainingDate = \"\";\n\n remainingDate = d3.timeFormat(`${months[monthIndex]} %-e, %Y`)(date);\n\n return remainingDate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2107,"value":"timeFormatterReverse = d3.timeFormat(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"crosswalk = {\n const attached = await FileAttachment(\n \"CrosswalkContinents-style-1.csv\"\n ).text();\n\n return d3\n .csvParse(attached)\n .sort(\n (a, b) =>\n d3.ascending(a[\"region\"], b[\"region\"]) ||\n d3.ascending(a[\"geo\"], b[\"geo\"])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"// regions = [...d3.group(crosswalk, d => d.region).keys()]\n\nregions = [\n \"United States\",\n \"North America\",\n \"South America\",\n \"Europe and Russia\",\n \"Africa\",\n \"Middle East\",\n \"South Asia\",\n \"East Asia/Oceania\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"countries = [...d3.group(crosswalk, d => d[\"geo\"]).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"codes = [...d3.group(crosswalk, d => d[\"iso\"]).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"codesHighlight = [\"CHN\", \"ITA\", \"BRA\", \"IND\", \"USA\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1863,"value":"md`## Loading in the data\n\nA new dataset is pulled in from The Washington Post and appended to older data from Johns Hopkins University. A huge thanks to [@emamd](https://observablehq.com/@emamd) for building this whole pipeline.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1804,"value":"dataLive = {\n const attached = d3.csvParse(\n await FileAttachment(\"world-daily-historical-combined (2)@1.csv\").text()\n );\n\n // const attached = await d3.csv(\n // \"https://inv-covid-data-prod.elections.aws.wapo.pub/world-daily-historical/world-daily-historical-combined.csv\"\n // );\n\n return (\n attached\n .filter(d => d.countryIso.length > 0)\n // Convert date to the format used in the rest of the notebook\n .map(d => {\n // Remove columns we don't need\n delete d.recovered;\n delete d.source;\n delete d.confirmed;\n delete d.updated;\n\n return {\n ...d,\n deaths: +d.deaths,\n date: d3.timeFormat(\"%m/%d/%y\")(d3.timeParse(\"%Y-%m-%d\")(d.date))\n };\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"data = {\n const attached = await FileAttachment(\"backfill.csv\").text();\n\n const dataBackfill = d3.csvParse(attached);\n\n const dataMerged = dataBackfill\n .concat(dataLive)\n .filter(d => d.countryIso.length > 0);\n\n const crosswalkByIso = d3.group(crosswalk, d => d[\"iso\"]);\n\n const dataProcessed = dataMerged.map((d, i, arr) => {\n let { country, countryIso, deaths, date } = d;\n return {\n country: country,\n iso: countryIso,\n region: crosswalkByIso.get(countryIso)[0][\"region\"],\n date: timeFormatterReverse(timeParser(date)),\n deaths: +deaths\n };\n });\n\n return dataProcessed.sort(\n (a, b) =>\n d3.ascending(timeParser(a[\"date\"]), timeParser(b[\"date\"])) ||\n d3.ascending(a[\"country\"], b[\"country\"])\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## Performing data transforms\n\nOnce the data is loaded and formatted correctly, deaths per day, a rolling average, etc. are calculated.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"dataDeathsCumulative = {\n return d3.rollup(\n dataDeathsRolling,\n v => d3.sum(v, d => d.deaths),\n d => d.date,\n d => (category == \"region\" ? d[\"region\"] : d[\"iso\"])\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1136,"value":"dataDeathsDaily = {\n return d3.rollup(\n dataDeathsRolling,\n v => d3.sum(v, d => d[\"deathsAvg\"]),\n d => d[\"date\"],\n d => (category == \"region\" ? d[\"region\"] : d[\"iso\"])\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1469,"value":"dataDeathsTotalCumulative = {\n const total = d3.rollup(\n dataDeathsRolling,\n v => d3.sum(v, d => d[\"deaths\"] / 1000),\n d => timeFormatter(timeParser(d[\"date\"]))\n );\n return [[\"date\", \"deaths (in thousands)\"]].concat(Array.from(total));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"dataSeries = {\n const stack = d3\n .stack()\n .keys(category == \"region\" ? regions : codes)\n .order(d3.stackOrderNone)\n .offset(d3.stackOffsetSilhouette);\n\n const series =\n switcher == \"daily\"\n ? stack(\n [...dataDeathsDaily.values()].map((d, i) => {\n const obj = Object.fromEntries(d.entries());\n obj.date = [...dataDeathsDaily.keys()][i];\n return obj;\n })\n )\n : stack(\n [...dataDeathsCumulative.values()].map((d, i) => {\n const obj = Object.fromEntries(d.entries());\n obj.date = [...dataDeathsCumulative.keys()][i];\n return obj;\n })\n );\n\n return series;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"md`## Creating scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"x = d3\n .scaleLinear()\n // .domain(d3.extent(dataSeries))\n .domain(switcher == \"daily\" ? [-8000, 8000] : [-1000000, 1000000])\n .range([0, dms.chartWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"y = {\n let dates = [...dataDeathsCumulative.keys()].map(d => timeParser(d));\n\n return d3\n .scaleTime()\n .domain([dates[0], dates[dates.length - 1]])\n .range([0, dms.chartHeight]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"color = d3\n .scaleOrdinal()\n .domain(category == \"region\" ? regions : codesHighlight)\n .range(colorsTableau)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2023,"value":"colorsTableau = [\n \"#4e79a7\",\n \"#f28e2c\",\n \"#e15759\",\n \"#76b7b2\",\n \"#59a14f\",\n \"#edc949\",\n \"#af7aa1\",\n \"#ff9da7\",\n \"#9c755f\",\n \"#bab0ab\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2030,"value":"colorsPurple = [\n \"#381A30\",\n \"#4D2440\",\n \"#572E48\",\n \"#6E455D\",\n \"#80526D\",\n \"#8B6177\",\n \"#966E87\",\n \"#AC899D\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"colorsGray = \"#e2e2e2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`## Creating reusable visual elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"area = d3\n .area()\n .curve(d3.curveBasis)\n .y((d, i) => y(timeParser(d.data.date)))\n .x0(d => x(d[0]))\n .x1(d => x(d[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1976,"value":"md`## Adding interactivity`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1978,"value":"function hover(event, d) {\n const [posX, posY] = d3.pointer(event);\n\n d3.selectAll(\".stream\").attr(\"opacity\", 0.3);\n d3.select(this).attr(\"opacity\", 1);\n\n d3.select(\".annotation\")\n .attr(\"transform\", `translate(0 ${posY})`)\n .attr(\"visibility\", \"visible\")\n .selectAll(\"path\")\n .attr(\"d\", `M 0 0 H ${dms.chartWidth}`)\n .attr(\"stroke\", d3.select(this).attr(\"fill\"));\n\n d3.select(\".annotation__date\").text(`${timeFormatter(y.invert(posY))}`);\n d3.select(\".annotation__data\").text(\n `At least ${commafy(\n Math.floor(\n dataDeathsDaily.get(timeFormatterReverse(y.invert(posY))).get(d[\"key\"])\n )\n )} lives lost on this day`\n );\n d3.select(\".annotation__country\")\n .text(\n category == \"country\"\n ? crosswalk.find(elem => elem[\"iso\"] == d[\"key\"])[\"geo\"]\n : d[\"key\"]\n )\n .attr(\"fill\", d3.select(this).attr(\"fill\"));\n\n d3.select(\".axis\").attr(\"opacity\", 0.3);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1979,"value":"function leave(event) {\n d3.selectAll(\".stream\").attr(\"opacity\", 1);\n\n d3.select(\".annotation\")\n .attr(\"visibility\", \"hidden\")\n .selectAll(\"path\");\n\n d3.select(\".axis\").attr(\"opacity\", 1);\n\n d3.select(\".annotation__date\").text(\"\");\n d3.select(\".annotation__data\").text(\"\");\n d3.select(\".annotation__country\").text(\"\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\n---\n## Libraries and Packages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"commafy = function(str) {\n return str.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}