2f:T578,function svgScaffold(conf) { const colorScale = colorScaleFactory(data); const yScale = yScaleFactory(data, conf); const range = colorScale.range(); const radius = verticalRhythm / 3; return svg` `; }30: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; }31:T6ae,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 = currentDate - dataGap; return xScale(previousDate); }) .attr("y", d => yScale(d[yDatumName])) .attr("width", d => { const currentDate = d[xDatumName]; const nextDate = currentDate + 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; }32: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; }33:T434,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); 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; }34:[{"id":"c3e0e6b524d00920afd0afb0e6ce951f3134d4e7200cbcaebc4991e72f51a9f382434cb7d693802047362906381b2ae3d3943cff4974230f116542ecc1a823f5","href":"https://static.observableusercontent.com/files/c3e0e6b524d00920afd0afb0e6ce951f3134d4e7200cbcaebc4991e72f51a9f382434cb7d693802047362906381b2ae3d3943cff4974230f116542ecc1a823f5","name":"sahel_temperature@1.csv","type":"text/csv","lastModified":1674549001154.679,"size":4092},{"id":"1158f233ed3637ed3f08a948bbeb99a5a6d29ad267ef8cbe348b04dfdce41ec5a7502b03ba6deb34c651f70cc24e583f4cd765f9456824883137ae3666687542","href":"https://static.observableusercontent.com/files/1158f233ed3637ed3f08a948bbeb99a5a6d29ad267ef8cbe348b04dfdce41ec5a7502b03ba6deb34c651f70cc24e583f4cd765f9456824883137ae3666687542","name":"sahel_temperature.csv","type":"text/csv","lastModified":1674548834881.508,"size":4097}] 2d:{"title":"Durchschnittstemperaturen Sahel","cells":[{"id":0,"value":"md`# Durchschnittstemperaturen Sahel`","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":"sommertemperaturen_mw = render(mobileWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"sommertemperaturen_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: 68,\n right: 34\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 .tickValues([firstAvailableDate, mostCurrentDate])\n .scale(xScale);\n\n const y = yAxis()\n .conf(config)\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":"dataRaw = await FileAttachment(\"sahel_temperature@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"// Data Cleanup\ndata = dataRaw.map(d => ({\n [xDatumName]: +d[xDatumName],\n [yDatumName]: translateCountry(d[yDatumName]),\n [valueName]: d.value\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 aData = data.find(\n el => el[xDatumName] - mostCurrentDate === 0 && el[yDatumName] === a\n );\n const bData = data.find(\n el => el[xDatumName] - mostCurrentDate === 0 && el[yDatumName] === b\n );\n return bData[valueName] - aData[valueName];\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"firstTemperatures = countryList.map(c => {\n return data.filter(d => d[yDatumName] === c).sort((a, b) => a[xDatumName] - b[xDatumName])[0]\n})","pinned":true,"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 = \"year\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"yDatumName = \"city\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"dataGap = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"valueName = \"val\"","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 = firstAvailableDate - dataGap","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"countryNameTranslation = ({\n \"StGallen\": \"St. Gallen\",\n \"Sion\": \"Sitten\"\n})","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', { maximumFractionDigits: 1,\n minimumFractionDigits: 1}).format","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"formatVeryRound = new Intl.NumberFormat('fr-CH', { maximumFractionDigits: 0}).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":803,"value":"formatCelcius = (number) => formatVeryRound(number) + ' °C'","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`### Drawing functions`","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"gradientStops = [0, 25, 50, 75, 100]","pinned":true,"hidden":false,"mode":"ojs"},{"id":748,"value":"draw({ w: mobileWidth })","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$33","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 return d3\n .scaleLinear()\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.piecewise(d3.interpolateLab, ['#CEE9F2', '#DBD8BF', '#E66E4A', '#873A86']))\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":651,"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":"$W34","stdlib":"1","titling":"auto"}