31:T5a6,countryNameTranslation = ({ China: "China", Canada: "Kanada", Denmark: "Dänemark", France: "Frankreich", Germany: "Deutschland", India: "Indien", Ireland: "Irland", Japan: "Japan", Norway: "Norwegen", Singapore: "Singapur", "South Korea": "Südkorea", Spain: "Spanien", Sweden: "Schweden", Switzerland: "Schweiz", "United Kingdom": "Grossbritannien", "United States": "USA", Australia: "Australien", Austria: "Österreich", Italy: "Italien", Romania: "Rumänien", Brazil: "Brasilien", Mexico: "Mexiko", "United Arab Emirates": "VAE", Russia: "Russland", Indonesia: "Indonesien", Netherlands: "Niederlande", "New Zealand": "Neuseeland", "Saudi Arabia": "Saudiarabien", Turkey: "Türkei", Finland: "Finnland", "South Africa": "Südafrika", Thailand: "Thailand", Chile: "Chile", Belgium: "Belgien", "Czech Republic": "Tschechien", Poland: "Poland", Romania: "Rumänien", "Belarus": 'Weissrussland', "Lithuania": "Litauen", Estonia: "Estland", "Bulgaria": "Bulgarien", Croatia: "Kroatien", Poland: "Polen", Iceland: "Island", Slovenia: "Slowenien", Latvia: "Lettland", Luxembourg: "Luxemburg", Hungary: "Ungarn", Cyprus: "Zyprus", Serbia: "Serbien", Moldova: "Moldawien", "Bosnia and Herzegovina": "Bosnien", Albania: "Albanien", Greece: "Griechenland", Georgia: "Georgien", "Slovak Republic": "Slowakei", "Kazakhstan": "Kasachstan" })32:T5fd,function svgScaffold(conf) { const colorScale = colorScaleFactory(data); const yScale = yScaleFactory(data, conf); const range = colorScale.range(); const radius = verticalRhythm / 3; return svg` `; }33:T5bc,function line(svgNode) { // Interface let yScale = val => val; let xScale = val => val; let y = ""; let x = ""; let conf = {}; let data = []; let color = "#000000"; // Drawing code function self(svgNode) { let el = svgNode.append("g").attr("id", "line"); el.append("path") .datum(data) .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr( "d", d3 .line() .x(function(d) { return xScale(d[x]); }) .y(function(d) { return yScale(d[y]); }) ); } // Setters und getters self.conf = function(val) { if (!arguments.length) return conf; conf = val; return self; }; self.y = function(val) { if (!arguments.length) return y; y = val; return self; }; self.x = function(val) { if (!arguments.length) return x; x = val; return self; }; self.yScale = function(val) { if (!arguments.length) return yScale; yScale = val; return self; }; self.xScale = function(val) { if (!arguments.length) return xScale; xScale = val; return self; }; self.data = function(val) { if (!arguments.length) return data; data = val; return self; }; self.color = function(val) { if (!arguments.length) return color; color = val; return self; }; return self; }34:T73c,function boxes(svgNode) { // Interface let yScale = val => val; let xScale = val => val; let colorScale = val => val; let y = ""; let x = ""; let conf = {}; let data = []; // Drawing code function self(svgNode) { let el = svgNode.append("g").attr("id", "boxes"); el.append("g") .attr("stroke", "none") .selectAll("rect") .data(data) .join("rect") .attr("x", d => { const currentDate = d[xDatumName]; const previousDate = new Date(currentDate.valueOf()); previousDate.setDate(currentDate.getDate() - dataGap); return xScale(previousDate); }) .attr("y", d => yScale(d[yDatumName])) .attr("width", d => { const currentDate = d[xDatumName]; const nextDate = new Date(currentDate.valueOf()); nextDate.setDate(currentDate.getDate() + dataGap); return xScale(nextDate) - xScale(currentDate); }) .attr("height", yScale.bandwidth()) .attr("fill", d => colorScale(d[valueName])); } // Setters und getters self.conf = function(val) { if (!arguments.length) return conf; conf = val; return self; }; self.y = function(val) { if (!arguments.length) return y; y = val; return self; }; self.x = function(val) { if (!arguments.length) return x; x = val; return self; }; self.yScale = function(val) { if (!arguments.length) return yScale; yScale = val; return self; }; self.xScale = function(val) { if (!arguments.length) return xScale; xScale = val; return self; }; self.data = function(val) { if (!arguments.length) return data; data = val; return self; }; self.colorScale = function(val) { if (!arguments.length) return colorScale; colorScale = val; return self; }; return self; }35:T4e3,function xAxis(selection) { // Interface let conf = {}; let scale; let format = date => date; let tickValues = []; // Drawing code function self(svgNode) { let el = svgNode.append("g").attr("id", "xTicks"); let axis = d3 .axisTop() .tickValues(tickValues) .tickFormat(format) .scale(scale); el.call(axis); el.selectAll("path").remove(); el.selectAll(".tick line").remove(); el.selectAll(".tick text") .attr("y", conf.top - 5) .style("font-family", font) .style('fill', textColor) .attr("font-size", fontSize); el.select(".tick:first-of-type text").attr("text-anchor", "start"); el.select(".tick:last-of-type text").attr("text-anchor", "end"); } // Setters and getters self.conf = function(val) { if (!arguments.length) return conf; conf = val; return self; }; self.scale = function(val) { if (!arguments.length) return scale; scale = val; return self; }; self.format = function(val) { if (!arguments.length) return format; format = val; return self; }; self.tickValues = function(val) { if (!arguments.length) return tickValues; tickValues = val; return self; }; return self; }36:T447,function yAxis(svgNode) { // Interface let conf = {}; let scale; let format = num => num; let tickValues = [0, 10]; // Drawing code function self(svgNode) { let el = svgNode.append("g").attr("id", "yTicks"); let axis = d3.axisLeft().scale(scale).tickFormat(format); el.call(axis); el.selectAll("path").remove(); el.selectAll(".tick line").remove(); el.selectAll(".tick text") .attr("text-anchor", "end") .attr("x", conf.left - 5) .style("font-family", font) .style("fill", textColor) .attr("font-size", fontSize); } // Setters and getters self.conf = function(val) { if (!arguments.length) return conf; conf = val; return self; }; self.scale = function(val) { if (!arguments.length) return scale; scale = val; return self; }; self.format = function(val) { if (!arguments.length) return format; format = val; return self; }; self.tickValues = function(val) { if (!arguments.length) return tickValues; tickValues = val; return self; }; return self; }37:[{"id":"7b892aa01eee401fd757f4e4b7a007a5f4e1b7d7dc625d1a483b2151b68024e1dcb535eda729700fa817bd3ab1760c9121867533eb81d8771b2e85f1e7a363c6","href":"https://static.observableusercontent.com/files/7b892aa01eee401fd757f4e4b7a007a5f4e1b7d7dc625d1a483b2151b68024e1dcb535eda729700fa817bd3ab1760c9121867533eb81d8771b2e85f1e7a363c6","name":"fra@1.csv","type":"text/csv","lastModified":1599819082436.987,"size":42232},{"id":"7e52d67461bdaaeb45c87abeb69efacae9aee9b601f0508dcb2c439e11fc62586e7ce04d19a4b54b14564d5cff555e98cc3c0dd38cfca25a81bff5883256e424","href":"https://static.observableusercontent.com/files/7e52d67461bdaaeb45c87abeb69efacae9aee9b601f0508dcb2c439e11fc62586e7ce04d19a4b54b14564d5cff555e98cc3c0dd38cfca25a81bff5883256e424","name":"fra@5.csv","type":"text/csv","lastModified":1599819434515.841,"size":41575},{"id":"1205016b8c027cde218f289de4d01e1ec5fc8f4b12e6d74093523de6c630dcf0a983d3759d6bac225a4eb936ee81e855e69e4b5488c5fc52dfa03155e4e1c651","href":"https://static.observableusercontent.com/files/1205016b8c027cde218f289de4d01e1ec5fc8f4b12e6d74093523de6c630dcf0a983d3759d6bac225a4eb936ee81e855e69e4b5488c5fc52dfa03155e4e1c651","name":"fra@9.csv","type":"text/csv","lastModified":1599822545921.783,"size":39608},{"id":"1205016b8c027cde218f289de4d01e1ec5fc8f4b12e6d74093523de6c630dcf0a983d3759d6bac225a4eb936ee81e855e69e4b5488c5fc52dfa03155e4e1c651","href":"https://static.observableusercontent.com/files/1205016b8c027cde218f289de4d01e1ec5fc8f4b12e6d74093523de6c630dcf0a983d3759d6bac225a4eb936ee81e855e69e4b5488c5fc52dfa03155e4e1c651","name":"fra@8.csv","type":"text/csv","lastModified":1599821440579.561,"size":39608}] 2f:{"title":"Test positivity by age group","cells":[{"id":0,"value":"md`# Test positivity by age group`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"md`### Updates\n\n1. Datei unter _Files_ ersetzen\n2. Bilder unter dem Header _Downloads_ herunterladen\n3. In Q ersetzen\n4. Profit\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`## Preview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"draw({ w: mobileWidth })","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`## Downloads`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"stringency_mw = render(mobileWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"stringency_cw = render(contentWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"function render(width = mobileWidth) {\n return svgToCanvas(draw({ w: width }), 3);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"function draw(conf) {\n const config = {\n w: conf.w,\n h: countryList.length * verticalRhythm,\n top: verticalRhythm * 2,\n bottom: 3,\n left: 110,\n right: 32\n };\n\n const xScale = xScaleFactory(data, config);\n const yScale = yScaleFactory(data, config);\n const colorScale = colorScaleFactory();\n\n const svgNode = svgScaffold(config);\n\n const chart = d3\n .select(svgNode)\n .append('g')\n .attr('transform', `translate(${conf.left}, ${conf.top})`);\n\n const x = xAxis()\n .conf(config)\n .format(formatShortDate)\n .tickValues([evenEarlierDate, mostCurrentDate])\n .scale(xScale);\n\n const y = yAxis()\n .conf(config)\n .format(t => t.replace('-', '–'))\n .scale(yScale);\n\n const boxingDay = boxes()\n .conf(config)\n .colorScale(colorScale)\n .x(xDatumName)\n .y(yDatumName)\n .xScale(xScale)\n .yScale(yScale)\n .data(data);\n\n chart.call(x);\n chart.call(y);\n chart.call(boxingDay);\n\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"rawData = d3.csvParse(await FileAttachment(\"fra@9.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"// Data Cleanup\ndata = rawData.map(d => ({\n [xDatumName]: new Date(d['Date']),\n [yDatumName]: translateCountry(d['CountryName']),\n [valueName]: +d['StringencyIndexForDisplay']\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"countryList = data\n .reduce((collectedCountries, d) => {\n const c = d[yDatumName];\n if (!collectedCountries.includes(c)) {\n collectedCountries.push(c);\n }\n return collectedCountries;\n }, [])\n .sort((a, b) => {\n const ageRegex = /^\\d{1,2}/\n const aVal = +a.match(ageRegex)[0]\n const bVal = +b.match(ageRegex)[0]\n return aVal - bVal\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Utilities & Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { svgToCanvas } from \"@jonasoesch/nzz-utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"d3 = require('d3-axis', 'd3-scale', 'd3-selection', 'd3-array', 'd3-dsv', 'd3-shape', 'd3-interpolate')","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"mobileWidth = 380","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"contentWidth = 680","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"fullWidth = 1150","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"font = \"GTAmerica-Regular, GTAmericaRegular, GT America\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"fontSize = \"14px\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"lineHeight = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"textColor = '#05032d'","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"strokeColor = '#c3c2ca'","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"verticalRhythm = lineHeight","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"xDatumName = \"date\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"yDatumName = \"country\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"dataGap = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"valueName = \"stringencyIndex\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"mostCurrentDate = d3.max(data, d => d[xDatumName])","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"firstAvailableDate = d3.min(data, d => d[xDatumName])","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"evenEarlierDate = new Date(firstAvailableDate.valueOf()).setDate(\n firstAvailableDate.getDate() - dataGap\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"function translateCountry(name) {\n if (countryNameTranslation[name]) {\n return countryNameTranslation[name];\n }\n\n return name;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`### Formatting`","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"// using fr-CH as a number format here, because it uses white space as thousand separator, just as NZZ does\nformatRound = new Intl.NumberFormat('fr-CH').format","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"formatVeryRound = new Intl.NumberFormat('fr-CH', {\n maximumFractionDigits: 0\n}).format","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"formatShortDate = new Intl.DateTimeFormat('de-CH', {\n month: 'numeric',\n day: 'numeric'\n}).format","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`### Drawing functions`","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"gradientStops = [0, 25, 50, 75, 100]","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`### Scales`","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"function xScaleFactory(d, conf) {\n const evenEarlierDate = new Date(firstAvailableDate.valueOf());\n evenEarlierDate.setDate(firstAvailableDate.getDate() - dataGap);\n\n return d3\n .scaleTime()\n .domain([evenEarlierDate, mostCurrentDate])\n .range([conf.left, conf.w - conf.right]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"function yScaleFactory(data, conf) {\n return d3\n .scaleBand()\n .domain(countryList)\n .range([conf.h - conf.bottom, conf.top])\n .paddingInner(0.3);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"function colorScaleFactory() {\n return (\n d3\n .scaleSequential(d3.interpolateHcl('#edece1', '#d64b47'))\n // Use the extent of the data, or …\n .domain(d3.extent(data, d => d[valueName]))\n // use the extent of the index\n //.domain([0, 100])\n // .domain([33.333444, 66.6666])\n .nice()\n .unknown('#abb4f0')\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"gradientPositionScale = d3\n .scaleLinear()\n .domain([0, 100])\n .range(colorScaleFactory(data).domain())","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"md`## Teaser Image`","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"draw({ w: 400 })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}