30:[{"id":"ae45adf6039ed4c719ba0e68b8a2ba19fda1974032cfb55bb8b50f021f07a9968233fd0f607748cde4130271b67504be38fa8feac8e1fe9c542ae589b240a70f","href":"https://static.observableusercontent.com/files/ae45adf6039ed4c719ba0e68b8a2ba19fda1974032cfb55bb8b50f021f07a9968233fd0f607748cde4130271b67504be38fa8feac8e1fe9c542ae589b240a70f","name":"log-chart-brics-2020-06-16.csv","type":"text/csv","lastModified":1592295397653.364,"size":7024},{"id":"5fcfdb936c63fb2a2c76143e6f8b12d653c05ed38bbc2f078e514834a14e45e90b7dc6e20c9e0a91756dd5f678678a6f7d034d3366fb9721d34496e26df68a48","href":"https://static.observableusercontent.com/files/5fcfdb936c63fb2a2c76143e6f8b12d653c05ed38bbc2f078e514834a14e45e90b7dc6e20c9e0a91756dd5f678678a6f7d034d3366fb9721d34496e26df68a48","name":"log-chart-brics-2020-30-08.csv","type":"text/csv","lastModified":1598812229654.672,"size":12610},{"id":"4dc48f453d014f84923b0a98b8961037de6450ea9497077807d3024194ca3a71a35485e8cba4cedaf826c957eb1ae6f8b3509b7b15ba914caba47f62a0bb4250","href":"https://static.observableusercontent.com/files/4dc48f453d014f84923b0a98b8961037de6450ea9497077807d3024194ca3a71a35485e8cba4cedaf826c957eb1ae6f8b3509b7b15ba914caba47f62a0bb4250","name":"log-chart-brics-2020-31-08.csv","type":"text/csv","lastModified":1598888106111.536,"size":12685},{"id":"91579ada78cf2820412f4cccdb5197eeec0f42cfdcdab28c15b4439332592d968353b99129d0e4a1426945d620e864f4321f342947dd3e4507fac09e2c6c12e4","href":"https://static.observableusercontent.com/files/91579ada78cf2820412f4cccdb5197eeec0f42cfdcdab28c15b4439332592d968353b99129d0e4a1426945d620e864f4321f342947dd3e4507fac09e2c6c12e4","name":"log-chart-brics-2020-08-14.csv","type":"text/csv","lastModified":1597568699351.144,"size":11410},{"id":"28395c102051eb2ebb55d30fe9909b1a6cb8ba5a38a41a1ed8abcc5e19500a1ad261a8a0df3302c2245cf63ab852e3e68909452022423fdf7fc27b6440153f1e","href":"https://static.observableusercontent.com/files/28395c102051eb2ebb55d30fe9909b1a6cb8ba5a38a41a1ed8abcc5e19500a1ad261a8a0df3302c2245cf63ab852e3e68909452022423fdf7fc27b6440153f1e","name":"log-chart-alt-2020-06-15.csv","type":"text/csv","lastModified":1592222296057.422,"size":6952},{"id":"5c77ce9aceb332e0e8732e25b8185193a1dcb80865b983c0631ac74915654215fe00acf90c7e90e0a95f58d06c87c4591ce8d1e57488c71523b93bbfc7259136","href":"https://static.observableusercontent.com/files/5c77ce9aceb332e0e8732e25b8185193a1dcb80865b983c0631ac74915654215fe00acf90c7e90e0a95f58d06c87c4591ce8d1e57488c71523b93bbfc7259136","name":"log-chart-alt-2020-05-14@1.csv","type":"text/csv","lastModified":1589441581804.613,"size":4254},{"id":"bc8a4e88517bcf45dbf1adcb91bf83bfef0d51da9d61e47952be681dc3342dcf0b6b4f9de8ded09f548246997d22cc0c757efd0478518d2925bcb5e905447e97","href":"https://static.observableusercontent.com/files/bc8a4e88517bcf45dbf1adcb91bf83bfef0d51da9d61e47952be681dc3342dcf0b6b4f9de8ded09f548246997d22cc0c757efd0478518d2925bcb5e905447e97","name":"log-chart-alt-2020-05-28.csv","type":"text/csv","lastModified":1590658196211.992,"size":5209},{"id":"90fc14cfb4717bc4eb7ed5e9a9360e5eac61c555cbdefadfabb12ddc22241ab457e55f27a645e6ba53c47c30b16748405cdf244a48974fc3938dd0ce078b773f","href":"https://static.observableusercontent.com/files/90fc14cfb4717bc4eb7ed5e9a9360e5eac61c555cbdefadfabb12ddc22241ab457e55f27a645e6ba53c47c30b16748405cdf244a48974fc3938dd0ce078b773f","name":"log-chart-brics-2020-07-22.csv","type":"text/csv","lastModified":1595403358543.13,"size":9685},{"id":"31af00f32eda035e8cab94e9af3e43f9a085b76b4de0e246c65078228af18ffc610c4d0753953ae60c9a10cb3e5732301823f4ae29c870cbf805b8edd933e6eb","href":"https://static.observableusercontent.com/files/31af00f32eda035e8cab94e9af3e43f9a085b76b4de0e246c65078228af18ffc610c4d0753953ae60c9a10cb3e5732301823f4ae29c870cbf805b8edd933e6eb","name":"log-chart-brics-2020-06-26.csv","type":"text/csv","lastModified":1593153280501.983,"size":7755},{"id":"0b43a55c5ca353c430168be0ed36788d8faad0e003bae7ce1639e7a2e4e4bc123ca1c13a55e50fa8b4be20d841cd407ad2fb21e2e8e45a6ff5850056895f824f","href":"https://static.observableusercontent.com/files/0b43a55c5ca353c430168be0ed36788d8faad0e003bae7ce1639e7a2e4e4bc123ca1c13a55e50fa8b4be20d841cd407ad2fb21e2e8e45a6ff5850056895f824f","name":"log-chart-brics-2020-07-21.csv","type":"text/csv","lastModified":1595313839401.517,"size":9610},{"id":"05650629515ea167f8820a2900049d875246ec8152692e07760c92475b126210dfadd016dd543b9fbb09250499e9e571cdd44eebc45a990d9f0ca28f73139158","href":"https://static.observableusercontent.com/files/05650629515ea167f8820a2900049d875246ec8152692e07760c92475b126210dfadd016dd543b9fbb09250499e9e571cdd44eebc45a990d9f0ca28f73139158","name":"log-chart-brics-2020-08-21.csv","type":"text/csv","lastModified":1597989935871.985,"size":11935},{"id":"75bf16dcc21677e026936443d16777ee3032095c34f30225920c05f766302954411d97910aed48bb9cb80e7d4e3ee223639294ede5b9351a2e86e73cfc3b0b14","href":"https://static.observableusercontent.com/files/75bf16dcc21677e026936443d16777ee3032095c34f30225920c05f766302954411d97910aed48bb9cb80e7d4e3ee223639294ede5b9351a2e86e73cfc3b0b14","name":"log-chart-brics-2020-09-02.csv","type":"text/csv","lastModified":1599027463214.548,"size":12835},{"id":"c1634010535bbc59802fd2c60bee0fac60aef33a3013d77c1313923ecbbe8ec6923b3d8f3de7055641e1a432fb4c6dc16e9d6819859a622a359bc228a42d72d0","href":"https://static.observableusercontent.com/files/c1634010535bbc59802fd2c60bee0fac60aef33a3013d77c1313923ecbbe8ec6923b3d8f3de7055641e1a432fb4c6dc16e9d6819859a622a359bc228a42d72d0","name":"log-chart-brics-2020-08-17.csv","type":"text/csv","lastModified":1597644514759.155,"size":11635}] 2e:{"title":"Log-Chart BRICS","cells":[{"id":0,"value":"md`# Log-Chart BRICS`","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 = 7000000","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: 2, offsetX: 0 },\n { label: \"Deutschland\", color: \"#cfcfd6\", offsetY: -13, offsetX: -22 },\n { label: \"Schweiz\", color: \"#cfcfd6\", offsetY: 0, offsetX: 0 },\n { label: \"Mexiko\", color: \"#1D8534\", offsetY: -5, offsetX: 0 },\n { label: \"Brasilien\", color: \"#a9cf00\", offsetY: 2, offsetX: 0 },\n { label: \"Russland\", color: \"#ebbd22\", offsetY: 8, offsetX: 3 },\n { label: \"Indien\", color: \"#d28b00\", offsetY: -8, offsetX: 2 },\n { label: \"Südafrika\", color: \"#004f77\", offsetY: 5, offsetX: 0 }\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":637,"value":"drawMw()","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":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-brics-2020-09-02.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"}