2d:null 2e:["$","title",null,{"children":"Lokalklima-Monitoring | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T155f,map = { let container = DOM.element("div", { style: `width:${1168}px;height:${650}px` }); yield container; let map = L.map(container).setView([47.4, 8.671], 11); let OpenTopoMap = L.tileLayer( "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", { maxZoom: 17, opacity: 0.4, attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)' } ).addTo(map); /* let osmLayer = L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors' } ).addTo(map); */ //initialize svg to add to map L.svg({ clickable: true }).addTo(map); //Adds the layer to the map. // we have to make the svg layer clickable const overlay = d3.select(map.getPanes().overlayPane); const svg = overlay.select("svg").attr("pointer-events", "auto"); const Dots = svg .selectAll("circle") .attr("class", "Dots") .data(uniqueLocations) .join("circle") .attr("id", "dotties") .attr("fill", function(d) { if (topLocations.includes(d.Standort)) { return "#f70019"; } else if (bottomLocations.includes(d.Standort)) { return "#0076bd"; } else if (d.Standort == referenzStation) { return "#1a7f1f"; } else { return "#7f3da7"; } }) //change the fill .attr("fill-opacity", function(d) { if (topLocations.includes(d.Standort)) { return 1; } else if (bottomLocations.includes(d.Standort)) { return 1; } else if (d.Standort == referenzStation) { return 1; } else { return 0.8; } }) .attr("stroke", "white") .attr("stroke-width", 2) //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to //leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. //Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint(d.LatLng).x) .attr("cy", d => map.latLngToLayerPoint(d.LatLng).y) .attr("r", 10) .on("mouseover", function() { //function to add mouseover event d3.select(this) .transition() //D3 selects the object we have moused over in order to perform operations on it .duration("150") //how long we are transitioning between the two states (works like keyframes) .attr("fill", function(d) { if (topLocations.includes(d.Standort)) { return "#f70019"; } else if (bottomLocations.includes(d.Standort)) { return "#0076bd"; } else if (d.Standort == referenzStation) { return "#1a7f1f"; } else { return "#7f3da7"; } }) //change the fill .attr("fill-opacity", function(d) { if (topLocations.includes(d.Standort)) { return 1; } else if (bottomLocations.includes(d.Standort)) { return 1; } else if (d.Standort == referenzStation) { return 1; } else { return 0.8; } }) .attr("r", 12); }) .on("mouseout", function() { d3.selectAll('.mouseover').remove(); //reverse the action based on when we mouse off the the circle d3.select(this) .transition() .duration("150") .attr("fill", function(d) { if (topLocations.includes(d.Standort)) { return "#f70019"; } else if (bottomLocations.includes(d.Standort)) { return "#0076bd"; } else if (d.Standort == referenzStation) { return "#1a7f1f"; } else { return "#7f3da7"; } }) //change the fill .attr("fill-opacity", function(d) { if (topLocations.includes(d.Standort)) { return 1; } else if (bottomLocations.includes(d.Standort)) { return 1; } else if (d.Standort == referenzStation) { return 1; } else { return 0.8; } }) .attr("r", 10); }) .on("mousemove", function(event, d) { d3.selectAll(".mouseover").remove(); let x = d3.pointer(event)[0]; let y = d3.pointer(event)[1]; let mGroup = svg.append("g").attr("transform", "translate(20,-20)"); let rect = mGroup.append("rect"); let text = mGroup.append("text").text(d.Standort); console.log(d.Standort); rect .attr("pointer-events", "none") .attr("class", "mouseover") .attr("x", x - 5) .attr("y", y - 5) .attr("height", 20) .attr("width", text.node().getBBox().width + 10) .style("fill", "white"); text .attr("pointer-events", "none") .attr("class", "mouseover") .attr("x", x) .attr("y", y + 10); }); const update = () => Dots.attr("cx", d => map.latLngToLayerPoint(d.LatLng).x).attr( "cy", d => map.latLngToLayerPoint(d.LatLng).y ); map.on("zoomend", update); }34:T4e2,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }35:Ta63,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html`

` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }36:T152b,swisstopoMap = { let container = DOM.element("div", { style: `width:${1094}px;height:${500}px` }); yield container; let map = L.map(container, { crs: L.CRS.EPSG3857, // Projection: WGS84/Pseudo-Mercator (EPSG:3857, as used in OSM, Bing, Google Map) continuousWorld: true, worldCopyJump: false }); let url = "https://wms.geo.admin.ch/?"; let tilelayer = new L.tileLayer.wms(url, { layers: "ch.swisstopo.pixelkarte-farbe", minZoom: 10, maxZoom: 15, opacity: 0.5, resolution: 5, attribution: 'Map data: © swisstopo | Map layer: © Pixelkarte Farbe (via GeoAdmin API)' }); map.addLayer(tilelayer); map.setView(L.latLng(47.39, 8.671), 11); //initialize svg to add to map L.svg({ clickable: true }).addTo(map); //Adds the layer to the map. // we have to make the svg layer clickable const overlay = d3.select(map.getPanes().overlayPane); const svg = overlay.select("svg").attr("pointer-events", "auto"); const Dots = svg .selectAll("circle") .attr("class", "Dots") .data(uniqueLocations) .join("circle") .attr("id", "dotties") .attr("fill", function(d) { if (topLocations.includes(d.Standort)) { return "#f70019"; } else if (bottomLocations.includes(d.Standort)) { return "#0076bd"; } else if (d.Standort == referenzStation) { return "#1a7f1f"; } else { return "#7f3da7"; } }) //change the fill .attr("fill-opacity", function(d) { if (topLocations.includes(d.Standort)) { return 1; } else if (bottomLocations.includes(d.Standort)) { return 1; } else if (d.Standort == referenzStation) { return 1; } else { return 0.7; } }) .attr("stroke", "white") //Leaflet has to take control of projecting points. Here we are feeding the latitude and longitude coordinates to //leaflet so that it can project them on the coordinates of the view. Notice, we have to reverse lat and lon. //Finally, the returned conversion produces an x and y point. We have to select the the desired one using .x or .y .attr("cx", d => map.latLngToLayerPoint(d.LatLng).x) .attr("cy", d => map.latLngToLayerPoint(d.LatLng).y) .attr("r", 10) .on("mouseover", function() { //function to add mouseover event d3.select(this) .transition() //D3 selects the object we have moused over in order to perform operations on it .duration("150") //how long we are transitioning between the two states (works like keyframes) .attr("fill", function(d) { if (topLocations.includes(d.Standort)) { return "#f70019"; } else if (bottomLocations.includes(d.Standort)) { return "#0076bd"; } else if (d.Standort == referenzStation) { return "#1a7f1f"; } else { return "#7f3da7"; } }) //change the fill .attr("fill-opacity", function(d) { if (topLocations.includes(d.Standort)) { return 1; } else if (bottomLocations.includes(d.Standort)) { return 1; } else if (d.Standort == referenzStation) { return 1; } else { return 0.7; } }) .attr("r", 12); }) .on("mouseout", function() { //reverse the action based on when we mouse off the the circle d3.select(this) .transition() .duration("150") .attr("fill", function(d) { if (topLocations.includes(d.Standort)) { return "#f70019"; } else if (bottomLocations.includes(d.Standort)) { return "#0076bd"; } else if (d.Standort == referenzStation) { return "#1a7f1f"; } else { return "#7f3da7"; } }) //change the fill .attr("fill-opacity", function(d) { if (topLocations.includes(d.Standort)) { return 1; } else if (bottomLocations.includes(d.Standort)) { return 1; } else if (d.Standort == referenzStation) { return 1; } else { return 0.7; } }) .attr("r", 10); }) .on("mousemove", function(event, d) { d3.selectAll(".mouseover").remove(); let x = d3.pointer(event)[0]; let y = d3.pointer(event)[1]; let mGroup = svg.append("g").attr("transform", "translate(20,-20)"); let rect = mGroup.append("rect"); let text = mGroup.append("text").text(d.Standort); console.log(d.Standort); rect .attr("pointer-events", "none") .attr("class", "mouseover") .attr("x", x - 5) .attr("y", y - 5) .attr("height", 20) .attr("width", text.node().getBBox().width + 10) .style("fill", "white"); text .attr("pointer-events", "none") .attr("class", "mouseover") .attr("x", x) .attr("y", y + 10); }); const update = () => Dots.attr("cx", d => map.latLngToLayerPoint(d.LatLng).x).attr( "cy", d => map.latLngToLayerPoint(d.LatLng).y ); map.on("zoomend", update); }37:[] 31:{"id":"f58c1869d756f66b","slug":"lokalklima-monitoring","title":"Lokalklima-Monitoring","thumbnail":"7267585dcaf2bc7a4cc2418beb6d3347738f8c92d8bed52520a0c5a14defe405","access_level":"public","create_time":"$D2021-05-26T08:45:13.988Z","update_time":"$D2021-07-07T06:44:17.398Z","view_time":null,"first_public_time":"$D2021-06-02T06:53:13.476Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":1492,"publish_version":1492,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[{"id":"9a385df43dd8c0f1","reply_to_id":null,"content":"Auswahl 'Alle Standorte' funktioniert noch nicht.","create_time":"$D2021-05-27T12:23:54.147Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Lokalklima-Monitoring","cells":[{"id":0,"value":"# Lokalklima-Monitoring","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"viewof dateSelect = {\n const dateSelect = select({\n title: \"Zeitraum\",\n options: [\"Sommer 2019\", \"Sommer 2020\", \"Sommer 2021\", \"Letzte 7 Tage\"],\n value: \"Letzte 7 Tage\"\n });\n dateSelect.input.style.fontSize = \"14px\";\n dateSelect.input.style.marginTop = \"8px\";\n dateSelect.input.style.marginBottom = \"15px\";\n return dateSelect;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"viewof regionSelect = {\n const regionSelect = select({\n title: \"Standorte\",\n options: [\n {\n label: \"Zürich, Effretikon und Flughafen\",\n value: \"Siedlungsgebiet Stadt Zürich\"\n },\n {\n label: \"Winterthur, Uster, Regensdorf, Bülach\",\n value: \"Übrige Siedlungsgebiete\"\n },\n {\n label: \"Alle Standorte\",\n value: \"Alle Standorte\"\n }\n ],\n value: \"Alle Standorte\"\n });\n regionSelect.input.style.fontSize = \"14px\";\n regionSelect.input.style.marginTop = \"8px\";\n regionSelect.input.style.marginBottom = \"15px\";\n return regionSelect;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"legende = swatches({\n colour: d3.scaleOrdinal(\n [\n \"Referenzstandort\",\n \"Wärmste Standorte\",\n \"Kälteste Standorte\",\n \"Weitere Standorte\"\n ],\n [\"#1a7f1f\", \"#f70019\", \"#0076bd\", \"#7f3da7\"]\n ),\n swatchRadius: 8,\n labelFont: \"sans-serif 13px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"txtZeitraum = htl.html`

Zeitraum vom ${formatDate(\n parseDate(dateRange[0])\n)} bis ${formatDate(parseDate(dateRange[1]))}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"headingTab1 = htl.html`

Die 3 wärmsten Standorte

` // #d40053","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"viewof topSelection = Table(top3, {\n columns: [\"Standort\", \"T_min\", \"T_mean\", \"T_max\"],\n format: {\n T_min: (x) => x.toFixed(1) + \" °C\",\n T_mean: (x) => x.toFixed(1) + \" °C\",\n T_max: (x) => x.toFixed(1) + \" °C\"\n //Hitzetag: (x) => (x === \"TRUE\" ? \"Ja\" : x === \"FALSE\" ? \"Nein\" : \"\"),\n //Tropennacht: (x) => (x === \"TRUE\" ? \"Ja\" : x === \"FALSE\" ? \"Nein\" : \"\")\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"headingTab2 = htl.html`

Die 3 kältesten Standorte

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"viewof bottomSelection = Table(bottom3, {\n columns: [\"Standort\", \"T_min\", \"T_mean\", \"T_max\"],\n format: {\n T_min: (x) => x.toFixed(1) + \" °C\",\n T_mean: (x) => x.toFixed(1) + \" °C\",\n T_max: (x) => x.toFixed(1) + \" °C\"\n //Hitzetag: (x) => (x === \"TRUE\" ? \"Ja\" : x === \"FALSE\" ? \"Nein\" : \"\"),\n //Tropennacht: (x) => (x === \"TRUE\" ? \"Ja\" : x === \"FALSE\" ? \"Nein\" : \"\")\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"txtTab3 = htl.html`

Referenzstandort ${referenzStation}

Letzte Tropennacht: ${formatDate(\n parseDate(dfTropennacht[0].Datum)\n)}
\nLetzter Hitzetag: ${formatDate(\n parseDate(dfHitzetag[0].Datum)\n)}
\nAktuellster Tag: ${formatDate(\n parseDate(dfAktuellsterTag[0].Datum)\n)}\n

T_min: ${dfAktuellsterTag[0].T_min}°C
T_mean: ${dfAktuellsterTag[0].T_mean}°C
T_max: ${dfAktuellsterTag[0].T_max}°C
Hitzetag: ${\n dfAktuellsterTag[0].Hitzetag === \"TRUE\"\n ? \"Ja\"\n : dfAktuellsterTag[0].Hitzetag === \"FALSE\"\n ? \"Nein\"\n : \"\"\n}
Tropennacht: ${\n dfAktuellsterTag[0].Tropennacht === \"TRUE\"\n ? \"Ja\"\n : dfAktuellsterTag[0].Tropennacht === \"FALSE\"\n ? \"Nein\"\n : \"\"\n}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"/*\nviewof aktuellsterTag = Table(dfAktuellsterTag, {\n columns: [\"Datum\", \"T_min\", \"T_mean\", \"T_max\", \"Hitzetag\", \"Tropennacht\"],\n format: {\n Datum: x => formatDate(parseDate(x)),\n T_min: (x) => x.toFixed(1) + \" °C\",\n T_mean: (x) => x.toFixed(1) + \" °C\",\n T_max: (x) => x.toFixed(1) + \" °C\",\n Hitzetag: (x) => (x === \"TRUE\" ? \"Ja\" : x === \"FALSE\" ? \"Nein\" : \"\"),\n Tropennacht: (x) => (x === \"TRUE\" ? \"Ja\" : x === \"FALSE\" ? \"Nein\" : \"\")\n }\n})\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data = d3\n .csv(\"https://www.web.statistik.zh.ch/awel_stadtklima/tageswerte_sommer.csv\")\n .then(function(data) {\n data.forEach(function(d) {\n d.E = +d.E;\n d.N = +d.N;\n d.T_min = +d.T_min;\n d.T_mean = +d.T_mean;\n d.T_max = +d.T_max;\n });\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"Table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"dateRange = d3.extent(filteredData, d => d.Datum)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"topLocations = topSelection.map((d) => d.Standort)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"bottomLocations = bottomSelection.map((d) => d.Standort)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"filteredData = data.filter(\n (d) =>\n (d.zeitraum1 == dateSelect || d.zeitraum2 == dateSelect) &&\n (d.region == regionSelect || d.region2 == regionSelect)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"uniqueLocations = tidy(filteredData, distinct(d => d.Standort))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"Table(filteredData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"referenzStation = \"Lindau - Tagelswangen (2693)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"dfHitzetag = tidy(\n data,\n filter(d => (d.Standort == referenzStation) & (d.Hitzetag == \"TRUE\")),\n arrange(desc(\"Datum\"))\n).slice(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"dfTropennacht = tidy(\n data,\n filter((d) => (d.Standort == referenzStation) & (d.Tropennacht == \"TRUE\")),\n arrange(desc(\"Datum\"))\n).slice(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"dfAktuellsterTag = tidy(\n data,\n filter((d) => d.Standort == referenzStation),\n arrange(desc(\"Datum\"))\n).slice(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"legend({\n color: colors,\n title: \"Temperatur (°C)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"colors = d3.scaleSqrt(\n [-15, -12, -9, -6, -3, 0, 3, 6, 9, 12, 15, 20, 25, 30, 35, 40],\n tempColors\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"tempColors = [\n \"#071e46\",\n \"#08529c\",\n \"#2171b5\",\n \"#4292c7\",\n \"#78bfd6\",\n \"#dbf5ff\",\n \"#ffe0e0\",\n \"#ffcbca\",\n \"#ffa09b\",\n \"#ff726a\",\n \"#ff3b36\",\n \"#f70019\",\n \"#cf0014\",\n \"#a80010\",\n \"#82000a\",\n \"#5f0000\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"formatDate = d3.timeFormat(\"%d.%m.%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"placesRe = filteredData.forEach(function (d) {\n if (typeof d.N === \"number\") {\n d.LatLng = new L.LatLng(d.N, d.E);\n }\n\n return filteredData.map((d) => [d.LatLng]);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"top3 = tidy(\n filteredData,\n // calculate max_temp and only return unique locations\n groupBy(\n \"Standort\",\n summarize({\n T_max: max(\"T_max\"),\n T_min: min(\"T_min\"),\n T_mean: mean(\"T_mean\")\n })\n ),\n arrange(desc(\"T_max\"))\n //arrange(desc((d) => d.T_max))\n).slice(0, 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"bottom3 = tidy(\n filteredData,\n // calculate max_temp and only return unique locations\n groupBy(\n \"Standort\",\n summarize({\n T_max: max(\"T_max\"),\n T_min: min(\"T_min\"),\n T_mean: mean(\"T_mean\")\n })\n ),\n arrange(asc(\"T_min\"))\n //arrange(desc((d) => d.T_max))\n).slice(0, 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import { Table } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {\n tidy,\n mean,\n max,\n min,\n arrange,\n desc,\n asc,\n groupBy,\n summarize,\n filter,\n distinct\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"//import { Toggle, Button, Radio, Select } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"import { swatches } from \"@bayre/svg-swatches\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"L = require(\"leaflet\") // most recent version '1.7.1'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"T = require(\"@tidyjs/tidy@2.4.2/dist/umd/tidy.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1340,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"leaflet = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"leaftletCSS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`### Fonts: LinearIcons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"swiss = html`