25:["$","title",null,{"children":"Badewasserqualitäts-Monitoring | Office for Statistics and Data of the Canton of Zurich | Observable"}] 49:T68a,viewof table = htl.html`

Bewertung der Badewasserqualität

	Qualität	Beschreibung	Empfehlung
${star}	Ausgezeichnet	Eine gesundheitliche Beeinträchtigung durch das Badewasser ist nicht zu erwarten.	Achten Sie auf Blaualgen und meiden Sie bei sichtbaren Ansammlungen das Wasser.
${square}	Gut	Eine gesundheitliche Beeinträchtigung durch das Badewasser ist nicht zu erwarten.	Achten Sie auf Blaualgen und meiden Sie bei sichtbaren Ansammlungen das Wasser.
${circle}	Ausreichend	Eine gesundheitliche Beeinträchtigung durch das Badewasser ist nicht auszuschliessen.	Nicht tauchen, nach dem Baden gründlich duschen. Achten Sie auf Blaualgen und meiden Sie bei sichtbaren Ansammlungen das Wasser.
${triangle}	Mangelhaft	Eine gesundheitliche Beeinträchtigung durch das Badewasser ist möglich.	Aus gesundheitlichen Gründen wird vom Baden abgeraten.

`4a:T2327,viewof map = { let container = DOM.element("div", { style: `max-width:${1186}px;height:${650}px` }); yield container; let map = L.map(container).setView([47.4345, 8.7], 10); // ZoomStart let Esri_WorldGrayCanvas = L.tileLayer( "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}", { opacity: 0.75, attribution: "Tiles © Esri — Esri, DeLorme, NAVTEQ" } ).addTo(map); var Stamen_TonerLabels = L.tileLayer( "https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}{r}.{ext}", { attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors', subdomains: "abcd", ext: "png" } ).addTo(map); map.options.minZoom = 10; map.options.maxZoom = 14; // control that shows content of info box on click const info = L.control("ctr"); info.onAdd = function (map) { this._div = L.DomUtil.create("div", "info"); this.update(); return this._div; }; info.update = function (props) { // Content of info box this._div.innerHTML = props ? "

" + props.location + "

" + "

Qualität: " + props.quality + "
Letzte Messung: " + formatDate(props.datum) + "
Messung durch: " + props.source + (function () { if (props.remark != "") { return "
Hinweis: " + props.remark + ""; } else { return ""; } })() + (function () { if (props.img == "") { return ( "
" + "" ); } else return ( "
" + "" ); })() + "
Entwicklung der Badewasserqualität: unterhalb der Karte.
" : "

Klicken Sie für Details und Foto auf eine Badestelle.

"; }; info.addTo(map); let clicked = {}; //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", "all"); // Render geometries from geojson function projectPoint(x, y) { var point = map.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); } var transformLakes = d3.geoTransform({ point: projectPoint }); var pathLakes = d3.geoPath().projection(transformLakes); var transformRivers = d3.geoTransform({ point: projectPoint }); var pathRivers = d3.geoPath().projection(transformRivers); var pathNull = d3.geoPath().projection(null); // Rivers let featureRivers = svg .selectAll("path.rivers") .data(mapRivers.features) .enter() .append("path") .attr("d", pathRivers) .attr("class", "rivers") .attr("id", function (d) { return "river_" + d.properties.LAGE_CODE; }) .style("pointer-events", "none") .style("stroke-width", 2) .style("stroke", "#00407C") .style("fill-opacity", 0) .style("fill", "none"); // Lakes let featureLakes = svg .selectAll("path.lakes") .data(mapLakes.features) .enter() .append("path") .attr("d", pathLakes) .attr("class", "lakes") .attr("id", function (d) { return "lake_" + d.properties.SEE_N; }) .style("pointer-events", "none") .style("stroke-width", 1) .style("stroke", "white") .style("fill-opacity", 0.75) .style("fill", "#00407C"); // Render symbols const symbols = svg .selectAll("path.symbols") .data(uniqueLocations) .join("path") .attr("id", "dots") .attr("transform", function (d) { return ( "translate(" + map.latLngToLayerPoint(d.LatLng).x + "," + map.latLngToLayerPoint(d.LatLng).y + ")" ); }) .attr( "d", d3 .symbol() .type(function (d) { if (d.quality == "Ausgezeichnet") { return d3.symbolCross; } else if (d.quality == "Gut") { return d3.symbolSquare; } else if (d.quality == "Ausreichend") { return d3.symbolCircle; } else if (d.quality == "Mangelhaft") { return d3.symbolTriangle; } }) .size(300) ) .attr("fill", (d) => color(d.quality)) //change the fill .attr("fill-opacity", 1) .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "pointer") .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( "d", d3 .symbol() .type(function (d) { if (d.quality == "Ausgezeichnet") { return d3.symbolCross; } else if (d.quality == "Gut") { return d3.symbolSquare; } else if (d.quality == "Ausreichend") { return d3.symbolCircle; } else if (d.quality == "Mangelhaft") { return d3.symbolTriangle; } }) .size(500) ) .attr("fill", (d) => color(d.quality)) //change the fill .attr("fill-opacity", 1) .attr("pointer-events", "auto"); }) .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( "d", d3 .symbol() .type(function (d) { if (d.quality == "Ausgezeichnet") { return d3.symbolCross; } else if (d.quality == "Gut") { return d3.symbolSquare; } else if (d.quality == "Ausreichend") { return d3.symbolCircle; } else if (d.quality == "Mangelhaft") { return d3.symbolTriangle; } }) .size(300) ) .attr("fill", (d) => color(d.quality)) //change the fill .attr("fill-opacity", 1) .attr("pointer-events", "auto"); }) .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.location + " (Stand: " + formatDate(d.datum) + ")"); rect .attr("pointer-events", "auto") .attr("class", "mouseover") .attr("x", map.latLngToLayerPoint(d.LatLng).x) .attr("y", map.latLngToLayerPoint(d.LatLng).y) .attr("height", text.node().getBBox().height + 10) .attr("width", text.node().getBBox().width + 10) .attr("fill", "white") .attr("font-family", ZHFonts.regular) .attr("font-size", "14px"); text .attr("pointer-events", "auto") .attr("class", "mouseover") .attr("x", map.latLngToLayerPoint(d.LatLng).x + 5) .attr("y", map.latLngToLayerPoint(d.LatLng).y + 15); }); symbols.on("click", function (event, d) { const e = symbols.nodes(); const i = e.indexOf(this); clicked = d; info.update(d); console.log("Clicked: " + clicked.id); // emit an input event to tell Observable that there's a new value for gem_sel svg.property("value", clicked); svg.dispatch("input"); }); // set a default value svg.property("value", [""]); svg.dispatch("input"); // Update function update() { featureLakes.attr("d", pathLakes); featureRivers.attr("d", pathRivers); symbols.attr("transform", function (d) { return ( "translate(" + map.latLngToLayerPoint(d.LatLng).x + "," + map.latLngToLayerPoint(d.LatLng).y + ")" ); }); } update(); map.on("zoomend", update); return Object.assign(container, { onclick: (event, d) => { event.currentTarget.value = { clickedPlace: clicked }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }4b:T10c3,viewof scatter = vl .markPoint({ size: 250, opacity: 1, stroke: "white", strokeWidth: 1 }) .data(locationData) .encode( vl .x() .fieldT("datum") .scale({ domain: [ { month: "Apr", year: minYear }, //, year: minYear { month: "Oct", year: currYear } //, year: currYear ] }) .title(null), vl .y() .fieldN("quality") .axis({ grid: true }) .scale({ domain: ["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"] }) .sort(["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"]) .title(null), vl .color() .fieldN("quality") .scale({ range: waterColors, domain: ["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"], opacity: 1 }) .sort(["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"]) .title(null) .legend({ orient: "top", titleOrient: "top" }), // vl .fill() .fieldN("quality") .scale({ range: waterColors, domain: ["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"] }) .sort(["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"]) .legend({ orient: "top", titleOrient: "top" }), //{ orient: "left", titleOrient: "top", padding: 4 } vl .shape() .fieldN("quality") .scale({ range: ["cross", "square", "circle", "triangle"], domain: ["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"] }) .sort(["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"]) .legend({ orient: "top", titleOrient: "top" }), //{ orient: "left", titleOrient: "top", padding: 4 } vl.tooltip([ { field: "datum", type: "temporal", title: "Datum" }, { field: "quality", type: "nominal", title: "Qualität" } ]) //vl.column().fieldT("year") // show the date and quality fields in a tooltip ) .width(width / 2.25) // specifying responsive width .height(350) .autosize({ resize: true, type: "fit" }) .config({ // locale: { number: localeNumber, time: localeTime }, view: { stroke: null }, // scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.2, stroke: 2 }, background: "#ffffff", axis: { labelFont: ZHFonts.regular, labelFontSize: 14, labelColor: "black", titleFont: ZHFonts.regular, titleFontSize: 14, titleFontColor: "black", tickColor: "lightgrey", domainColor: "#949494", gridColor: "lightgrey" }, axisX: { title: null, labelAngle: 0, zindex: 1, labelAlign: "left", tickCount: Math.ceil(widthNow / 80), labelExpr: "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']", labelOffset: 4, labelPadding: -24, tickSize: 30, grid: true, gridDash: { condition: { test: { field: "value", timeUnit: "month", equal: 1 }, value: [] }, value: [2, 2] }, tickDash: { condition: { test: { field: "value", timeUnit: "month", equal: 1 }, value: [] }, value: [2, 2] } }, axisY: { labelPadding: 10, titleAlign: "left", titleAngle: 0, titleX: 0, titleY: -20, tickCount: Math.ceil(width / 2 / 3.5 / 120), ticks: true, tickSize: 10, labelLimit: 300 }, title: { font: ZHFonts.black, fontSize: 16, offset: 15, anchor: "start", lineHeight: 5, padding: 40, subtitleFont: ZHFonts.regular, subtitleFontSize: 14 }, header: { labelOrient: "top", labelPadding: 5, lineHeight: 3, labelFontSize: 13, labelFont: ZHFonts.black, labelColor: "black" }, legend: { orient: "top", symbolSize: 200, titleFont: ZHFonts.black, titleFontSize: 14, labelFontSize: 14, labelFont: ZHFonts.regular, labelColor: "black", labelLimit: 300, padding: 10, columns: nCol, title: null }, text: { font: ZHFonts.regular, align: "center", fill: "black", fontSize: 12, dx: 0 } }) .render()4c:Tc30,style = html``4d:[{"id":"49054ef1f699a19888fe49458ba0ed8d522aa535ab0ad53cbc04b02dce40cfb26c6b67cc8f0b194fc5d4f497f184ed92e173ae01575ab7e3692fbccdef876026","href":"https://static.observableusercontent.com/files/49054ef1f699a19888fe49458ba0ed8d522aa535ab0ad53cbc04b02dce40cfb26c6b67cc8f0b194fc5d4f497f184ed92e173ae01575ab7e3692fbccdef876026","name":"KTZH_00000729_00003341@1.csv","type":"text/csv","lastModified":1717068109575.536,"size":191852}] 29:{"id":"8ab265907c2cb708","slug":null,"title":"Badewasserqualitäts-Monitoring","thumbnail":"c8fdf0bd193ac1ede5259144e887a0b62a2f9c5ad9422251a3d4b36565dd7ec3","access_level":"public","create_time":"$D2021-06-09T14:18:08.906Z","update_time":"$D2026-10-13T07:42:29.247Z","view_time":null,"first_public_time":"$D2022-10-24T09:54:31.673Z","has_unpublished_edits":null,"fork":{"id":"f58c1869d756f66b","slug":"lokalklima-monitoring","title":"Lokalklima-Monitoring","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","bio":"","followed_by_you":false,"follows_you":false},"version":3752,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"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":"f098499ed2e3e169","reply_to_id":null,"content":"Kein Regionen-Filter","create_time":"$D2021-06-17T11:37:55.894Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}},{"id":"38230c451159f5fa","reply_to_id":null,"content":"Beschreibung zur Legende analog https://www.zh.ch/de/gesundheit/gebrauchsgegenstaende/bade-duschwasser.html#1248065566 als zweite Ressource","create_time":"$D2021-06-17T11:45:59.459Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}},{"id":"226a72e8f5e0e502","reply_to_id":null,"content":"Zeitverlauf","create_time":"$D2021-06-17T13:02:30.378Z","update_time":null,"resolved":false,"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":{"titling":"auto","title":"Badewasserqualitäts-Monitoring","cells":[{"id":0,"value":"# Badewasserqualitäts-Monitoring\n\n- Open Data: [Erhebung der Badewasserqualität in öffentlichen Badeanstalten an Flüssen und Seen im Kanton Zürich](https://www.zh.ch/de/politik-staat/statistik-daten/datenkatalog.html#/datasets/729@gesundheitsdirektion-kanton-zuerich/distributions/3341)\n\n- Daten von Badestelle \"Bichelsee\" wird vom Kanton Thurgau erhoben und im Open Data Portal Thurgau im [Dataset 'Gewässerqualität an öffentlichen Badeplätzen im Kanton Thurgau'](https://data.tg.ch/explore/dataset/dfs-klf-1/information/) publiziert.\n\n- Die Datenaktualisierung von Badestelle \"Bichelsee\" wird mittels R-Skript und cronjob wöchentlich automatisch ausgeführt.\n\n- Gitea Repo 'Gesundheit_Badewasserqualitaet' - Repository um die OGD Daten zur Badewasserqualität von TG zu holen und für die Visualisierung im ZHWeb aufzubereiten (nicht verlinkt, da nur innerhalb des STATZH erreichbar)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2995,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3024,"value":"viewof infoBox = htl.html`

Entwicklung der Badewasserqualität:

${viewof scatter}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3723,"value":"width / 2.25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3692,"value":"// badewasser = htl.html`\n//

\n//

${viewof table}

\n//

${viewof map}\n// ${viewof scatter}

\n//

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3087,"value":"md`## Scatter Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3555,"value":"locationData = data.filter((d) => d.location == map.clickedPlace.location)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3536,"value":"# Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3540,"value":"mapLakes = d3.json(\n \"https://www.web.statistik.zh.ch/geodaten_visualisierungen/GEN_alle_Seen_F_KTZH/GEN_alle_Seen_F_KTZH_2022_09_21.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3543,"value":"mapRivers = d3.json(\n \"https://www.web.statistik.zh.ch/geodaten_visualisierungen/GEN_A4_FLUESSE_L_KTZH/GEN_A4_FLUESSE_L_KTZH_2020_05_25.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3450,"value":"dataTG = d3\n .csv(\n \"https://www.web.statistik.zh.ch/cms_vis/gesundheit_klzh/badewasserqualitaet/badewasserqualitaet_tg.csv\"\n )\n .then(function (data) {\n data.forEach(function (d) {\n d.N = +d.lat;\n d.E = +d.long;\n d.location = d.location;\n d.quality = d.quality;\n d.source = d.source;\n d.datum = parseDate(d.date);\n d.remark = d.remark;\n d.img = d.image;\n d.year = formatYear(d.datum);\n });\n return data.sort(desc((d) => d.datum));\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2690,"value":"dataZH = // await FileAttachment(\"KTZH_00000729_00003341@1.csv\") // data_update\n// .csv()\n\nd3\n .csv(\n \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00000729_00003341.csv\" // \"https://raw.githubusercontent.com/openZH/bathing_water_quality_ZH/master/data/bathing_water_quality_ZH.csv\"\n )\n .then(function (data) {\n data.forEach(function (d) {\n d.N = +d.lat;\n d.E = +d.long;\n d.location = d.location;\n d.quality = d.quality;\n d.source = d.source;\n d.datum = parseDate(d.date);\n d.remark = d.remark;\n d.img = d.image;\n d.year = formatYear(d.datum);\n });\n return data.sort(desc((d) => d.datum));\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3649,"value":"// data_update = FileAttachment(\"Bathing_water_quality_ZH.csv\")\n// .csv()\n// .then(function (data) {\n// data.forEach(function (d) {\n// d.E = +d.lat;\n// d.N = +d.long;\n// d.location = d.location;\n// d.quality = d.quality;\n// d.source = d.source;\n// d.datum = parseDate(d.date);\n// d.remark = d.remark;\n// d.img = d.image;\n// d.year = formatYear(d.datum);\n// });\n// return data.sort(desc((d) => d.datum));\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3458,"value":"data = d3.merge([dataZH, dataTG]).sort(desc((d) => d.datum))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2113,"value":"categories = [...Array.from(new Set(data.map((d) => d.quality)))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"uniqueLocations = tidy(\n data,\n distinct((d) => d.location)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2141,"value":"waterColors = [\"#429118\", \"#F7E02E\", \"#FF8800\", \"#F73A00\"] //[\"#2a9d8f\", \"#e9c46a\", \"#f4a261\", \"#e76f51\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"color = d3\n .scaleOrdinal()\n .domain([\"Ausgezeichnet\", \"Gut\", \"Ausreichend\", \"Mangelhaft\"])\n .range(waterColors)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2449,"value":"md`## Shapes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"symbols = d3.symbols","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2530,"value":"symbol = d3.symbol()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2542,"value":"star = {\n //console.log(symbols);\n let svg = d3.create(\"svg\").attr(\"width\", 50).attr(\"height\", 25);\n svg\n .selectAll(\"path\")\n .data(symbols)\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => symbol.type(d3.symbolCross).size(200)())\n .attr(\"fill\", waterColors[0])\n .attr(\"transform\", `translate(25, 15)`);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2561,"value":"circle = {\n //console.log(symbols);\n let svg = d3.create(\"svg\").attr(\"width\", 50).attr(\"height\", 25);\n svg\n .selectAll(\"path\")\n .data(symbols)\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => symbol.type(d3.symbolCircle).size(200)())\n .attr(\"fill\", waterColors[2])\n .attr(\"transform\", `translate(25, 15)`);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2571,"value":"triangle = {\n //console.log(symbols);\n let svg = d3.create(\"svg\").attr(\"width\", 50).attr(\"height\", 25);\n svg\n .selectAll(\"path\")\n .data(symbols)\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => symbol.type(d3.symbolTriangle).size(200)())\n .attr(\"fill\", waterColors[3])\n .attr(\"transform\", `translate(25, 15)`);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2578,"value":"square = {\n //console.log(symbols);\n let svg = d3.create(\"svg\").attr(\"width\", 50).attr(\"height\", 25);\n svg\n .selectAll(\"path\")\n .data(symbols)\n .enter()\n .append(\"path\")\n .attr(\"d\", (d) => symbol.type(d3.symbolSquare).size(200)())\n .attr(\"fill\", waterColors[1])\n .attr(\"transform\", `translate(25, 15)`);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2904,"value":"md`## Infobox Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2946,"value":"infoboxQuality = (function () {\n if (map.clickedPlace.remark == \"\") {\n return map.clickedPlace.quality;\n } else {\n return htl.html`\n ${map.clickedPlace.quality} \n
\n ${map.clickedPlace.remark} \n
`;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3746,"value":"data[0].quality","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3742,"value":"map.clickedPlace.image","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3064,"value":"infoboxImage = (function () {\n if (map.clickedPlace.img === \"\") {\n return htl.html`

`;\n } else {\n return htl.html`

`;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"formatDate = d3.timeFormat(\"%d.%m.%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3247,"value":"formatYear = d3.timeFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"placesRe = data.forEach(function (d) {\n if (typeof d.N === \"number\") {\n d.LatLng = new L.LatLng(d.N, d.E);\n }\n\n return data.map((d) => [d.LatLng]);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3291,"value":"years = [...Array.from(new Set(data.map((d) => d.year)))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3587,"value":"d3.max(data, (d) => d.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3407,"value":"minYear = formatYear(d3.min(data.map((d) => d.datum)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3245,"value":"currYear = formatYear(new Date())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3380,"value":"ZoomStart = d3.scaleLinear().domain([300, 1200]).range([9, 11])(width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3546,"value":"// plotWidth = {\n// if (width >= 1100) {\n// return width / 1.5;\n// } else if (width < 1100 && width >= 750) {\n// return width / 3;\n// } else {\n// return width / 1.5;\n// }\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3572,"value":"plotWidth = {\n if (width >= 1100) {\n return width / 2; //ursprünglich 5.8\n } else if (width < 1100 && width >= 750) {\n return width / 3;\n } else {\n return width / 1.5;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3618,"value":"widthNow = {\n if (width >= 1100) {\n return width / 3.75; // 3.745;\n } else if (width < 1100 && width >= 750) {\n return width / 2;\n } else {\n return width / 0.75;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3712,"value":"nCol = {\n if (width >= 1100) {\n return 4;\n } else if (width < 1100 && width >= 750) {\n return 2;\n } else {\n return 1;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3735,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2180,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import { Table } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import { tidy, desc, asc, filter, distinct } from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"leaflet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"leaftletCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null