2b:null 2c:["$","title",null,{"children":"Temperaturen (dark) | RND | Observable"}] 31:T6ba,klimarechner = addTooltips( Plot.plot({ marginBottom: 40, marginTop: 30, marginLeft: 50, marginRight: 30, height: balken * 17 + 70, width, color: { type: "diverging", range: ["#4F80FF", "#80A3FF", "#B3C8FF", "#F0C1B2", "#E84F1C", "#C9212C"] }, y: { grid: true, label: "", tickFormat: d3.format("") }, x: { grid: true, domain: [-max, max], ticks: width / 200, tickFormat: d3.format("+"), label: "<- Temperaturabweichung", labelAnchor: "center" }, marks: [ Plot.barX(tempdate, { y: "jahr", x: "anomalie", fill: "anomalie", title: (d) => `${d.tag}. ${monat} ${ d.jahr } \n Durchschnittstemperatur \n in Deutschland: \n ${d.temp.toLocaleString( "de", { day: "numeric", month: "numeric", year: "numeric" } )} Grad`, sort: { y: "y", reverse: true } }), Plot.text( tempdate.filter((d) => d.anomalie >= 0), { y: "jahr", x: "anomalie", text: (d) => "+" + d.anomalie.toLocaleString("de", { minimumFractionDigits: 1, maximumFractionDigits: 1 }), textAnchor: "start", dx: 2 } ), Plot.text( tempdate.filter((d) => d.anomalie < 0), { y: "jahr", x: "anomalie", text: (d) => d.anomalie.toLocaleString("de", { minimumFractionDigits: 1, maximumFractionDigits: 1 }), dx: -2, textAnchor: "end" } ) ] }) )32:Tcc7,addTooltips = (chart, styles) => { const stroke_styles = { stroke: "#99AFC2", "stroke-width": 3 }; const fill_styles = { fill: "#99AFC2", opacity: 0.5 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (styles === undefined) styles = stroke_styles; } }); if (styles === undefined) styles = fill_styles; const tip = wrapper .selectAll(".hover") .data([1]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "middle"); // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n")); else tip.selectAll("*").remove(); // Raise it d3.select(this).raise(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width / 2}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width / 2 > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width / 2}, ${ pointer[1] + 7 })` ); }) .on("pointerout", function (event) { tip.selectAll("*").remove(); // Lower it! d3.select(this).lower(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => tip.selectAll("*").remove()); // Define the styles chart.appendChild(html``35:[] 2f:{"id":"c4b02b4df1be24f6","slug":"temperaturen","title":"Temperaturen (dark)","thumbnail":"ba8b13c4bf7a12d3cbb81e4be031e193fba211e6ded137cabcb510ccfbfa720f","access_level":"public","create_time":"$D2022-05-17T08:55:05.028Z","update_time":"$D2023-09-06T07:23:54.854Z","view_time":null,"first_public_time":"$D2022-05-17T14:55:07.008Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"b8db01b7dd27a055","login":"rnd","name":"RND","avatar_url":"https://avatars-next.observableusercontent.com/8cd6e8f8a280701f2c59b563c390950d7287c4e64c058ec466b6042ca5b6e9e1","tier":"starter_2024"},"version":4719,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5f9b41b7f852d3da","login":"rnd","name":"RND","avatar_url":"https://avatars-next.observableusercontent.com/8cd6e8f8a280701f2c59b563c390950d7287c4e64c058ec466b6042ca5b6e9e1","tier":null}],"members":[{"type":"individual","id":"5f9b41b7f852d3da","login":"rnd","name":"RND","avatar_url":"https://avatars-next.observableusercontent.com/8cd6e8f8a280701f2c59b563c390950d7287c4e64c058ec466b6042ca5b6e9e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Temperaturen (dark)","cells":[{"id":3563,"value":"# Temperaturen (dark)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3964,"value":"viewof date = Inputs.date({label: \"Wann ist Ihr Geburtstag?\", value: \"1976-04-28\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4672,"value":"title = md`

Ihr bisher wärmster Geburtstag war der ${tag}. ${monat} ${warm.jahr}

Die Grafik zeigt die Abweichung der durchschnittlichen Lufttemperatur an Ihrem Geburtstag vom langjährigen Mittelwert.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4225,"value":"klimarechner.legend(\"color\", {label: \"Temperaturabweichung\", width, ticks: 3, marginLeft: 50, marginRight: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4031,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4476,"value":"credits = md`
Idee: Tereza Iofciu, Quelle: DWD, eigene Berechnung
`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3953,"value":"//Rohdaten importieren\ntemplong = d3.csv(\"https://static.rndtech.de/share/rnd/tagesmittel.csv\").then(\n function(data) {\n data.forEach(function(d) {\n d.date = new Date(d.date);\n d.tag = +d.tag;\n d.monat = +d.monat;\n d.jahr = +d.jahr;\n d.station = +d.station;\n d.temp = +d.temp;\n d.templang = +d.templang;\n d.anomalie = +d.anomalie;\n });\n return data;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4013,"value":"//Kombination aus Tag und Monat aus Rohdaten filtern\n\ntempdate = templong.filter(d => d.date.getMonth() === date.getMonth() && d.date.getDate() === date.getDate() && d.date.getYear() >= date.getYear())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4179,"value":"//Zahl der Einträge errechnen\nbalken = tempdate.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4205,"value":"//höchsten Wert errechnen für Maximalwert der x-Achse\nmax = Math.round(Math.max(d3.max(tempdate, function(d) { return Math.abs(d.anomalie) } )) + 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4422,"value":"//Tag des eingegebenen Datum extrahieren für die Unterzeile\ntag = date.getDate();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4431,"value":"//Monat des eingegebenen Datum extrahieren für die Unterzeile\nmonat = monthNames[date.getMonth()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4437,"value":"//Jahr des eingegebenen Datum extrahieren für die Unterzeile\njahr = date.getFullYear();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4445,"value":"monthNames = [\"Januar\", \"Februar\", \"März\", \"April\", \"Mai\", \"Juni\", \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4500,"value":"//Funktion zum Sortieren der Daten nach Anolmalie\nfunction compareanomalie( a, b ) {\n if ( a.anomalie > b.anomalie ){\n return -1;\n }\n if ( a.anomalie < b.anomalie ){\n return 1;\n }\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4526,"value":"//Daten nach Anomalie sortieren und das das wärmste Jahr herausfiltern\nwarm = tempdate.sort(compareanomalie)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4555,"value":"//Funktion zum Sortieren der Daten nach Datum\n\nfunction comparedate( a, b ) {\n if ( a.date > b.date ){\n return -1;\n }\n if ( a.date < b.date ){\n return 1;\n }\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4564,"value":"//Daten nach Datum sortieren und die vergangenen zehn Jahre herausfiltern\njahrzehnte = tempdate.sort(comparedate).slice(0,20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4589,"value":"//Durchschnittsanomalie der vergangenen zehn Jahre\nanomaliemean = d3.mean(jahrzehnte, d => d.anomalie)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4626,"value":"//Durchschnittstemperatur der vergangenen zehn Jahre\ntempmean = d3.mean(jahrzehnte, d => d.temp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4703,"value":"// To generate a unique ID for each chart so that they styles only apply to that chart\nid_generator = () => {\n var S4 = function () {\n return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);\n };\n return \"a\" + S4() + S4();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4705,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4707,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4607,"value":"//Länge der Jahrzehnte ermitteln\ndauer = jahrzehnte.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4009,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"