2d:null 2e:["$","title",null,{"children":"[Testing] Badewasserqualitäts-Monitoring | cgrb | Observable"}] 33:T5a5,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.	Keine.
${square}	Gut	Eine gesundheitliche Beeinträchtigung durch das Badewasser ist nicht zu erwarten.	Keine.
${circle}	Ausreichend	Eine gesundheitliche Beeinträchtigung durch das Badewasser ist nicht auszuschliessen.	Nicht tauchen, nach dem Baden gründlich duschen.
${triangle}	Mangelhaft	Eine gesundheitliche Beeinträchtigung durch das Badewasser ist möglich.	Aus gesundheitlichen Gründen wird vom Baden abgeraten.

`34:T2213,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.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", "steelblue") .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", "steelblue"); // 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) .style("fill", "white"); 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")); mutable id = clicked; } }); }35:T967,viewof scatter = vl .markPoint({ size: 250, opacity: 1, stroke: "dimgrey", strokeWidth: 1 //blend: "multiply" }) .data(locationData) .config({ background: "white" }) .encode( vl .x() .fieldT("datum") //.timeUnit("utcyearmonthdate") .axis({ format: "%b %Y", tickCount: 12 }) .scale({ //type: "utc", domain: [ { month: "Apr", year: minYear }, //, year: minYear { month: "Oct", year: currYear } //, year: currYear ] }) .title(""), vl .y() .fieldN("quality") .axis({ grid: true }) .scale({ domain: ["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"] }) .sort(["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"]) .title(""), vl .color() .fieldN("quality") .scale({ range: waterColors, domain: ["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"], opacity: 1 }) .sort(["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"]) .title("Badewasserqualität") .legend({ orient: "top", columns: 2, titleOrient: "top" }), // vl .fill() .fieldN("quality") .scale({ range: waterColors, domain: ["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"] }) .sort(["Ausgezeichnet", "Gut", "Ausreichend", "Mangelhaft"]) .title("Badewasserqualität") .legend({ orient: "top", columns: 2, 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"]) .title("Badewasserqualität") .legend({ orient: "top", columns: 2, 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(plotWidth) // specifying responsive width .height(plotWidth / 3.5) .autosize({ resize: true }) //.autosize({ type: "fit-x", contains: "padding" }) .render()36:Tb11,/* viewof chart = { const height = 250; // Axis const y = d3 .scalePoint() .domain(["Mangelhaft", "Ausreichend", "Gut", "Ausgezeichnet"]) .range([height - margin.bottom, margin.top]); const xAccessor = (d) => d.datum; const yAccessor = (d) => d.quality; const xAxis = (svg) => svg .attr("transform", `translate(0,${margin.top})`) .call( d3 .axisBottom(x) .ticks(width / 80) .tickSize(height - 50) .tickFormat((d) => d.toLocaleString("de-CH", { month: "short", year: "numeric" }) ) ) .call((g) => g.select(".domain").remove()) .call((g) => g.attr("stroke", "currentColor").attr("stroke-opacity", 0.2) ); const yAxis = (svg) => svg .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisRight(y) .tickSize(width - margin.left - margin.right) .tickValues(["Mangelhaft", "Ausreichend", "Gut", "Ausgezeichnet"]) ) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.2) ) .call((g) => g.selectAll(".tick text").attr("x", 0).attr("dy", -4)); // SVG const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); svg.append("g").call(yAxis); // Symbols const symbols = svg .append("g") .attr("stroke-width", 1) .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("path") .data(locationData) .join("path") .attr( "transform", (d) => `translate(${x(xAccessor(d))}, ${y(yAccessor(d))})` ) .attr("fill", (d) => color(d.quality)) .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(200) ); // TOOLTIPS const tooltip = svg.append("g"); svg.on("touchmove mousemove", function (event) { const { datum, quality } = bisect(d3.pointer(event, this)[1]); tooltip.attr("transform", `translate(${x(datum)},${y(quality)})`).call( callout, `${datum.toLocaleString("de-CH", { day: "numeric", month: "short", year: "numeric" })} ${quality}` ); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); } */37:Tbe3,style = html``38:[] 31:{"id":"8e8406f08d643aa4","slug":"testing-badewasserqualitats-monitoring","title":"[Testing] Badewasserqualitäts-Monitoring","thumbnail":"13a5da7e7b29f3285e92ce3e5f21db54f613d49a1c0e94b7e1bdb2aab894fcda","access_level":"public","create_time":"$D2021-07-21T12:15:09.947Z","update_time":"$D2022-02-07T08:27:17.651Z","view_time":null,"first_public_time":"$D2021-07-21T12:20:08.554Z","has_unpublished_edits":null,"fork":{"id":"8ab265907c2cb708","slug":null,"title":"Badewasserqualitäts-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":"c365a64096212d04","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9c462d01fa9cdefc59de658728a5180d59049d26d0bf92c2d5b62b3b0753d40d","tier":"starter_2024"},"version":4345,"publish_version":4345,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"[Testing] Badewasserqualitäts-Monitoring","cells":[{"id":0,"value":"# [Testing] Badewasserqualitäts-Monitoring","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2995,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4303,"value":"viewof infoText = htl.html`

Entwicklung der Badewasserqualität:

${viewof scatter}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3024,"value":"/*\n viewof infoBox = htl.html`

\n\n \n \n \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

${map.clickedPlace.location}
Badewasserqualität: ${infoboxQuality}	${infoboxImage}
Letzte Messung: ${formatDate(\n map.clickedPlace.datum\n )}
Messung durch: ${map.clickedPlace.source}
Entwicklung der Badewasserqualität: ${viewof scatter}

`\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3087,"value":"md`## Scatter Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4253,"value":"mutable id = null // Define a mutable and set its initial value.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3907,"value":"locationData = data.filter((d) => d.location == map.clickedPlace.location)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3992,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4212,"value":"margin = ({ top: 20, right: 20, bottom: 40, left: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4209,"value":"x = d3\n .scaleUtc()\n .domain([new Date(\"2019-04-01\"), new Date()])\n .range([margin.left + 100, width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4206,"value":"bisect = {\n const bisect = d3.bisector((d) => d.date).left;\n return (mx) => {\n const date = x.invert(mx);\n const index = bisect(locationData, date, 1);\n const a = locationData[index - 1];\n const b = locationData[index];\n return b && date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4200,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call((text) =>\n text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .text((d) => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3617,"value":"md`# Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3603,"value":"mapLakes = d3.json(\n \"https://www.web.statistik.zh.ch/vis_observable_prototyping/alle_alle_seen_wgs84.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3605,"value":"mapRivers = d3.json(\n \"https://www.web.statistik.zh.ch/vis_observable_prototyping/fluesse_wgs84.json\"\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":3450,"value":"dataTG = d3\n .csv(\"https://www.web.statistik.zh.ch/cms_klzh/badewasserqualitaet_tg.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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2690,"value":"dataZH = d3\n .csv(\n \"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.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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":2449,"value":"md`## Shapes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"symbols = d3.symbols","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2530,"value":"symbol = d3.symbol()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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.symbols[1]).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","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.symbols[0]).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","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","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.symbols[3]).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","output":"$undefined","database":"$undefined"},{"id":2904,"value":"md`## Infobox Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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":4115,"value":"format = (date) =>\n date.toLocaleString(\"de-CH\", {\n month: \"short\",\n year: \"numeric\"\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"formatDate = d3.timeFormat(\"%d.%m.%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3247,"value":"formatYear = d3.timeFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":3245,"value":"currYear = formatYear(new Date())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":4288,"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":true,"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":2180,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","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":3997,"value":"import { tidy, desc, asc, filter, distinct } from \"@pbeshai/tidyjs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3993,"value":"d3Legend = require(\"d3-svg-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":83,"value":"leaflet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"leaftletCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"