28:null 29:["$","title",null,{"children":"Log-Chart | Jonas Oesch | Observable"}] 2e:[{"id":"6cbff7f65b7443eedfce31d2c8700ffef9aa477490b5cecf0fc7bcb9bd9fe16b1fc4891381f1877b711c593bd3d28be803e1c59f87761ad0911b4e4b539d7313","href":"https://static.observableusercontent.com/files/6cbff7f65b7443eedfce31d2c8700ffef9aa477490b5cecf0fc7bcb9bd9fe16b1fc4891381f1877b711c593bd3d28be803e1c59f87761ad0911b4e4b539d7313","name":"log-plot.csv","type":"text/csv","lastModified":1584544068822.197,"size":908},{"id":"c09cb416464a618ff625ee8f84d3b489526c38dd90ff49d8371873f38f1998e2aaad98995ae4c3a003f5a56323773c418246c1021a6c6fc52f15da46359caf36","href":"https://static.observableusercontent.com/files/c09cb416464a618ff625ee8f84d3b489526c38dd90ff49d8371873f38f1998e2aaad98995ae4c3a003f5a56323773c418246c1021a6c6fc52f15da46359caf36","name":"log-chart-2020-04-13.csv","type":"text/csv","lastModified":1586852578139.973,"size":2307},{"id":"d83cfaf715b67cd96e2676fd409fc90cc7042a60b139882fee75e939e6011dcc09b440a8596c9c86eece67afc1da9fe3f0a9e127d204db211646a6698700fff3","href":"https://static.observableusercontent.com/files/d83cfaf715b67cd96e2676fd409fc90cc7042a60b139882fee75e939e6011dcc09b440a8596c9c86eece67afc1da9fe3f0a9e127d204db211646a6698700fff3","name":"ft-logchart-mit-spanien.csv","type":"text/csv","lastModified":1585819577445.772,"size":1728},{"id":"653e00a50297102d26773810b3549857ab3faee9a1a4a3dbc281c043adfb3f7095e8aed91e5ae3d51ff8b03f81a361a44a38f7fdd427aac42f2eb051b7c775f8","href":"https://static.observableusercontent.com/files/653e00a50297102d26773810b3549857ab3faee9a1a4a3dbc281c043adfb3f7095e8aed91e5ae3d51ff8b03f81a361a44a38f7fdd427aac42f2eb051b7c775f8","name":"log-chart-2020-03-23.csv","type":"text/csv","lastModified":1584952960748.639,"size":1104},{"id":"d878ea294788e297dddd38040ac17d4d36badd6060dd919c2d58535a8c6d0979451e9e2fe166a564a9d5399b4470eea9831b0922265bb15d58700858b4bb4363","href":"https://static.observableusercontent.com/files/d878ea294788e297dddd38040ac17d4d36badd6060dd919c2d58535a8c6d0979451e9e2fe166a564a9d5399b4470eea9831b0922265bb15d58700858b4bb4363","name":"log-chart-2020-03-31@1.csv","type":"text/csv","lastModified":1585678204473.775,"size":1435},{"id":"8830996d4f3b3105ea0d262599f36db19b9077cf992516bad99bfaa6a1fab92d5f7297b8e5827e04b8672f06173f07c7c5a780b81785ec7d10530f3c7bf35d3f","href":"https://static.observableusercontent.com/files/8830996d4f3b3105ea0d262599f36db19b9077cf992516bad99bfaa6a1fab92d5f7297b8e5827e04b8672f06173f07c7c5a780b81785ec7d10530f3c7bf35d3f","name":"log-chart-2020-03-27.csv","type":"text/csv","lastModified":1585314493693.361,"size":1266},{"id":"92395e0c36a3ff6ae50f5eaba0bd4b2f8c809757fd813862d11277252e38a048078fd026931673dfb5d3e46d7b96f17b76ce6c5e58effa8dddb40f775feef9f8","href":"https://static.observableusercontent.com/files/92395e0c36a3ff6ae50f5eaba0bd4b2f8c809757fd813862d11277252e38a048078fd026931673dfb5d3e46d7b96f17b76ce6c5e58effa8dddb40f775feef9f8","name":"log-chart-2020-04-27.csv","type":"text/csv","lastModified":1588006062984.632,"size":3063},{"id":"3d49b348f7fb6dcc48de946873ab1e22a62c0b1fb83541e255ab28582bc19ac00ed840d49cfb6af263e3365e40dbf41db0744c751aca03077ad4034e16a930ad","href":"https://static.observableusercontent.com/files/3d49b348f7fb6dcc48de946873ab1e22a62c0b1fb83541e255ab28582bc19ac00ed840d49cfb6af263e3365e40dbf41db0744c751aca03077ad4034e16a930ad","name":"log-chart-2020-05-06.csv","type":"text/csv","lastModified":1588751113461.636,"size":3566},{"id":"e39d8a79e46412625298f1d7a99fca51786db3cf881f2b341c0532ca9519492349a3305bcc509696f21196f479c3e6e68b3739589d060603ade2ef661f2b5131","href":"https://static.observableusercontent.com/files/e39d8a79e46412625298f1d7a99fca51786db3cf881f2b341c0532ca9519492349a3305bcc509696f21196f479c3e6e68b3739589d060603ade2ef661f2b5131","name":"log-chart-2020-07-16.csv","type":"text/csv","lastModified":1594900271479.615,"size":7589},{"id":"904de2f7abf89a9e5cb5c72554ac88b70fb0f800a04dda2e186039c1b888fa4989b049dd057cedbba116634c02212bdd9a92d2c4af79ba33ccf024f5d332beed","href":"https://static.observableusercontent.com/files/904de2f7abf89a9e5cb5c72554ac88b70fb0f800a04dda2e186039c1b888fa4989b049dd057cedbba116634c02212bdd9a92d2c4af79ba33ccf024f5d332beed","name":"log-chart-2020-05-18@1.csv","type":"text/csv","lastModified":1589793152760.354,"size":4238},{"id":"a0459644f51efab5ccdb336159bafb6a4dd2a935c007ac71566662b22db96aedf4919ab3f6c2ae261edb6a6e4f74c091ae70ad69a1f832be6faa8fd641c76c2c","href":"https://static.observableusercontent.com/files/a0459644f51efab5ccdb336159bafb6a4dd2a935c007ac71566662b22db96aedf4919ab3f6c2ae261edb6a6e4f74c091ae70ad69a1f832be6faa8fd641c76c2c","name":"log-chart-2020-06-05.csv","type":"text/csv","lastModified":1591365998075.184,"size":5252}] 2c:{"id":"add50434b66e3c27","slug":"log-chart","title":"Log-Chart","thumbnail":"3ae0f8684291a5da2bf562143dd28ca7b83e1a0a30faed467eb5c4319b776abf","access_level":"public","create_time":"$D2020-03-18T15:01:27.148Z","update_time":"$D2020-07-16T11:54:44.708Z","view_time":null,"first_public_time":"$D2020-03-18T16:43:12.472Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4e016f1c321bd7e6","login":"jonasoesch","name":"Jonas Oesch","avatar_url":"https://avatars-next.observableusercontent.com/98280b1f8b2fecb17a31d5f05637a3e92dde7ab798701143ea42dcfcfd7ad33e","tier":"starter_2024"},"version":715,"publish_version":715,"role":null,"authored":false,"authors":[{"type":"individual","id":"771dffbd343e4869","login":"jonasoesch","name":"Jonas Oesch","avatar_url":"https://avatars-next.observableusercontent.com/98280b1f8b2fecb17a31d5f05637a3e92dde7ab798701143ea42dcfcfd7ad33e","tier":null}],"members":[{"type":"individual","id":"771dffbd343e4869","login":"jonasoesch","name":"Jonas Oesch","avatar_url":"https://avatars-next.observableusercontent.com/98280b1f8b2fecb17a31d5f05637a3e92dde7ab798701143ea42dcfcfd7ad33e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":58,"collection":null,"type":"notebook","body":{"title":"Log-Chart","cells":[{"id":0,"value":"md`# Log-Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"max = 5000000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md`## Allgemeine Konfiguration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"conf = {\n return {\n countries: [\n { label: \"Italien\", color: \"#7385ff\", offsetY: 1, offsetX: 0 },\n { label: \"Südkorea\", color: \"#7dd1c3\", offsetY: -15, offsetX: -40 },\n { label: \"USA\", color: \"#e0904f\", offsetY: 5, offsetX: 0 },\n { label: \"Deutschland\", color: \"#b6b6be\", offsetY: -8, offsetX: -30 },\n { label: \"Schweiz\", color: \"#c73530\", offsetY: -8, offsetX: -65 },\n { label: \"Japan\", color: \"#ac92d6\", offsetY: 13, offsetX: -10 },\n { label: \"Singapur\", color: \"#c5c294\", offsetY: 5, offsetX: 0 },\n { label: \"Spanien\", color: \"#ebbd22\", offsetY: 15, offsetX: -5 }\n ],\n labels: [100, 1000, 10000, 100000, 1000000]\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`## Mobile-width Grafik`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"svgToCanvas(await drawMw(), 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"mwConf = {\n return {\n width: 380,\n height: 310,\n left: 72,\n bottom: 25,\n right: 50\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`## Content-width Grafik`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"svgToCanvas(await drawCw(), 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"drawCw()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"cwConf = {\n return {\n width: 637,\n height: 424,\n left: 72,\n bottom: 25,\n right: 50\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data = {\n let d = d3.csvParse(await FileAttachment(\"log-chart-2020-07-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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"getLabelXAxisAt = y => svg`\n\t\tTage seit dem Auftreten des 100. Falls\n\t`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"import { formatNumber } from \"@jonasoesch/nzz-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"