2b:null 2c:["$","title",null,{"children":"Single Climate Diagram | Adrian Herzog | Observable"}] 31:T2431,classic_plus = { // Alle Farben an einem Ort -- hier anpassen, nicht weiter unten in den // D3-Aufrufen suchen. Eine Sektion pro Serie (historisch/Vorjahr/ // aktuelles Jahr), da Balken-, Linien- und Punktfarbe einer Serie // typischerweise zusammen geändert werden. const colors = { historical: { bar: myColor, // kommt von der geteilten Notebook-Variable, nicht hier hardcoden line: "red", lineWidth: 10, dot: "black", dotStroke: "none", dotRadius: 4, }, previousYear: { bar: "#a9c9a9", barStroke: "white", barStrokeWidth: 0.5, line: "#d1a98b", lineWidth: 7, dot: "#c1997b", dotStroke: "white", dotStrokeWidth: 1, dotRadius: 4, }, currentYear: { bar: "#78844A", barStroke: "white", barStrokeWidth: 0.5, line: "#ee9944", lineWidth: 7, dot: "#8b0000", dotStroke: "white", dotStrokeWidth: 1, dotRadius: 4, }, axisTemp: "darkred", axisPrec: "darkblue", legendText: "#666", }; const svg = d3.create("svg").attr("viewBox", [0, 0, width + 60, height]); // Vorjahr: nur ab dem aktuellen Monat zeigen (nicht das ganze Jahr) -- // so setzt die Linie/Säule genau dort an, wo currentYear endet. const currentMonthNum = new Date().getMonth() + 1; const previousYearFromNow = (previousYear || []).filter((d) => d.month >= currentMonthNum); // Eigene Skalen nur für diese Zelle: Domain erweitert um currentYear/ // previousYear, damit deren z.T. höhere Monatswerte nicht aus dem // Diagramm herausragen. classic/walter_lieth/klimogramm bleiben // unverändert, da deren yT/yP nur auf `data` (historische Normalwerte) // basieren -- darum hier lokale yT2/yP2 statt der geteilten yT/yP, und // in der Folge auch lokale Nachbauten von precipitations()/ // temperaturelines()/den Gridlines/Achsen, die sonst an die geteilte // yT/yP gebunden wären. const allTemps = data.map(d => d.temp) .concat(currentYear ? currentYear.map(d => d.temp) : []) .concat(previousYearFromNow.map(d => d.temp)); const allPrecs = data.map(d => d.prec) .concat(currentYear ? currentYear.map(d => d.prec) : []) .concat(previousYearFromNow.map(d => d.prec)); const yT2 = d3.scaleLinear() .domain([d3.min(allTemps) - 2.5, d3.max(allTemps) + 2.5]).nice() .range([height - margin.bottom, margin.top]); const yP2 = d3.scaleLinear() .domain([0, Math.max(d3.max(allPrecs), 30)]).nice() .range([height - margin.bottom, margin.top]); svg.append('g').attr('class', 'grid-lines-p') .selectAll('line').data(yP2.ticks(12)).join('line') .attr('x1', margin.left).attr('x2', width - margin.right) .attr('y1', d => 0.5 + yP2(d)).attr('y2', d => 0.5 + yP2(d)) .style('stroke-dasharray', '3, 3'); svg.append('g').attr('class', 'grid-lines-t') .selectAll('line').data(yT2.ticks()).join('line') .attr('x1', margin.left).attr('x2', width - margin.right) .attr('y1', d => 0.5 + yT2(d)).attr('y2', d => 0.5 + yT2(d)) .style('stroke-dasharray', '8, 3') .attr('class', 'axisT'); // --- Historisch (Normalwerte) -- Balken, Linie, Punkte --- // lokal mit yP2/yT2 neu gezeichnet (Inhalt identisch zu // precipitations()/temperaturelines(), nur die Skala ist die lokal // erweiterte). svg.append('g').attr('fill', colors.historical.bar) .selectAll('rect').data(data).join('rect') .attr('x', (d, i) => x(i)) .attr('y', d => yP2(d.prec)) .attr('height', d => yP2(0) - yP2(d.prec)) .attr('width', x.bandwidth()); svg.append('path').datum(data) .style('stroke', colors.historical.line).style('stroke-width', colors.historical.lineWidth) .attr('class', 'line').attr('fill', 'none') .attr('d', d3.line().curve(d3.curveCatmullRom.alpha(0.15)) .x((d, i) => x(i) + x.bandwidth()/2) .y(d => yT2(d.temp))); svg.selectAll("myCircles").data(data).enter().append("circle") .attr("fill", colors.historical.dot).attr("stroke", colors.historical.dotStroke) .attr("cx", (d, i) => (x(i) + x.bandwidth()/2)) .attr("cy", (d) => yT2(d.temp)).attr("r", colors.historical.dotRadius); // Schmale Säulen nebeneinander statt einer breiten -- so bleiben // currentYear und previousYear im gemeinsamen Übergangsmonat beide // sichtbar statt sich zu überdecken. Das Nebeneinander ergibt aber nur // Sinn, wenn für denselben Monat wirklich BEIDE Serien einen Balken // haben (der eine Übergangsmonat) -- in jedem anderen Monat hat nur // eine der beiden einen Balken, der sonst einseitig verschoben statt // mittig über dem Monatslabel sitzen würde. Darum pro Monat prüfen und // nur im echten Überschneidungsfall versetzen, sonst zentrieren. const barW = x.bandwidth() * 0.2; const currentYearMonths = new Set((currentYear || []).map((d) => d.month)); const previousYearMonths = new Set(previousYearFromNow.map((d) => d.month)); const overlappingMonths = new Set( [...currentYearMonths].filter((m) => previousYearMonths.has(m)) ); function barX(month, isCurrentYear) { const center = x(month - 1) + x.bandwidth() / 2; if (!overlappingMonths.has(month)) return center - barW / 2; // allein -> zentriert return isCurrentYear ? center - barW : center; // beide da -> nebeneinander } // --- Vorjahr (ab aktuellem Monat) -- Balken, Linie, Punkte --- if (previousYearFromNow.length) { svg.selectAll(".pyPBar").data(previousYearFromNow).enter().append("rect") .attr("class", "pyPBar") .attr("x", (d) => barX(d.month, false)) .attr("y", (d) => yP2(d.prec)) .attr("width", barW) .attr("height", (d) => yP2(0) - yP2(d.prec)) .attr("fill", colors.previousYear.bar) .attr("stroke", colors.previousYear.barStroke) .attr("stroke-width", colors.previousYear.barStrokeWidth); const pyTLine = d3.line().x((d) => x(d.month - 1) + x.bandwidth()/2).y((d) => yT2(d.temp)); svg.append("path").datum(previousYearFromNow).attr("fill", "none") .attr("stroke", colors.previousYear.line).attr("stroke-width", colors.previousYear.lineWidth) .attr("d", pyTLine); svg.selectAll(".pyT").data(previousYearFromNow).enter().append("circle").attr("class", "pyT") .attr("fill", colors.previousYear.dot).attr("stroke", colors.previousYear.dotStroke).attr("stroke-width", colors.previousYear.dotStrokeWidth) .attr("cx", (d) => x(d.month - 1) + x.bandwidth()/2).attr("cy", (d) => yT2(d.temp)).attr("r", colors.previousYear.dotRadius); } // --- Aktuelles Jahr (bis jetzt) -- Balken, Linie, Punkte, Legende --- if (currentYear && currentYear.length) { svg.selectAll(".cyPBar").data(currentYear).enter().append("rect") .attr("class", "cyPBar") .attr("x", (d) => barX(d.month, true)) .attr("y", (d) => yP2(d.prec)) .attr("width", barW) .attr("height", (d) => yP2(0) - yP2(d.prec)) .attr("fill", colors.currentYear.bar) .attr("stroke", colors.currentYear.barStroke) .attr("stroke-width", colors.currentYear.barStrokeWidth); const tLine = d3.line().x((d) => x(d.month - 1) + x.bandwidth()/2).y((d) => yT2(d.temp)); svg.append("path").datum(currentYear).attr("fill", "none") .attr("stroke", colors.currentYear.line).attr("stroke-width", colors.currentYear.lineWidth) .attr("d", tLine); svg.selectAll(".cyT").data(currentYear).enter().append("circle").attr("class", "cyT") .attr("fill", colors.currentYear.dot).attr("stroke", colors.currentYear.dotStroke).attr("stroke-width", colors.currentYear.dotStrokeWidth) .attr("cx", (d) => x(d.month - 1) + x.bandwidth()/2).attr("cy", (d) => yT2(d.temp)).attr("r", colors.currentYear.dotRadius); svg.append("text").attr("x", 44).attr("y", height - 4).attr("font-size", 10) .style("fill", colors.legendText) .text(`Dark red: ${new Date().getFullYear()} so far · Light grey: ${new Date().getFullYear() - 1} from current month on · Red/blue: long-term normal (ERA5-Land, ~9km, provisional)`); } // --- Achsen -- lokal mit yT2/yP2 (Inhalt identisch zu yAxisT/yAxisP, --- // nur die Skala ist die lokal erweiterte). svg.append("g") .attr("transform", `translate(${width + margin.right},0)`) .call(d3.axisRight(yT2).ticks(null, data.format)) .attr("font-size", "16px") .attr("color", colors.axisTemp) .call(g => g.append("text") .attr("x", -margin.right - 70) .attr("y", 35) .attr("fill", colors.axisTemp) .attr("font-size", "16px") .attr("text-anchor", "start") .text("Temperature [ºC]")); svg.append('g').call(locationtext, location.short); svg.append('g').call(summarytext, summary); svg.append('g').call(xGrid); svg.append("g").call(xAxis); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .attr("class", "axisP") .call(d3.axisLeft(yP2).ticks(12, data.format)) .attr("font-size", "16px") .attr("color", colors.axisPrec) .call(g => g.append("text") .attr("x", -margin.left) .attr("y", 35) .attr("fill", colors.axisPrec) .attr("text-anchor", "start") .attr("font-size", "16px") .text("Precipitation [mm]")); return svg.node(); } 32:T14aa,function klimogrammChart(data, { width = 640, height = 480, title = "" } = {}) { const margin = { top: 56, right: 30, bottom: 50, left: 54 }; const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const xTemp = d3.scaleLinear() .domain(d3.extent(data, (d) => d.temp)).nice() .range([margin.left, width - margin.right]); // Precipitation always starts at 0 -- an annual loop's "shape" should read // relative to true zero, not an arbitrary low-water mark. const yPrec = d3.scaleLinear() .domain([0, d3.max(data, (d) => d.prec)]).nice() .range([height - margin.bottom, margin.top]); const points = data.map((d, i) => ({ ...d, i, x: xTemp(d.temp), y: yPrec(d.prec), })); const centroid = { x: d3.mean(points, (p) => p.x), y: d3.mean(points, (p) => p.y), }; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", 11); const defs = svg.append("defs"); // Small auto-oriented triangle, reused as marker-end on every segment so // the path itself carries the chronological direction (see file header). defs.append("marker") .attr("id", "klimo-arrow") .attr("viewBox", "0 0 10 10") .attr("refX", 8) .attr("refY", 5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto-start-reverse") .append("path") .attr("d", "M0,0 L10,5 L0,10 Z") .style("fill", "#888"); const pointRadius = 4; // 12 individual segments (i -> i+1, wrapping Dec -> Jan) rather than one // closed d3.line path, purely so marker-end can be attached per segment -- // a single path only gets one marker-end, at its very last vertex. // // Each segment's endpoint is pulled back by pointRadius + a small gap, not // drawn all the way into the target circle's center: with the endpoint AT // the center, most of the arrowhead triangle ends up underneath the circle // (drawn on top) and only its very tip pokes out past the circle's edge -- // a stray sliver instead of a clean arrow. Stopping short means the whole // arrowhead renders in the open, right before the circle. const arrowGap = pointRadius + 2; const segments = points.map((p, i) => { const q = points[(i + 1) % points.length]; const dx = q.x - p.x, dy = q.y - p.y; const dist = Math.hypot(dx, dy) || 1; return { x1: p.x, y1: p.y, x2: q.x - (dx / dist) * arrowGap, y2: q.y - (dy / dist) * arrowGap, }; }); svg.append("g") .selectAll("line") .data(segments) .join("line") .attr("x1", (d) => d.x1) .attr("y1", (d) => d.y1) .attr("x2", (d) => d.x2) .attr("y2", (d) => d.y2) .style("stroke", "#888") .style("stroke-width", "1.5px") .attr("marker-end", "url(#klimo-arrow)"); svg.append("g") .selectAll("circle") .data(points) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", pointRadius) .style("fill", "#8e44ad") .style("stroke", "white") .style("stroke-width", "1.5px"); svg.append("g") .selectAll("text") .data(points) .join("text") .attr("x", (d) => { const angle = Math.atan2(d.y - centroid.y, d.x - centroid.x); return d.x + Math.cos(angle) * 14; }) .attr("y", (d) => { const angle = Math.atan2(d.y - centroid.y, d.x - centroid.x); return d.y + Math.sin(angle) * 14; }) .attr("text-anchor", (d) => { const angle = Math.atan2(d.y - centroid.y, d.x - centroid.x); const cos = Math.cos(angle); return cos > 0.3 ? "start" : cos < -0.3 ? "end" : "middle"; }) .attr("dy", "0.32em") .style("fill", "#333") .text((d) => monthNames[d.i]); // Axes. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xTemp).tickFormat((d) => `${d}°`)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yPrec)); svg.append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", height - 8) .attr("text-anchor", "middle") .style("fill", "#555") .text("Temperature (°C)"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + height - margin.bottom) / 2) .attr("y", 14) .attr("text-anchor", "middle") .style("fill", "#555") .text("Precipitation (mm)"); // Header: place name + coordinates, matching the Walter-Lieth cell. svg.append("text") .attr("x", margin.left) .attr("y", 20) .attr("font-weight", "bold") .attr("font-size", 14) .text(title); // Footer: annual mean temperature + annual precipitation sum, same // "⌀ ... °C, Σ ... mm" summary line as the other diagrams on this site. const meanTemp = d3.mean(data, (d) => d.temp); const sumPrec = d3.sum(data, (d) => d.prec); svg.append("text") .attr("x", width / 2) .attr("y", 38) .attr("text-anchor", "middle") .style("fill", "#555") .text(`⌀ ${meanTemp.toFixed(1)} °C Σ ${sumPrec.toFixed(0)} mm`); return svg.node(); }33:T1a09,function walterLiethChart(data, { width = 640, height = 400, title = "" } = {}) { const margin = { top: 56, right: 50, bottom: 46, left: 44 }; const monthNames = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"]; const x = d3.scalePoint().domain(d3.range(12)).range([margin.left, width - margin.right]); // The y-domain has to fit BOTH curves. Sizing it from temperature alone // breaks for wet climates: at 1:2 mm/°C up to 100mm and 1:10 above it, a // 191.6mm month needs ~59°C of "equivalent" headroom -- far more than the // real temperatures ever need. Without this, the precipitation curve is // computed hundreds of pixels above the visible chart and never appears. const dataMaxTemp = d3.max(data, (d) => d.temp); const dataMaxPrec = d3.max(data, (d) => d.prec); const precEquivMax = dataMaxPrec <= 100 ? dataMaxPrec / 2 : 50 + (dataMaxPrec - 100) / 10; const maxTemp = Math.max(20, dataMaxTemp + 2, precEquivMax + 2); const minTemp = Math.min(0, d3.min(data, (d) => d.temp)); const yTemp = d3.scaleLinear().domain([minTemp, maxTemp]).range([height - margin.bottom, margin.top]); const pxPerDegree = yTemp(0) - yTemp(1); // px per +1°C (positive: scale is inverted) const pxPerMmLow = pxPerDegree / 2; // 20mm == 10°C -> 2mm == 1°C const pxPerMmHigh = pxPerMmLow / 5; // compressed 1/5 above 100mm const yAt100 = yTemp(0) - 100 * pxPerMmLow; function precipToY(mm) { return mm <= 100 ? yTemp(0) - mm * pxPerMmLow : yAt100 - (mm - 100) * pxPerMmHigh; } const fills = buildWalterLiethFills(data, x, yTemp, precipToY); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", 11); // Colours are set via .style() (inline CSS), not .attr() (a presentation // attribute) -- presentation attributes have the lowest specificity in CSS // and get silently overridden by the notebook UI's own stylesheet rules on // elements, which is why the temperature curve first appeared to // "not exist" no matter what colour it was set to. const defs = svg.append("defs"); // Humid hatching: thin vertical blue lines (per the classic Walter-Lieth // convention -- solid yellow for arid, hatched blue for the humid area // below the 100mm knick). defs.append("pattern") .attr("id", "wl-humid-hatch") .attr("width", 4).attr("height", 4) .attr("patternUnits", "userSpaceOnUse") .append("line") .attr("x1", 0.5).attr("y1", 0) .attr("x2", 0.5).attr("y2", 4) .style("stroke", "#4a90d9") .style("stroke-width", "1px"); // Clip rect covering everything above the 100mm gridline, used to overlay // solid dark blue on just that part of the humid fill (see below). defs.append("clipPath") .attr("id", "wl-above-100mm") .append("rect") .attr("x", 0) .attr("y", margin.top) .attr("width", width) .attr("height", Math.max(0, yAt100 - margin.top)); // Arid fill: solid yellow. Humid fill: blue vertical hatch. svg.append("g") .selectAll("path") .data(fills) .join("path") .attr("d", (d) => d.d) .style("fill", (d) => (d.type === "humid" ? "url(#wl-humid-hatch)" : "#f5d742")) .style("opacity", (d) => (d.type === "humid" ? 1 : 0.9)); // Above the 100mm knick, the compressed portion is solid dark blue instead // of hatched ("in diesem oberen Bereich ... dunkelblau dargestellt") -- // draw the humid shapes a second time, clipped to only that region, on top // of the hatch. svg.append("g") .attr("clip-path", "url(#wl-above-100mm)") .selectAll("path") .data(fills.filter((d) => d.type === "humid")) .join("path") .attr("d", (d) => d.d) .style("fill", "#0b3d91"); // Dashed reference line at the 100mm knick. svg.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", yAt100) .attr("y2", yAt100) .style("stroke", "#888") .style("stroke-dasharray", "2,2"); // Precipitation curve; straight month-to-month segments (no smoothing -- // see file header comment). svg.append("path") .datum(data) .style("fill", "none") .style("stroke", "#1a5fb4") .style("stroke-width", "2px") .attr("d", d3.line().x((d, i) => x(i)).y((d) => precipToY(d.prec))); // Temperature curve (red). svg.append("path") .datum(data) .style("fill", "none") .style("stroke", "#c0392b") .style("stroke-width", "2px") .attr("d", d3.line().x((d, i) => x(i)).y((d) => yTemp(d.temp))); // Axes. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat((i) => monthNames[i])); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yTemp).ticks(6).tickFormat((d) => `${d}°`)); // Right-hand precipitation axis (mm). Not a linear scale (that's the whole // point of the 100mm knick), so we can't hand this to d3.axisRight — the // ticks are placed by hand via precipToY(), 20mm steps up to 100mm (lined // up with the 10°C-per-step temperature axis), then 100mm steps above. const precTicks = [0, 20, 40, 60, 80, 100]; for (let t = 200; t <= dataMaxPrec + 50; t += 100) precTicks.push(t); const yPrecAxis = svg.append("g").attr("transform", `translate(${width - margin.right},0)`); yPrecAxis.append("line") .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("stroke", "currentColor"); yPrecAxis.selectAll("g.tick") .data(precTicks) .join("g") .attr("class", "tick") .attr("transform", (d) => `translate(0,${precipToY(d)})`) .call((g) => g.append("line").attr("x2", 6).style("stroke", "currentColor")) .call((g) => g.append("text") .attr("x", 9) .attr("dy", "0.32em") .attr("text-anchor", "start") .text((d) => `${d}mm`)); // Header: place name + coordinates. svg.append("text") .attr("x", margin.left) .attr("y", 20) .attr("font-weight", "bold") .attr("font-size", 14) .text(title); // Footer: annual mean temperature + annual precipitation sum, matching the // "⌀ ... °C, Σ ... mm" summary line of the other diagrams on this site. const meanTemp = d3.mean(data, (d) => d.temp); const sumPrec = d3.sum(data, (d) => d.prec); svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .style("fill", "#555") .text(`⌀ ${meanTemp.toFixed(1)} °C Σ ${sumPrec.toFixed(0)} mm`); return svg.node(); } 34:T85a,function buildWalterLiethFills(data, x, yTemp, precipToY) { const raw = data.map((d, i) => ({ xPos: x(i), tY: yTemp(d.temp), pY: precipToY(d.prec), })); // Insert a linearly-interpolated point wherever the two curves cross, so // humid/arid fills get an exact boundary instead of snapping at month ticks. const points = [raw[0]]; for (let i = 0; i < raw.length - 1; i++) { const a = raw[i], b = raw[i + 1]; const diffA = a.pY - a.tY, diffB = b.pY - b.tY; if ((diffA > 0) !== (diffB > 0) && diffA !== diffB) { const f = diffA / (diffA - diffB); const xPos = a.xPos + f * (b.xPos - a.xPos); const y = a.tY + f * (b.tY - a.tY); // tY === pY at the crossing point points.push({ xPos, tY: y, pY: y }); } points.push(b); } // Group into humid/arid runs. diff <= 0 means the precip pixel-y is at or // above the temp pixel-y (remember: the y scale is inverted), i.e. the // precipitation curve is drawn higher on the page -> humid. // // Every real sign change already has an exact interpolated crossing point // in `points` (inserted above), so a run only ever needs to end AT one of // those crossing points -- never one point later. The crossing point has // to be shared by both the outgoing and the incoming run (it's the exact // spot where the fill colour switches), otherwise one run overshoots past // it and the next one starts short, leaving the visible gap/offset at // month boundaries. const runs = []; let run = [points[0]]; let runType = points[0].pY - points[0].tY <= 0 ? "humid" : "arid"; for (let i = 1; i < points.length; i++) { const diff = points[i].pY - points[i].tY; run.push(points[i]); if (Math.abs(diff) < 1e-6) { runs.push({ type: runType, points: run }); runType = runType === "humid" ? "arid" : "humid"; run = [points[i]]; // the crossing point also opens the next run } } runs.push({ type: runType, points: run }); const area = d3.area() .x((d) => d.xPos) .y0((d) => d.tY) .y1((d) => d.pY); return runs.map((r) => ({ type: r.type, d: area(r.points) })); } 35:T711,table_plus = { const th = "padding: 4px 8px; border: 1px solid #ccc; background: #eee; text-align: right"; const tdR = "padding:4px 8px; border:1px solid #ccc; text-align:right"; const tdL = "padding:4px 8px; border:1px solid #ccc; text-align:left"; // Vorjahr defensiv genauso ab dem aktuellen Monat filtern wie classic_plus // -- der Server tut das zwar schon (fetchPreviousYearFromTiles), aber so // bleibt die Tabelle auch bei einer gecachten/älteren Antwort korrekt. const currentMonthNum = new Date().getMonth() + 1; const previousYearFromNow = (previousYear || []).filter((d) => d.month >= currentMonthNum); const cyByMonth = new Map((currentYear || []).map((d) => [d.month, d])); const pyByMonth = new Map(previousYearFromNow.map((d) => [d.month, d])); return html` ${data.map((d, i) => { const cy = cyByMonth.get(i + 1); const py = pyByMonth.get(i + 1); return html``; })}

Month	Temp ºC (normal)	Prec mm (normal)	Temp ºC (this year)	Prec mm (this year)	Temp ºC (last year)	Prec mm (last year)
${months[i]}	${d.temp.toFixed(1)}	${Math.round(d.prec)}	${cy ? cy.temp.toFixed(1) : "–"}	${cy ? Math.round(cy.prec) : "–"}	${py ? py.temp.toFixed(1) : "–"}	${py ? Math.round(py.prec) : "–"}

`; } 36:[] 2f:{"id":"3b06f1aab69ba684","slug":"diagramm_variants","title":"Single Climate Diagram","thumbnail":"d8d1a9fc57f31d80f0b5912f06b8fa437a70f8b3c0f1d3dc1da95b5c6332a27d","access_level":"public","create_time":"$D2021-05-29T13:56:07.823Z","update_time":"$D2026-09-01T21:03:11.848Z","view_time":null,"first_public_time":"$D2026-08-15T14:02:02.124Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d51625848c4262aa","login":"aquilo","name":"Adrian Herzog","avatar_url":"https://avatars-next.observableusercontent.com/859a98670ef7987fabfc945b13446c48cb871ef54a09b465c92c0cebc3b1bdf4","tier":"starter_2024"},"version":2590,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"08e3f2fafce98735","login":"aquilo","name":"Adrian Herzog","avatar_url":"https://avatars-next.observableusercontent.com/859a98670ef7987fabfc945b13446c48cb871ef54a09b465c92c0cebc3b1bdf4","tier":null}],"members":[{"type":"individual","id":"08e3f2fafce98735","login":"aquilo","name":"Adrian Herzog","avatar_url":"https://avatars-next.observableusercontent.com/859a98670ef7987fabfc945b13446c48cb871ef54a09b465c92c0cebc3b1bdf4","tier":null,"role":"editor"},{"type":"team","id":"d51625848c4262aa","login":"aquilo","name":"Adrian Herzog","avatar_url":"https://avatars-next.observableusercontent.com/859a98670ef7987fabfc945b13446c48cb871ef54a09b465c92c0cebc3b1bdf4","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Single Climate Diagram","cells":[{"id":0,"value":"md`# Single Climate Diagram\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1675,"value":"viewof latlon = Text({label: html `Coordinates`, placeholder: \"Enter latitude and longitude...\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2370,"value":"classic = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width + 60, height]);\n// 4.49 -77.58\n// precipitation P\n svg.append('g').call(yGridP)\n svg.append('g').call(yGridT)\n //svg.append('g').call(yGridT0)\n svg.append(\"g\").call(precipitations, data)\n\n// temperature T\n svg.append(\"path\").call(temperaturelines, data)\n svg.selectAll(\"myCircles\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"fill\", \"black\")\n .attr(\"stroke\", \"none\")\n .attr(\"cx\", (d, i) => (x(i) + x.bandwidth()/2))\n .attr(\"cy\", function(d) { return yT(d.temp) })\n .attr(\"r\",4)\n svg.append(\"g\").call(yAxisT)\n\n // tile\n svg.append('g').call(locationtext, location.short)\n svg.append('g').call(summarytext, summary)\n\n // x\n svg.append('g').call(xGrid)\n svg.append(\"g\").call(xAxis)\n svg.append(\"g\").call(yAxisP) \n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2462,"value":"walter_lieth = walterLiethChart(data, {\n width,\n height,\n title: `${location.short} (${latlon})`,\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2486,"value":"klimogramm = klimogrammChart(data, {\n width,\n height,\n title: `${location.short} (${latlon})`,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2501,"value":"currentYear = climateOverlay.currentYear\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2503,"value":"previousYear = climateOverlay.previousYear\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2499,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2484,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2411,"value":"height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2458,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2451,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2494,"value":"table = html`\n \n \n \n \n \n \n \n ${data.map(d => html`\n \n \n \n `)}\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2521,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2522,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":2354,"value":"locationtext = (g, loc) => g\n .append(\"text\")\n .attr(\"x\", (width2 / 2)) \n .attr(\"y\", 18)\n .attr(\"text-anchor\", \"middle\") \n .style(\"font-size\", \"24px\") \n .style(\"font-family\", \"sans-serif\") \n .style(\"text-decoration\", \"none\") \n .style(\"font-stretch\", \"condensed\") \n .text(loc);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2360,"value":"summarytext= (g, text) => g\n .append(\"text\")\n .attr(\"x\", (width2 / 2)) \n .attr(\"y\", height - 18)\n .attr(\"text-anchor\", \"middle\") \n .style(\"font-size\", \"14px\") \n .style(\"font-family\", \"sans-serif\") \n .style(\"text-decoration\", \"none\") \n .style(\"font-stretch\", \"condensed\") \n .text(text);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2291,"value":"precipitations = (g, ddd) => g\n .attr(\"fill\", myColor)\n .selectAll(\"rect\")\n .data(ddd)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(i))\n .attr(\"y\", d => yP(d.prec))\n .attr(\"height\", d => yP(0) - yP(d.prec))\n .attr(\"width\", x.bandwidth());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2307,"value":"temperaturelines = (g, ddd) => g\n .data([ddd])\n .style(\"stroke\", \"red\")\n .style(\"stroke-width\", 10)\n .attr(\"class\", \"line\")\n .attr(\"fill\", \"none\")\n .attr(\"d\", d3.line()\n .curve(d3.curveCatmullRom.alpha(0.15))\n .x((d, i) => (x(i) + x.bandwidth()/2))\n .y((d) => yT(d.temp)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2313,"value":"temperaturepoints = (g, ddd) => g \n .selectAll(\"myCircles\")\n .data(ddd)\n .enter()\n .append(\"circle\")\n .attr(\"fill\", \"black\")\n .attr(\"stroke\", \"none\")\n .attr(\"cx\", (d, i) => (x(i) + x.bandwidth()/2))\n .attr(\"cy\", d => yT(d.temp))\n .attr(\"r\",40)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2051,"value":"summary = \"⌀: \" + Math.round(10 * d3.mean(data, d => d.temp)) / 10 + \" ℃, Σ: \" + Math.round(d3.sum(data, d => d.prec)) + \" mm, ϕ / λ: \" + Math.round(100 * lat)/100 + \" \" + Math.round(100 * lon)/100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1790,"value":"myColor = d3.interpolateBlues(Math.max(maxPrecVal, 60) / 250)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1808,"value":"maxPrecVal = d3.max(data, d => d.prec) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2226,"value":"width2 = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2233,"value":"width1 = width2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"xGrid = (g) => g\n .attr('class', 'grid-lines-x')\n .selectAll('myCircles')\n .data(data)\n .join('line')\n .attr('x1', (d, i) => x(i) - x.bandwidth()/20)\n .attr('x2', (d, i) => x(i) - x.bandwidth()/20)\n .attr('y1', margin.top)\n .attr('y2', height - margin.bottom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"yGridP = (g) => g\n .attr('class', 'grid-lines-p')\n .selectAll('path')\n .data(ypticks)\n .join('line')\n .attr('x1', margin.left)\n .attr('x2', width - margin.right)\n .attr(\"y1\", d => 0.5 + yP(d))\n .attr(\"y2\", d => 0.5 + yP(d))\n .style(\"stroke-dasharray\", (\"3, 3\")) // <== This line here!!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2021,"value":"ypticks = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000].filter(\n function(num){\n return num < d3.max(data, d => d.prec) && num > d3.min(data, d => d.prec)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1850,"value":"ytticks = [-40 -35, -30, -25, -20, -15, -10, -5, 0, 5, 10, 15, 20, 25, 30, 35, 40].filter(\n function(num){\n return num < d3.max(data, d => d.temp) && num > d3.min(data, d => d.temp)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2288,"value":"ytlines = [-40, -30, -20, -10, 0, 10, 20, 30, 40].filter(\n function(num){\n return num < d3.max(data, d => d.temp) && num > d3.min(data, d => d.temp)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1488,"value":"yGridT = (g) => g\n .attr('class', 'grid-lines-t')\n .selectAll('path')\n .data(ytlines)\n .join('line')\n .attr('x1', margin.left)\n .attr('x2', width - margin.right)\n .attr(\"y1\", d => 0.5 + yT(d))\n .attr(\"y2\", d => 0.5 + yT(d))\n .style(\"stroke-dasharray\", (\"8, 3\")) // <== This line here!!\n .attr(\"class\", \"axisT\") ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"x = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"yP = d3.scaleLinear()\n .domain([0, Math.max(d3.max(data, d => d.prec), 30)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2162,"value":"yT = d3.scaleLinear()\n .domain([d3.min(data, d => d.temp) - 2.5, d3.max(data, d => d.temp) + 2.5]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(i => months[data[i].month - 1]).tickSizeOuter(0))\n .attr(\"font-size\", \"15px\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"yAxisP = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"axisP\")\n\n .call(d3.axisLeft(yP).ticks(12, data.format))\n .attr(\"font-size\", \"16px\")\n .attr(\"color\", \"darkblue\")\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 35)\n .attr(\"fill\", \"darkblue\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-size\", \"16px\")\n .text(\"Precipitation [mm]\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"yAxisT = g => g\n .attr(\"transform\", `translate(${width + margin.right},0)`)\n .call(d3.axisRight(yT).ticks(null, data.format))\n .attr(\"font-size\", \"16px\")\n .attr(\"color\", \"darkred\")\n .call(g => g.append(\"text\")\n .attr(\"x\", - margin.right - 70)\n .attr(\"y\", 35)\n .attr(\"fill\", \"darkred\")\n .attr(\"font-size\", \"16px\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Temperature [ºC]\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2251,"value":"data = climate.data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1402,"value":"climate = d3.json(url, data => {\n data.forEach(d => {} );\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2520,"value":"climateOverlay = d3.json(url + \"&overlay=1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1715,"value":"coordparam = \"&lat=\" + lat + \"&lon=\" + lon","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1725,"value":"url = \"https://climate.mapresso.com/climate-data.php?\" + coordparam.substring(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1726,"value":"location = d3.json(\"https://climate.mapresso.com/api/address/?\" + coordparam, data => {\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1762,"value":"lat = isNaN(+latlon.split(\" \")[1]) ? 47.37 : Math.min(+latlon.split(\" \")[0], 84) // ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1765,"value":"lon = isNaN(+latlon.split(\" \")[1]) ? 8.54 : +latlon.split(\" \")[1] // 8.54","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1111,"value":"months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1518,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1523,"value":"margin = ({top: 60, right: 0, bottom: 60, left: 40})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":790,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1679,"value":"import {Text} from \"@observablehq/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"

Month	Temperature ºC	Precipitation [mm]
${months[d.month-1]}	${d.temp.toFixed(1)}	${Math.round(d.prec)}