30:[{"id":"479719fd1acd13fbd3941e7c135e5642b605e6cae1c06a7ada49d351b451a86137f38ba6455d561f404cd6544d88581f05fa065ba5df97839712a22da9dc9659","href":"https://static.observableusercontent.com/files/479719fd1acd13fbd3941e7c135e5642b605e6cae1c06a7ada49d351b451a86137f38ba6455d561f404cd6544d88581f05fa065ba5df97839712a22da9dc9659","name":"log-chart-latam-2020-06-16@1.csv","type":"text/csv","lastModified":1592308739133.039,"size":7506},{"id":"d276b08e2b6f98ebf0fdd3ec970518d6bab733a8d80e7d24f2f402fcabadf2984f61d4045c30013a4944aaab5df242e2ff918db780c8ca2019293c5de6b2fdef","href":"https://static.observableusercontent.com/files/d276b08e2b6f98ebf0fdd3ec970518d6bab733a8d80e7d24f2f402fcabadf2984f61d4045c30013a4944aaab5df242e2ff918db780c8ca2019293c5de6b2fdef","name":"log-chart-latam-2020-07-09.csv","type":"text/csv","lastModified":1594633203278.27,"size":9350},{"id":"4876e2fda10a125ba0861204219f030a210e809343b9bbb240ebf467428829f9df55d59fd2732797299464f7ed988aa4f68283b85394a14a35b5e5b6e0c35356","href":"https://static.observableusercontent.com/files/4876e2fda10a125ba0861204219f030a210e809343b9bbb240ebf467428829f9df55d59fd2732797299464f7ed988aa4f68283b85394a14a35b5e5b6e0c35356","name":"log-chart-latam-2020-07-01.csv","type":"text/csv","lastModified":1593593995236.942,"size":8703},{"id":"3cf7e751eaa7a4775f0157bb267430094f38da8166c76c29d910a19c6adfcc27c3ee41ed012e0bc9677ec6eb85ede9c9644a3187db14b1acd739c1a1068fd979","href":"https://static.observableusercontent.com/files/3cf7e751eaa7a4775f0157bb267430094f38da8166c76c29d910a19c6adfcc27c3ee41ed012e0bc9677ec6eb85ede9c9644a3187db14b1acd739c1a1068fd979","name":"log-chart-latam-2020-09-16.csv","type":"text/csv","lastModified":1600249863240.738,"size":15023},{"id":"5206efd40bf991127cf6fb460975ef1907971824dfbe8b4c50186c5b3769d50f26aea376cf7b11bea84b6cc2b33229247a1ff90d88ebcb366e5ba1d9ab20a782","href":"https://static.observableusercontent.com/files/5206efd40bf991127cf6fb460975ef1907971824dfbe8b4c50186c5b3769d50f26aea376cf7b11bea84b6cc2b33229247a1ff90d88ebcb366e5ba1d9ab20a782","name":"log-chart-latam-2020-30-08.csv","type":"text/csv","lastModified":1598812254515.03,"size":13615},{"id":"49a55616636b5b28ddfa138098a0788ec9d4cf571c5983d55066f6f1986b24104c4cdbe60ecbaedc9deaaa3213b29b5db67799a1b25c49deb6b9e8f6cbee6c29","href":"https://static.observableusercontent.com/files/49a55616636b5b28ddfa138098a0788ec9d4cf571c5983d55066f6f1986b24104c4cdbe60ecbaedc9deaaa3213b29b5db67799a1b25c49deb6b9e8f6cbee6c29","name":"log-chart-latam-2020-08-17.csv","type":"text/csv","lastModified":1597644863949.321,"size":12549},{"id":"29235e0929967f9c957e53971c94ec6b5232491491fc453843fc318c4349b37ff563901898804239ac65ae3df82b3204ea7ab91aef3a99ddc0877e48061d4e93","href":"https://static.observableusercontent.com/files/29235e0929967f9c957e53971c94ec6b5232491491fc453843fc318c4349b37ff563901898804239ac65ae3df82b3204ea7ab91aef3a99ddc0877e48061d4e93","name":"log-chart-latam-2020-08-18.csv","type":"text/csv","lastModified":1597731847453.098,"size":12631},{"id":"471746bc50cba43d524e052a15dce06a731460e1379c05e171dbb1261922c847abce92de258bbf662cf9cc5c7c4c91d59675ec15213d8158d7b5b5d3788a39b0","href":"https://static.observableusercontent.com/files/471746bc50cba43d524e052a15dce06a731460e1379c05e171dbb1261922c847abce92de258bbf662cf9cc5c7c4c91d59675ec15213d8158d7b5b5d3788a39b0","name":"log-chart-latam-2020-07-21.csv","type":"text/csv","lastModified":1595314548547.354,"size":10329},{"id":"a290de0a426705494e922e740e75b272d2898ebf828f08d0fd5d2c2512eaf683bfb4a25a03497cb690d3f4bccca203344c8f11273847b7d9d2c42965f3baa06b","href":"https://static.observableusercontent.com/files/a290de0a426705494e922e740e75b272d2898ebf828f08d0fd5d2c2512eaf683bfb4a25a03497cb690d3f4bccca203344c8f11273847b7d9d2c42965f3baa06b","name":"log-chart-latam-2020-09-02.csv","type":"text/csv","lastModified":1599028191785.586,"size":13861},{"id":"8503f72883e83028217ae1ad4c366a2a345942c44e4de2a525f3ff6075d1b727936bc34f576136aca6938440b0de71957ec12ca428b8f4789b5d9fb5b3fbe187","href":"https://static.observableusercontent.com/files/8503f72883e83028217ae1ad4c366a2a345942c44e4de2a525f3ff6075d1b727936bc34f576136aca6938440b0de71957ec12ca428b8f4789b5d9fb5b3fbe187","name":"log-chart-latam-2020-08-16@2.csv","type":"text/csv","lastModified":1597569635766.285,"size":12467}] 2e:{"title":"Log-Chart LatAm","cells":[{"id":0,"value":"md`# Log-Chart LatAm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"min = d3.min(\n data.map(d => {\n return d3.min(\n Object.keys(d)\n .filter(k => k != \"Tag\")\n .map(k => d[k])\n );\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"max = 8000000","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: 0, offsetX: 0 },\n { label: \"Südkorea\", color: \"#cfcfd6\", offsetY: -15, offsetX: -40 },\n { label: \"USA\", color: \"#cfcfd6\", offsetY: 0, offsetX: 0 },\n { label: \"Schweiz\", color: \"#cfcfd6\", offsetY: 0, offsetX: 0 },\n { label: \"Russland\", color: \"#cfcfd6\", offsetY: 3, offsetX: 0 },\n { label: \"Indien\", color: \"#cfcfd6\", offsetY: 2, offsetX: 0 },\n { label: \"Mexiko\", color: \"#1D8534\", offsetY: 10, offsetX: -60 },\n { label: \"Brasilien\", color: \"#a9cf00\", offsetY: -4, offsetX: 0 },\n { label: \"Peru\", color: \"#ae3143\", offsetY: 8, offsetX: 0 },\n { label: \"Kolumbien\", color: \"#8440a3\", offsetY: -4, offsetX: 1 },\n { label: \"Chile\", color: \"#da467d\", offsetY: 0, offsetX: 0 }\n \n ],\n labels: [100, 1000, 10000, 100000, 1000000]\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`## Mobile-width Grafik`","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"svgToCanvas(await drawMw(), 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"function drawMw() {\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":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"mwConf = {\n return {\n width: 380,\n height: 450,\n left: 72,\n bottom: 25,\n right: 50\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`## Content-width Grafik`","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"svgToCanvas(await drawCw(), 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"function drawCw() {\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":224,"value":"cwConf = {\n return {\n width: 637,\n height: 460,\n left: 72,\n bottom: 25,\n right: 50\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"drawCw()","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"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 .attr(\"font-size\", 14)\n .attr(\"x\", xScale(endDay, spec) + 6 + c.offsetX)\n .attr(\"y\", yScale(endPoint, spec) + 5 - c.offsetY)\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":true,"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 console.log(spec);\n let tage = data.filter(d => d.Tag % 30 == 0);\n tage.forEach(tag => {\n d3.select(svgNode)\n .select(\"#dayLabels\")\n .append(\"text\")\n .attr(\"x\", xScale(tag.Tag, spec) - 5)\n .attr(\"y\", spec.height)\n .style(\"font-family\", \"GTAmerica-Regular, GTAmericaRegular, GT America\")\n .attr(\"font-size\", 14)\n .text(tag.Tag);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"function yLabels(svgNode, spec) {\n const format = d3.format(\",.2f\");\n conf.labels.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\", spec.left - 5)\n .attr(\"y\", yScale(label, spec) + 5)\n .style(\"font-family\", \"GTAmerica-Regular, GTAmericaRegular, GT America\")\n .attr(\"font-size\", 14)\n .text(formatNumber(label));\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"function yScale(value, spec) {\n if (value == null) {\n return null;\n }\n let scale = d3\n .scaleSymlog()\n .domain([min, max])\n .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 maxDay = d3.max(data.map(d => d.Tag));\n let scale = d3\n .scaleLinear()\n .domain([0, maxDay])\n .range([spec.left, spec.width - spec.right]);\n\n return scale(value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"data = {\n let d = d3.csvParse(await FileAttachment(\"log-chart-latam-2020-09-16.csv\").text());\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":271,"value":"getLabelXAxisAt = y => svg`\n\t\tTage seit dem Auftreten des 100. Falls\n\t`","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"import { formatNumber } from \"@jonasoesch/nzz-utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"function svgToCanvas(svg, scale = 1) {\n return new Promise(resolve => {\n const svgSize = svg.viewBox.baseVal;\n const width = svgSize.width * scale;\n const height = svgSize.height * scale;\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svg);\n const image = new Image();\n image.src = `data:image/svg+xml;base64,${btoa(\n unescape(encodeURIComponent(svgString))\n )}`;\n\n image.onload = () => {\n const context = DOM.context2d(width, height, 1);\n console.log(svg);\n context.drawImage(\n image,\n 0,\n 0,\n svgSize.width * scale,\n svgSize.height * scale\n );\n resolve(context.canvas);\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}