2d:null 2e:["$","title",null,{"children":"Wassertemperatur | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T1737,viewof map = { let container = DOM.element("div", { id: "map", style: `width:${1168}px;height:${650}px` //alt: "Karte mit den Impforten; Visualisierte Daten: " + places }); yield container; const map = L.map("map", { minZoom: 9, maxZoom: 17 }).addControl(new customControl1()); console.log("mapsetview"); let zoomT = 0; let clicked = ""; if (width < 600) { zoomT = 8; } else { zoomT = zoomOrg; } map.setView([latOrg, lngOrg], zoomT); //OpenStreetMap_BlackAndWhite // L.tileLayer("https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png", { // opacity: 0.5, // attribution: // '© OpenStreetMap' // }).addTo(map); // offizieller ZHweb Layer des GIS //(sehr langsam) L.tileLayer .wms("https://wms.zh.ch/ZHWEB", { maxZoom: 14, layers: "Geometrie" }) .addTo(map); var svgLayer = L.svg(); svgLayer.addTo(map); var svg = d3.select("#map").select("svg").attr("pointer-events", "auto"); var g = d3.select("#map").select("svg").select("g"); g.attr("class", " leaflet-zoom-hide"); // offizieller ZHweb Layer des GIS //(sehr langsam) /* L.tileLayer.wms('https://wms.zh.ch/ZHWEB', { maxZoom: 14, layers: 'Geometrie' }).addTo(map); */ function projectPoint(x, y) { var point = map.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); } var transform = d3.geoTransform({ point: projectPoint }); var path = d3.geoPath().projection(transform); var pathNull = d3.geoPath().projection(null); let rivers = svg .selectAll("path.rivers") .data(mapRivers.features) .enter() .append("path") .attr("d", path) .attr("class", "rivers") .style("stroke-width", 2) .style("stroke", function (d) { return "DeepSkyBlue"; }) .style("opacity", 0.8) .style("fill", "none"); let lakes = svg .selectAll("path.lakes") .data(mapLakes.features) .enter() .append("path") .attr("d", path) .attr("class", "lakes") .style("stroke-width", 0.1) .style("fill", function (d) { return "DeepSkyBlue"; }) .style("opacity", 0.8); var circles = svg .selectAll("circle.circles") .data(messungen_last) .enter() .append("circle") .attr("cursor", "pointer") .attr("class", "circles") .style("stroke", "white") .style("stroke-width", "1") .style("fill-opacity", 0.6) .style("fill", function (d) { return tempScale(d.mittel_24h); }) .attr("r", 1.4 * zoomT) .on("mouseover", function (event, d) { d3.select(this).transition().attr("r", 30); let mausgr = svg .append("g") .attr("id", "mausgr") .attr("pointer-events", "none"); let bbox = this.getBBox(); let trans = d3 .select(this) .attr("transform") .replace("translate", "") .replace("(", "") .replace(")", ""); console.log(trans); let x = +trans.substr(0, trans.indexOf(",")); let y = +trans.substr(trans.indexOf(",") + 1, trans.length); console.log(x); mausgr .append("text") .attr("x", x) .attr("y", y + 6) .text(d.mittel_24h) .attr("text-anchor", "middle") .attr("font-size", 0) .attr("font-weight", "bold") .attr("fill", "white") .transition() .duration(200) .attr("font-size", 16); mausgr .append("text") .attr("x", x + 30) .attr("y", y) .text(d.gewaesser); mausgr .append("text") .attr("x", x + 30) .attr("y", y + 16) .text("letzte Messung: " + d.datum_messung + " " + d.zeit_messung); }) .on("mouseout", function (event, d) { d3.select("#mausgr").remove(); d3.select(this).transition().attr("r", 8); }) .on("click", function (event, d) { console.log(d); clicked = d.gewaesser; }); map.on("zoom", update); function zoomToPlz(id) { var center = pathNull.centroid(d3.select("#plz_" + id).datum()); console.log(center); map.setView([center[1], center[0]], 13); } function update() { console.log("update"); rivers.attr("d", path); lakes.attr("d", path); circles .attr("transform", function (d) { if (typeof d.LatLng !== "undefined") { return ( "translate(" + map.latLngToLayerPoint(d.LatLng).x + "," + map.latLngToLayerPoint(d.LatLng).y + ")" ); } }) .attr("r", 8); } update(); map.on("zoomend", function () { zoomT = map.getZoom(); if (zoomT >= 13) { d3.selectAll(".circles") .attr("r", 8) .attr("cursor", "pointer") .attr("pointer-events", "all"); // .on("mouseover", function () { // d3.select(this).style("fill-opacity", 1); // }) // .on("mouseout", function () { // d3.select(this).style("fill-opacity", 0.6); // }) // .on("click", function (event, d) { // clicked = d; // }); } else { d3.selectAll(".circles") .attr("r", 1.4 * zoomT) .style("fill-opacity", 0.6); //.attr("pointer-events", "none"); } }); function resetZoom() { map.setView([latOrg, lngOrg], zoomOrg); //d3.selectAll('.gemeinde').style('fill-opacity', 0.3); } return Object.assign(container, { value: { zoomT }, onmousemove: (event) => { event.currentTarget.value = { zoom: map.getZoom(), clickedPlace: clicked }; event.currentTarget.dispatchEvent(new CustomEvent("input")); }, onclick: (event) => { event.currentTarget.value = { zoom: map.getZoom(), clickedPlace: clicked }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }34:[] 31:{"id":"f398838c74dc4821","slug":"wassertemperatur","title":"Wassertemperatur","thumbnail":"cd3c739a63be5651508543339d27f3c1176d8be34356f21e21a421ebd2f22fad","access_level":"public","create_time":"$D2022-06-02T09:07:34.988Z","update_time":"$D2022-10-13T13:33:44.145Z","view_time":null,"first_public_time":"$D2022-06-03T09:29:15.373Z","has_unpublished_edits":null,"fork":{"id":"66d446b02080eaad","slug":"impforte","title":"Impforte","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"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":866,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null}],"members":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","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":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Wassertemperatur","cells":[{"id":0,"value":"md`# Wassertemperatur`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"Visualisierung der gescrapten Wassertemperaturen\n\nGithub Repo: https://github.com/mmznrSTAT/wassertemperaturen\n\nQuelle: https://www.zh.ch/de/umwelt-tiere/wasser-gewaesser/messdaten/wassertemperaturen.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"### ${chartHeader}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":807,"value":"chart1 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, heightChart1]);\n\n svg.append(\"g\").call(xAxis);\n\n const yAxisGr = svg.append(\"g\").call(yAxis);\n\n yAxisGr.selectAll(\".tick\").selectAll(\"line\").attr(\"stroke\", \"lightgrey\");\n\n let chart = svg.append(\"g\");\n chart\n .append(\"path\")\n .datum(station)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"chartHeader = (function () {\n if (map.clickedPlace.length > 1) {\n return map.clickedPlace;\n } else {\n return \"Bitte klicken sie auf eine Messstelle\";\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"map","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"yScale = d3\n .scaleLinear()\n .domain([0, d3.max(messungen, (d) => +d.mittel_24h)])\n .range([heightChart1 - margin.top - margin.bottom, margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"xAxis = (g) =>\n g.attr(\"transform\", `translate(0,${yScale(0)})`).call(\n d3\n .axisBottom(timeScale)\n .ticks(width / 80)\n .tickSizeOuter(0)\n .tickFormat((d) => formatDate(d))\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left + width},0)`)\n .call(d3.axisLeft(yScale).tickSize(width))\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"line = d3\n .line()\n .defined((d) => !isNaN(d.mittel_24h))\n .x((d) => timeScale(d.date_messung))\n .y((d) => yScale(d.mittel_24h))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"Letztes Scraping: ${formatDate(lastScraping)}, ${formatUhrzeit(lastScraping)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":640,"value":"Inputs.table(messungen)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`# Anhang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"toc('h2, h3', 'Inhalt')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`## Daten`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mapPlz = d3.json(\"https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_plz/PLZ_gen_epsg4326_F_KTZH_2020.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"messungen = d3\n .csv(\n \"https://raw.githubusercontent.com/mmznrSTAT/wassertemperaturen/main/data/wassertemperaturen_all.csv\"\n )\n .then(function (data) {\n data.forEach(function (d) {\n d.date_scraping = parseTime1(d.datum_scraping); //.split(\"-\")[0]);\n d.date_messung = parseTime(d.datum_messung); //.split(\"-\")[0]);\n //d.time_scrape = d.datum_scraping.split(\"-\")[1];\n d.lat = +d.wgs84_x;\n d.long = +d.wgs84_y;\n d.LatLng = new L.LatLng(d.lat, d.long);\n });\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"station = distinctsAll(\n messungen.filter((d) => d.gewaesser == map.clickedPlace),\n \"datum_messung\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"timeScale = d3\n .scaleTime()\n .domain(d3.extent(station, (d) => d.date_messung))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"Inputs.table(station)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"lastScraping = d3.max(messungen, (d) => d.date_scraping)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"lastScraping_datum = d3.max(messungen, (d) => d.datum_scraping)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"messungen_last = messungen.filter((d) => d.datum_scraping == lastScraping_datum)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"Inputs.table(messungen_last)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"scrapeDates = distincts(messungen, \"datum_scraping\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"mapLakes = d3.json(\n \"https://www.web.statistik.zh.ch/vis_observable_prototyping/alle_alle_seen_wgs84.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"mapRivers = d3.json(\n \"https://www.web.statistik.zh.ch/vis_observable_prototyping/fluesse_wgs84.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Parameter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"margin = ({ left: 30, right: 10, top: 10, bottom: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"heightChart1 = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"latOrg = 47.42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"lngOrg = 8.7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"zoomOrg = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"statColors = [\n \"#3f8ab4\",\n \"#9FCBE5\",\n \"#65A96A\",\n \"#B4DEB8\",\n \"#CEBE5B\",\n \"#F3EBAE\",\n \"#D27F46\",\n \"#F7C5A1\",\n \"#CD4B4E\",\n \"#F3A5A7\",\n \"#9479A4\",\n \"#D2C1DA\",\n \"#1B252B\",\n \"#767C7F\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"swatches({\n color: d3.scaleOrdinal(statColors, statColors)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"tempScale = d3\n .scaleLinear()\n .domain(d3.extent(messungen, (d) => +d.mittel_24h))\n .range([\"blue\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`## Funktionen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"parseTime1 = d3.timeParse(\"%Y%m%d-%Hh%M\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"parseTime = d3.timeParse(\"%d.%m.%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"formatDate = d3.timeFormat(\"%d.%m.%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"formatUhrzeit = d3.timeFormat(\"%HUhr%M\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"parseTime1(\"20220531-13h05\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"plzCheck = function(id) {\n let found = \"Diese Postleitzahl existiert nicht im Kanton Zürich.\";\n for(let i=0;i`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"schrift = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"leaflet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"leaftletCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"