30:[{"id":"456630e9c1f978a5503387ad1bc44e13e969f07b088faa6c713c7815d780fa2e427f4ca3780db78ca3f1b9ee43cfe8b23f1545e22fe9c3039368de07ca484791","href":"https://static.observableusercontent.com/files/456630e9c1f978a5503387ad1bc44e13e969f07b088faa6c713c7815d780fa2e427f4ca3780db78ca3f1b9ee43cfe8b23f1545e22fe9c3039368de07ca484791","name":"log-chart-dead-alt-2020-05-19@1.csv","type":"text/csv","lastModified":1589874324243.689,"size":3409},{"id":"523ca96e61d8d9842eab35080455e92f0d2005c94c168847838b577697e13736472fce5605991fad8662b6f95273167e2ce7d5c0001d02b08164851baec3c396","href":"https://static.observableusercontent.com/files/523ca96e61d8d9842eab35080455e92f0d2005c94c168847838b577697e13736472fce5605991fad8662b6f95273167e2ce7d5c0001d02b08164851baec3c396","name":"log-chart-dead-brics-2020-07-01.csv","type":"text/csv","lastModified":1593593553845.936,"size":6134},{"id":"474b58f83d675b85094b1dfc11a4d8b5833c73658588ac3473545bd4a7f6e67e392500864eaff33759d6e4e4f02303f919752e696843375cf538166bb36919c0","href":"https://static.observableusercontent.com/files/474b58f83d675b85094b1dfc11a4d8b5833c73658588ac3473545bd4a7f6e67e392500864eaff33759d6e4e4f02303f919752e696843375cf538166bb36919c0","name":"log-chart-dead-brics-2020-06-16@2.csv","type":"text/csv","lastModified":1592298945266.764,"size":6677},{"id":"e41e0bb3068e4faf98dfb04b0c3eb374780058a81cf7ff55d0e3e1136e3668d4343bc9a1d4cbd960fbd28f49abe60c154321dbf3f329b7ca77093285a0bf5f94","href":"https://static.observableusercontent.com/files/e41e0bb3068e4faf98dfb04b0c3eb374780058a81cf7ff55d0e3e1136e3668d4343bc9a1d4cbd960fbd28f49abe60c154321dbf3f329b7ca77093285a0bf5f94","name":"log-chart-dead-brics-2020-07-05.csv","type":"text/csv","lastModified":1593937605027.102,"size":6370}] 2e:{"title":"Log-Chart für Tote BRICS","cells":[{"id":0,"value":"md`# Log-Chart für Tote BRICS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"min = 20 // We start at the 20th death","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"max = d3.max(\n data.map(d => {\n return d3.max(\n Object.keys(d)\n .filter(k => k != \"Tag\")\n .map(k => d[k])\n );\n })\n) + 100000 /* Add a little space on top */","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"maxDay = d3.max(data.map(d => d.Tag))","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`## Allgemeine Konfiguration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"conf = {\n return {\n countries: [\n { label: \"Italien\", color: \"#cfcfd6\", offsetY: -12, offsetX: -30 },\n { label: \"Südkorea\", color: \"#cfcfd6\", offsetY: -15, offsetX: -40 },\n { label: \"USA\", color: \"#cfcfd6\", offsetY: -2, offsetX: 0 },\n { label: \"Deutschland\", color: \"#cfcfd6\", offsetY: 0, offsetX: 0 },\n { label: \"Schweiz\", color: \"#cfcfd6\", offsetY: 0, offsetX: 0 },\n { label: \"Mexiko\", color: \"#1D8534\", offsetY: 0, offsetX: 0 },\n { label: \"Brasilien\", color: \"#a9cf00\", offsetY: 0, offsetX: 0 },\n { label: \"Russland\", color: \"#ebbd22\", offsetY: -15, offsetX: -10 },\n { label: \"Indien\", color: \"#d28b00\", offsetY: 0, offsetX: 0 },\n { label: \"Südafrika\", color: \"#004f77\", offsetY: -10, offsetX: 0 }\n ],\n // I tried using logScale.ticks(3), but that proved rather unsatisfactory\n labelsY: [20, 100, 1000, 10000, 10000, 100000],\n labelsX: [0,30,60,90,120],\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`## Mobile-width Grafik`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"mwConf = {\n return {\n width: 380,\n height: 310,\n left: 60,\n bottom: 25\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"logChartDeathsMW = svgToCanvas(await LogDeathsMW(), 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"function LogDeathsMW() {\n const svgNode = svg`\n`;\n\n dayLabels(svgNode, mwConf);\n yLabels(svgNode, mwConf);\n conf.countries.forEach(c => {\n lineForCountry(c, svgNode, mwConf);\n labelForCountry(c, svgNode, mwConf);\n });\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`## Content-width Grafik`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"cwConf = {\n return {\n width: 637,\n height: 422,\n left: 60,\n bottom: 25\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"logChartDeathsCW = svgToCanvas(await LogDeathsCW(), 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"await LogDeathsCW()","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"function LogDeathsCW() {\n const svgNode = svg`\n`;\n\n dayLabels(svgNode, cwConf);\n yLabels(svgNode, cwConf);\n conf.countries.forEach(c => {\n lineForCountry(c, svgNode, cwConf);\n labelForCountry(c, svgNode, cwConf);\n });\n return svgNode;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"logScale = d3.scaleSymlog().domain([min, max])","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"dayScale = d3\n .scaleLinear()\n .domain([0, maxDay])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"function labelForCountry(c, svgNode, spec) {\n let countryData = data.filter(d => d[c.label]);\n let endPoint = countryData.slice(-1)[0][c.label];\n let endDay = countryData.slice(-1)[0].Tag;\n\n d3.select(svgNode)\n .select(\"#lines\")\n .append(\"text\")\n .style(\"font-family\", \"GTAmerica-Regular, GTAmericaRegular, 'GT America'\")\n .style(\"font-size\", 14)\n .attr(\"x\", xScale(endDay, spec) + 6 + (c.offsetX || 0))\n .attr(\"y\", yScale(endPoint, spec) + 5 - (c.offsetY || 0))\n .attr(\"fill\", c.color)\n .text(c.label);\n\n d3.select(svgNode)\n .select(\"#lines\")\n .append(\"circle\")\n .attr(\"cx\", xScale(endDay, spec))\n .attr(\"cy\", yScale(endPoint, spec))\n .attr(\"r\", 4)\n .attr(\"fill\", c.color)\n .text(c.label);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"function lineForCountry(c, svgNode, spec) {\n let countryData = data.filter(d => d[c.label]);\n\n d3.select(svgNode)\n .select(\"#lines\")\n .append(\"path\")\n .datum(countryData)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", c.color)\n .attr(\"stroke-width\", 2)\n .attr(\n \"d\",\n d3\n .line()\n .x(function(d) {\n return xScale(d.Tag, spec);\n })\n .y(function(d) {\n return yScale(d[c.label], spec);\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"function dayLabels(svgNode, spec) {\n conf.labelsX.forEach(tag => {\n console.log(tag)\n d3.select(svgNode)\n .select(\"#dayLabels\")\n .append(\"text\")\n .attr(\"x\", xScale(tag, spec))\n .attr(\"y\", spec.height)\n .style(\"font-family\", \"GTAmerica-Regular, GTAmericaRegular, 'GT America'\")\n .style(\"font-size\", 14)\n .attr(\"text-anchor\", tag === 0 ? \"start\" : \"middle\")\n .text(tag);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"function yLabels(svgNode, spec) {\n const format = d3.format(\",.2f\");\n conf.labelsY.forEach(label => {\n d3.select(svgNode)\n .select(\"#yLabels\")\n .append(\"line\")\n .attr(\"x1\", spec.left)\n .attr(\"x2\", spec.width)\n .attr(\"y1\", yScale(label, spec))\n .attr(\"y2\", yScale(label, spec))\n .attr(\"stroke\", \"#000000\")\n .attr(\"stroke-width\", 0.5);\n\n d3.select(svgNode)\n .select(\"#yLabels\")\n .append(\"text\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", 55)\n .attr(\"y\", yScale(label, spec) + 5)\n .style(\"font-family\", \"GTAmerica-Regular, GTAmericaRegular, 'GT America'\")\n .style(\"font-size\", 14)\n .text(\n format(label)\n .split('.')[0]\n .replace(',', ' ')\n );\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"function yScale(value, spec) {\n if (value == null) {\n return null;\n }\n let scale = logScale.range([spec.height - spec.bottom, 0]);\n return scale(value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"function xScale(value, spec) {\n let scale = dayScale.range([spec.left, spec.width - 20]);\n\n return scale(value);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"data = {\n let d = d3.csvParse(\n await FileAttachment(\"log-chart-dead-brics-2020-07-05.csv\").text()\n );\n d.map(day => {\n Object.keys(day).forEach(country => {\n if (day[country] == \"NA\") {\n day[country] = null;\n } else {\n day[country] = parseInt(day[country]);\n }\n });\n return day;\n });\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"import {svgToCanvas} from \"@jonasoesch/nzz-utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"getLabelXAxisAt = (y, spec) => svg`\n\t\tTage seit dem Auftreten des 20. Falls\n\t`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}