Legende

31:T42c,function debug(svgNode, conf) { // Oben links d3.select(svgNode) .append("circle") .attr("r", 2) .attr("cx", xScale(conf.x.from, conf.x.from, conf.x.to, conf.dimensions)) .attr("cy", yScale(conf.y.to, conf.y.from, conf.y.to, conf.dimensions)) .attr("fill", "red"); // Oben rechts d3.select(svgNode) .append("circle") .attr("r", 2) .attr("cx", xScale(conf.x.to, conf.x.from, conf.x.to, conf.dimensions)) .attr("cy", yScale(conf.y.to, conf.y.from, conf.y.to, conf.dimensions)) .attr("fill", "red"); // Unten links d3.select(svgNode) .append("circle") .attr("r", 2) .attr("cx", xScale(conf.x.from, conf.x.from, conf.x.to, conf.dimensions)) .attr("cy", yScale(conf.y.from, conf.y.from, conf.y.to, conf.dimensions)) .attr("fill", "red"); // Unten rechts d3.select(svgNode) .append("circle") .attr("r", 2) .attr("cx", xScale(conf.x.to, conf.x.from, conf.x.to, conf.dimensions)) .attr("cy", yScale(conf.y.from, conf.y.from, conf.y.to, conf.dimensions)) .attr("fill", "red"); }32:T434,function dateLabels(svgNode, data, xConfig, dimensions) { var formatTime = d3.timeFormat("%-d. %-m"); for (let i = xConfig.from; i <= xConfig.to; i++) { d3.select(svgNode) .select("#dayLabels") .append("line") .attr("y1", dimensions.top) .attr("y2", dimensions.height - dimensions.bottom) .attr("x1", xScale(i, xConfig.from, xConfig.to, dimensions)) .attr("x2", xScale(i, xConfig.from, xConfig.to, dimensions)) .attr("stroke", xConfig.stroke) .attr("stroke-width", 0.5); if (i % xConfig.step == 0) { let dd = data.filter(d => d.day === i); if (dd.length > 0) { d3.select(svgNode) .select("#dayLabels") .append("text") .attr("x", xScale(i, xConfig.from, xConfig.to, dimensions) - 9) .attr("y", dimensions.height - dimensions.bottom + 25) .style("font-family", "GTAmerica-Regular, 'GT America'") .style("font-size", xConfig.fontsize) .attr("fill", xConfig.fontcolor) .text(formatTime(dd[0].date)); } } } }33:T4b3,function yLabels(svgNode, yConfig, dimensions) { yConfig.labels.forEach(label => { d3.select(svgNode) .select("#yLabels") .append("line") .attr("x1", dimensions.left) .attr("x2", dimensions.width - dimensions.right) .attr("y1", yScale(label, yConfig.from, yConfig.to, dimensions)) .attr("y2", yScale(label, yConfig.from, yConfig.to, dimensions)) .attr("stroke", yConfig.stroke) .attr("stroke-width", 0.5); d3.select(svgNode) .select("#yLabels") .append("text") .attr("x", 48) .attr("y", yScale(label, yConfig.from, yConfig.to, dimensions) + 5) .attr("text-anchor", "end") .style("font-family", "GTAmerica-Regular, 'GT America'") .style("font-size", yConfig.fontsize) .attr("fill", yConfig.fontcolor) .text(formatNumber(label)); }); d3.select(svgNode) .select("#yLabels") .append("text") .attr("x", 0) .attr("y", dimensions.top - 16) .style("font-family", "GTAmerica-Regular, 'GT America'") .style("font-size", yConfig.fontsize) .attr("fill", yConfig.fontcolor) .text( "Bestätigte Fälle in den 45 Tagen nach dem 100. Fall (logarithmisch)" ); }34:T12c6,legendeMw = ` `35:T12ed,legendeCw = ` `36:Tab1,legendeMwSans = ` `37:Tab3,legendeCwSans = ` `38:[] 2f:{"title":"Massnahmentimeline","cells":[{"id":0,"value":"md`# Massnahmentimeline`","pinned":true,"hidden":false,"mode":"ojs"},{"id":729,"value":"md`## Konfiguration der Varianten`","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"function mw() {\n return {\n x: {\n from: 0,\n to: 45,\n step: 7,\n stroke: \"#CFCFCF\",\n fontsize: 12,\n fontcolor: \"#6e6e7e\"\n },\n y: {\n from: 100,\n to: 100000,\n labels: [100, 1000, 10000, 100000],\n fontsize: 12,\n stroke: \"#6e6e7e\",\n fontcolor: \"#6e6e7e\"\n },\n mark: {\n fill: \"#bbb\",\n stroke: \"none\",\n strokeWidth: 0,\n fontsize: 14\n },\n phases: {\n NA: \"#F0F0F2\",\n \"unter 4 Tagen\": \"#d96f4e\",\n \"4 - 8 Tage\": \"#da8d5f\",\n \"8 - 30 Tage\": \"#daa878\",\n \"mehr als 30 Tage\": \"#ddc197\"\n },\n testing: {\n gering: \"#edece1\",\n mittel: \"#c6d7b8\",\n hoch: \"#8bc5a0\"\n },\n dimensions: {\n width: 380,\n height: 570,\n left: 55,\n right: 2,\n bottom: 53,\n top: 160\n },\n legende: legendeMw\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"function cw(d) {\n let base = mw(d);\n base.dimensions.width = 640;\n base.dimensions.top = 140;\n base.x.step = 7;\n base.legende = legendeCw;\n return base;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`## Allgemeine Konfiguration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"hubeiMw = {\n let hubeiMw = mw(hubei);\n return hubeiMw;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":656,"value":"tessinMw = {\n let tessinMw = mw(tessin);\n return tessinMw;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"lombardeiMw = {\n let lombardeiMw = cw(lombardei);\n return lombardeiMw;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`## Mobile-width Grafik`","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"drawArea(tessin, tessinMw)","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"drawArea(hubei, lombardeiMw)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1014,"value":"function phasesData(d) {\n let current = false;\n let ps = [];\n d.forEach((d, i) => {\n if (d.phase !== current) {\n current = d.phase;\n if (ps.length > 0) {\n ps[ps.length - 1].end = i - 1;\n }\n ps.push({\n label: current,\n start: i\n });\n }\n });\n ps[ps.length - 1].end = d.length - 1;\n return ps;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"function testing(svgNode, data, conf) {\n let minmax = d3.extent(data, d => d.day);\n\n data.forEach(d => {\n let x = xScale(d.day - 0.5, conf.x.from, conf.x.to, conf.dimensions);\n let w = xScale(d.day + 0.5, conf.x.from, conf.x.to, conf.dimensions) - x;\n\n d3.select(svgNode)\n .select(\"#testing\")\n .append(\"rect\")\n .attr(\"x\", x)\n .attr(\"width\", w)\n .attr(\"y\", conf.dimensions.height - 15)\n .attr(\"height\", 15)\n .attr(\n \"fill\",\n conf.testing[d.testing] ? conf.testing[d.testing] : \"#f0f0f2\"\n );\n });\n\n d3.select(svgNode)\n .select(\"#testing\")\n .append(\"text\")\n .attr(\"x\", 0)\n .attr(\"y\", conf.dimensions.height - 5)\n .style(\"font-size\", conf.y.fontsize)\n .style(\"font-family\", \"GTAmerica-Regular\")\n .text(\"Testing\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"function phases(svgNode, data, conf) {\n phasesData(data).forEach(phase => {\n let x1 = xScale(phase.start - 0.5, conf.x.from, conf.x.to, conf.dimensions);\n let w =\n xScale(phase.end + 0.5, conf.x.from, conf.x.to, conf.dimensions) - x1;\n\n let fill = conf.phases[phase.label]\n ? conf.phases[phase.label]\n : \"transparent\";\n\n d3.select(svgNode)\n .select(\"#phases\")\n .append(\"rect\")\n .attr(\"x\", x1)\n .attr(\"width\", w)\n .attr(\"y\", conf.dimensions.top)\n .attr(\n \"height\",\n yScale(conf.y.from, conf.y.from, conf.y.to, conf.dimensions) -\n conf.dimensions.top\n )\n .attr(\"fill\", fill)\n .style(\"mix-blend-mode\", \"multiply\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"function massnahmen(svgNode, data, conf) {\n d3.select(svgNode)\n .select(\"#interventions\")\n .selectAll(\"circle\")\n .data(data.filter(d => d.measure != \"\"))\n .enter()\n .append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"cx\", d => {\n return xScale(d.day, conf.x.from, conf.x.to, conf.dimensions);\n })\n .attr(\"cy\", d => {\n return yScale(d.cases, conf.y.from, conf.y.to, conf.dimensions);\n });\n\n d3.select(svgNode)\n .select(\"#interventions\")\n .selectAll(\"text\")\n .data(data.filter(d => d.measure != \"\"))\n .enter()\n .append(\"text\")\n .attr(\"x\", d => {\n return xScale(d.day, conf.x.from, conf.x.to, conf.dimensions) + 4;\n })\n .attr(\"y\", d => {\n return yScale(d.cases, conf.y.from, conf.y.to, conf.dimensions) + 4;\n })\n .style(\"font-family\", \"GT America\")\n .text(d => d.measure);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"function drawArea(data, conf) {\n const svgNode = svg``;\n\n yLabels(svgNode, conf.y, conf.dimensions);\n dateLabels(svgNode, data, conf.x, conf.dimensions);\n\n areaForCountry(svgNode, data.filter(d => d.day <= conf.x.to), conf);\n phases(svgNode, data.filter(d => d.day <= conf.x.to), conf);\n\n massnahmen(svgNode, data.filter(d => d.day <= conf.x.to), conf);\n //doubling(svgNode, 1.18925, conf);\n //doubling(svgNode, 1.090508, conf);\n if (conf.testing !== false) {\n testing(svgNode, data.filter(d => d.day <= conf.x.to), conf);\n }\n //debug(svgNode, conf);\n return svgNode;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"function areaForCountry(svgNode, data, conf) {\n d3.select(svgNode)\n .select(\"#lines\")\n .append(\"path\")\n .datum(data)\n .attr(\"fill\", conf.mark.fill)\n .attr(\"stroke\", conf.mark.stroke)\n .attr(\"stroke-width\", conf.mark.strokeWidth)\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\n \"d\",\n d3\n .area()\n .x(function(d) {\n return xScale(d.day, conf.x.from, conf.x.to, conf.dimensions);\n })\n .y0(yScale(conf.y.from, conf.y.from, conf.y.to, conf.dimensions))\n .y1(function(d) {\n return yScale(d.cases, conf.y.from, conf.y.to, conf.dimensions);\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"function doubling(svgNode, rate, conf) {\n let data = [];\n for (let i = 1; i < 35; i++) {\n data.push(Math.pow(rate, i) * 100);\n }\n\n d3.select(svgNode)\n .select(\"#doubling\")\n .append(\"path\")\n .datum(data)\n .attr(\"fill\", \"None\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 2)\n .attr(\n \"d\",\n d3\n .line()\n .x(function(d, i) {\n return xScale(i, conf.x.from, conf.x.to, conf.dimensions);\n })\n .y(function(d) {\n return yScale(d, conf.y.from, conf.y.to, conf.dimensions);\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"function dayLabels(svgNode, xConfig, dimensions) {\n for (let i = xConfig.from; i <= xConfig.to; i++) {\n d3.select(svgNode)\n .select(\"#dayLabels\")\n .append(\"line\")\n .attr(\"y1\", dimensions.top)\n .attr(\"y2\", dimensions.height - dimensions.bottom)\n .attr(\"x1\", xScale(i, xConfig.from, xConfig.to, dimensions))\n .attr(\"x2\", xScale(i, xConfig.from, xConfig.to, dimensions))\n .attr(\"stroke\", xConfig.stroke)\n .attr(\"stroke-width\", 0.5);\n\n if (i % xConfig.step == 0) {\n d3.select(svgNode)\n .select(\"#dayLabels\")\n .append(\"text\")\n .attr(\"x\", xScale(i, xConfig.from, xConfig.to, dimensions) - 5)\n .attr(\"y\", dimensions.height - dimensions.bottom + 25)\n .style(\"font-family\", \"GT America\")\n .style(\"font-size\", xConfig.fontsize)\n .attr(\"fill\", xConfig.fontcolor)\n .text(i);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"function yScale(value, from, to, spec) {\n if (value == null) {\n return null;\n }\n\n let scale = d3\n .scaleSymlog()\n .domain([from, to])\n .range([spec.height - spec.bottom, spec.top]);\n return scale(value);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"function xScale(value, from, to, spec) {\n let scale = d3\n .scaleLinear()\n .domain([from, to])\n .range([spec.left, spec.width - spec.right]);\n\n return scale(value);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"lombardei = parseData(\n await d3.csv(\n \"https://docs.google.com/spreadsheets/d/14KUNWP0v7VdL5mHtfBhWESRkC3In8YlmxNSULXQtqA0/export?format=csv&id=KEY&gid=915278785\"\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"tessin = parseData(\n await d3.csv(\n \"https://docs.google.com/spreadsheets/d/14KUNWP0v7VdL5mHtfBhWESRkC3In8YlmxNSULXQtqA0/export?format=csv&id=KEY&gid=0\"\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"hubei = parseData(\n await d3.csv(\n \"https://docs.google.com/spreadsheets/d/14KUNWP0v7VdL5mHtfBhWESRkC3In8YlmxNSULXQtqA0/export?format=csv&id=KEY&gid=2009268514\"\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":798,"value":"tessin","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"function parseData(d) {\n return d.map(day => {\n return {\n date: new Date(Date.parse(day.Datum)),\n day: parseInt(day.Tag),\n cases: parseInt(day[\"bestätigte Fälle\"]),\n measure: day[\"Massnahme Label\"],\n testing: day[\"Testing\"],\n phase: day.Verdoppelungszahl\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":996,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function max(d) {\n return d3.max(d, e => e.cases);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"function min(d) {\n return d3.min(d, e => e.cases);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":979,"value":"import { formatNumber } from \"@jonasoesch/nzz-utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}