2b:null 2c:["$","title",null,{"children":"NIS-Messungen | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T64e,# NIS-Messungen Um Aussagen über die Exposition der Bevölkerung im Kanton Zürich mit Mobilfunkstrahlung machen zu können, werden seit 2011 systematische Messungen auf Pausenplätzen von Kindergärten und Schulen in verschiedenen Gemeinden durchgeführt. Auf bestimmten Pausenplätzen werden zudem Wiederholungsmessungen durchgeführt, um Aussagen zur zeitlichen Entwicklung der Strahlung machen zu können (Vgl. [Mobilfunk | Kanton Zürich (zh.ch)](https://www.zh.ch/de/umwelt-tiere/luft-strahlung/mobilfunk.html)). - Die Messresultate der einzelnen Messorte können über eine Karte mit Markern und/oder ein Auswahlfeld gefunden werden. - Nach Auswahl eines Messortes wird für die drei Services Mobilfunk, WLAN und Rundfunk jeweils eine Grafik mit der Angabe zur Feldstärke in Volt pro Meter (V/m). Zusätzlich wird der geltende Anlagegrenzwert je Service angezeigt. - Nach einem Klick auf den Marker oder die Auswahl aus dem Dropdown-Menü wird mit Hilfe des `code` der Location zur entsprechenden Stelle auf der Karte gezoomt. Wenn die Location-Auswahl zurückgesetzt wird, wird auf die Standard-Zoomstufe zurückgezoomt, d.h. auf Lng, Lat für den gesamten Kanton. - Entfernen einer Auswahl setzt die Karte auf die Standard-Zoomstufe zurück, d.h. auf Lng, Lat für den gesamten Kanton. - Grafiken: Die Werte sind ausserhalb der Balken angeschrieben, weil sie z.T. sehr klein sind und aufgrund der Achsengestaltung kaum Balken sichtbar sind. **Datenquelle:** [Öffentlicher Datensatz «Kurzzeitmessungen NIS im Kanton Zürich»](https://datenkatalog.statistik.zh.ch/datasets/2462@awel-kanton-zuerich)32:T69a,wrapper = { // sync; return render( lit.html`

${viewof searchDropdownMessort} ${viewof regionList}

Zur Anzeige der Messwerte auf einen Messort in der Karte klicken oder einen Messort über die Suche auswählen.

${viewof map}

Die Karte zeigt die Orte der einmaligen Messungen ${markerEinmal} und der Wiederholungsmessungen ${markerMehrmals} im Kanton Zürich. Standortdaten der Messorte im CSV-Format herunterladen. | Öffentlicher Datensatz «Kurzzeitmessungen NIS im Kanton Zürich»

${viewof chartWrapper}

`, this ); }33:T7e5,viewof chartMobilfunk = { const dimensions = chartDimensions; const data = chartData.get("Mobilfunk"); if (!data) { return; } const threshold = grenzwert.get("Mobilfunk")[0].grenzwert; // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, chartWidth, dimensions.height]) .attr("aria-hidden", "true") .style("display", "block"); svg.call(xAxis); svg .append("g") // .attr("fill", (d) => color(data[0].service)) .attr("fill", serviceColor) .selectAll() .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d.jahr)) .attr("width", (d) => x(d.wert) - x(0)) .attr("height", parseInt(y.bandwidth())); // Annotation mit dem Anlagegrenzwert svg .append("line") .attr("y1", dimensions.margin.top) .attr("y2", dimensions.height - dimensions.margin.bottom) .attr("x1", x(threshold)) .attr("x2", x(threshold)) .style("stroke", isNaN(threshold) ? "transparent" : thresholdColor) .style("stroke-width", 2); svg .append("text") .attr("fill", thresholdColor) .attr("text-anchor", "middle") .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")) .attr("transform", function (d, i) { var xText = x(threshold) + 5; var yText = dimensions.height / 2; return "translate(" + xText + "," + yText + ") rotate(90)"; }) .text("Anlagegrenzwert:" + threshold + "V/m"); // Annotation der Werte pro Jahr svg .selectAll(".text") .data(data) .enter() .append("text") .attr("class", "label") .attr("y", (d) => y(d.jahr) + parseInt(y.bandwidth() / 2)) .attr("x", (d) => x(d.wert)) .attr("dy", "0.3em") .attr("dx", 5) .attr("fill", ZHColors.black["60"]) .attr("pointer-events", "none") .attr("font-size", "12px") .text((d) => (d.wert < 0.1 ? "< 0,1" : formatValue(d.wert))); svg.call(yAxis); return Object.assign(svg.node(), { scales: { color } }); }34:T7e2,viewof chartRundfunk = { const dimensions = chartDimensions; const data = chartData.get("Rundfunk"); if (!data) { return; } const threshold = grenzwert.get("Rundfunk")[0].grenzwert; // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, chartWidth, dimensions.height]) .attr("aria-hidden", "true") .style("display", "block"); svg.call(xAxis); svg .append("g") // .attr("fill", (d) => color(data[0].service)) .attr("fill", serviceColor) .selectAll() .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d.jahr)) .attr("width", (d) => x(d.wert) - x(0)) .attr("height", parseInt(y.bandwidth())); // Annotation mit dem Anlagegrenzwert svg .append("line") .attr("y1", dimensions.margin.top) .attr("y2", dimensions.height - dimensions.margin.bottom) .attr("x1", x(threshold)) .attr("x2", x(threshold)) .style("stroke", isNaN(threshold) ? "transparent" : thresholdColor) .style("stroke-width", 2); svg .append("text") .attr("fill", thresholdColor) .attr("text-anchor", "middle") .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")) .attr("transform", function (d, i) { var xText = x(threshold) + 5; var yText = dimensions.height / 2; return "translate(" + xText + "," + yText + ") rotate(90)"; }) .text("Anlagegrenzwert:" + threshold + "V/m"); // Annotation der Werte pro Jahr svg .selectAll(".text") .data(data) .enter() .append("text") .attr("class", "label") .attr("y", (d) => y(d.jahr) + parseInt(y.bandwidth() / 2)) .attr("x", (d) => x(d.wert)) .attr("dy", "0.3em") .attr("dx", 5) .attr("fill", ZHColors.black["60"]) .attr("pointer-events", "none") .attr("font-size", "12px") .text((d) => (d.wert < 0.1 ? "< 0,1" : formatValue(d.wert))); svg.call(yAxis); return Object.assign(svg.node(), { scales: { color } }); }35:T49e,viewof chartWLAN = { const dimensions = chartDimensions; const data = chartData.get("WLAN"); if (!data) { return; } // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, chartWidth, dimensions.height]) .attr("aria-hidden", "true") .style("display", "block"); svg.call(xAxis); svg .append("g") // .attr("fill", (d) => color(data[0].service)) .attr("fill", serviceColor) .selectAll() .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d.jahr)) .attr("width", (d) => x(d.wert) - x(0)) .attr("height", parseInt(y.bandwidth())); // Annotation der Werte pro Jahr svg .selectAll(".text") .data(data) .enter() .append("text") .attr("class", "label") .attr("y", (d) => y(d.jahr) + parseInt(y.bandwidth() / 2)) .attr("x", (d) => x(d.wert)) .attr("dy", "0.3em") .attr("dx", 5) .attr("fill", ZHColors.black["60"]) .attr("pointer-events", "none") .attr("font-size", "12px") .text((d) => (d.wert < 0.1 ? "< 0,1" : formatValue(d.wert))); svg.call(yAxis); return Object.assign(svg.node(), { scales: { color } }); }36:T447,viewof metadataWrapper = { if (interval === "Einmalige Messung") { return lit.html`

Dargestellt wird der höchste 6-Minuten-Mittelwert, der während einer Aufzeichnungsdauer von 30 Minuten ermittelt wurde. Es wurden Messungen für die Funkkategorien Mobilfunk (Strahlung von Basisstationen und mobilen Endgeräten), Rundfunk und WLAN inklusive sonstiger freier Funkanwendungen durchgeführt.

`; } else if (interval === "Wiederholungsmessung") { return lit.html`

Für jedes der aufgeführten Messjahre wird der höchste 6-Minuten-Mittelwert dargestellt, der während einer Aufzeichnungsdauer von 30 Minuten ermittelt wurde. Es wurden Messungen für die Funkkategorien Mobilfunk (Strahlung von Basisstationen und mobilen Endgeräten), Rundfunk und WLAN inklusive sonstiger freier Funkanwendungen durchgeführt.

`; } else; }37:T727,viewof chartWrapper = { if (selectedRegionId !== null) { return lit.html`

Elektrische Feldstärken am Messort ${selectedMessort}

Höchster 6-Minuten-Mittelwert, in Volt pro Meter (V/m)

${viewof metadataWrapper}

Mobilfunk${viewof chartMobilfunk}

Rundfunk${viewof chartRundfunk}

WLAN^*${viewof chartWLAN}

* Die NISV legt keine Anlagegrenzwerte für mobile Kommunikationsmittel oder WLAN fest. Solche Geräte müssen aber gerätespezifische Begrenzungen einhalten.

Die Erklärungen zur Einordnung der Messwerte und zur Kategorisierung der gemessenen Funkanwendungen sind in den nachfolgenden Texten zu finden.

Datenquelle: Amt für Abfall, Wasser, Energie und Luft des Kantons Zürich, NIS-Expositionsmessung. Daten zur Grafik im CSV-Format herunterladen.

`; } }38:T4e4,xAxis = (svg) => { function formatTick(d) { const s = localeDeCH.format(".1f")(d); return this.parentNode.nextSibling ? `\xa0${s}` : `${s} V/m`; } const dimensions = chartDimensions; const axisWidth = x.range()[1] - x.range()[0]; const pixelsPerTick = 50; const numberOfTicksTarget = Math.max( 1, Math.floor(axisWidth / pixelsPerTick) ); svg .append("g") .attr( "transform", `translate(0,${dimensions.height - dimensions.margin.bottom})` ) .call( d3 .axisTop(x) .ticks(numberOfTicksTarget) .tickSizeOuter(0) .tickSize( dimensions.height - dimensions.margin.bottom - dimensions.margin.top ) .tickFormat(formatTick) ) .call((g) => g .selectAll(".tick text") .attr("fill", ZHColors.black["60"]) .attr("y", 16) .style("font-size", responsiveValue("12px", "14px")) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.black["60"]); }) .call((g) => g .selectAll(".tick line") .attr("stroke-dasharray", "2,2") .attr("stroke", ZHColors.black["60"]) ) .call((g) => { g.selectAll(".domain").remove(); }); }39:Td5e,css = html``3a:[{"id":"8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","href":"https://static.observableusercontent.com/files/8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","name":"close-2@1.svg","type":"image/svg+xml","lastModified":1709217349593.938,"size":367},{"id":"65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","href":"https://static.observableusercontent.com/files/65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","name":"close.svg","type":"image/svg+xml","lastModified":1709217349593.938,"size":305}] 2f:{"id":"04f203cf6054b073","slug":null,"title":"NIS-Messungen","thumbnail":"13155c37b991b03c2254a65ea209fddcbc3ca64f0ddaefe6f591c1d93c4fca42","access_level":"public","create_time":"$D2024-02-29T14:35:49.593Z","update_time":"$D2026-01-14T14:07:07.757Z","view_time":null,"first_public_time":"$D2024-03-15T07:54:50.271Z","has_unpublished_edits":null,"fork":true,"stars":1,"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":1755,"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}],"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":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a2cecb488645c991","slug":"awel-schulhausmessung","title":"AWEL - NIS-Kurzzeitmessungen","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"NIS-Messungen","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"### Checks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":915,"value":"selectedRegionId","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"viewof map","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"---\n## Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"### Search dropdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"viewof searchDropdownMessort = createSearchField({\n label: \"Gemeinde oder Messort suchen\",\n list: [\n ...new Set(\n [...new Map(data.map((item) => [item[\"messort\"], item])).values()] // get an array of unique values for `messort` by key\n .map((d) => ({\n label: d.messort,\n id: d.code,\n selected: selectedRegionId === d.code // return true or false\n }))\n .values()\n )\n ],\n onSelect: toggleRegion\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"### Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"Der `metadataWrapper` ist der Begleittext zu den Messorten, welche entweder einmalige Messungen oder Wiederholungsmessungen sind.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1191,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"Der `chartWrapper` fasst alle drei Charts mit den Messwerten je Service für den ausgewählten Messort zusammen. Der Wrapper sorgt ausserdem dafür, dass die Grafiken nur angezeigt werden, wenn tatsächlich ein Messort ausgewählt ist.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":704,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"### Chips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":623,"value":"viewof regionList = {\n const regionContent = (region, index) => {\n return lit.html`\n ${region.messort}\n `;\n };\n\n const shadowChips = new Array(maxSelectedRegions).fill(null);\n\n return render(\n ChipList({\n content: [selectedRegionId].map((id, index) => {\n if (id === null) return ShadowChip();\n\n const region = data.find((d) => d.code === id);\n const args = {\n content: regionContent(region, index)\n };\n\n return RemovableChip({\n ...args,\n ondelete: () => removeRegion(region)\n });\n })\n }),\n this\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"### Map Legend\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1383,"value":"viewof mapLegend = {\n return lit.html`

\n ${markerEinmal} Einmalige Messung \n

\n \n

\n ${markerMehrmals} Wiederholungsmessung \n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"### Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":736,"value":"viewof map = createMapLibre(toggleRegion)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"mapUpdate = viewof map.update(selectedRegionId)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"---\n## State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"viewof selectedRegionId = Inputs.input(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"---\n### Derived State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"`selectedRegion` is the derived data based on the location selected, either by map or drop-down selection. The data returned is the data base for the graphs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"selectedRegion = data.filter((d) => d.code == selectedRegionId)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"selectedMessort = [...new Set(selectedRegion.map((d) => d.messort))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"toggleRegion = (code) => {\n setValue(code, viewof selectedRegionId);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"setValue = (value, input) => {\n if (input.value !== value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"render = function (\n template,\n element = document.createElement(\"span\"),\n options\n) {\n lit.render(template, element, options);\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"responsiveValue = (...values) => {\n /* This is a function to define a responsive value without being to verbose. The values have to have the same position in the list as the breakpoints that they're associated to. */\n\n const index =\n values.length -\n 1 -\n breakpoints\n .slice(0, values.length)\n .reverse()\n .findIndex((breakpoint) => breakpoint <= window.innerWidth);\n\n return values[index];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"removeRegion = (region) => {\n setValue(null, viewof selectedRegionId);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"### Locale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":598,"value":"localeDeCH = {\n const res = await fetch(\n \"https://cdn.jsdelivr.net/npm/d3-format@1/locale/de-CH.json\"\n );\n const data = await res.json();\n return d3.formatLocale(data);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"**Formatierung der angezeigten Werte:** Die gemessenen Werte sind sehr klein, oft kommt es auf die dritte Stelle nach dem Komma an.\n\nFormale Vorgaben zu Dezimalkomma aus dem ZHweb-Designsystem: Dezimalzeichen im Deutschen ist das Komma. Überflüssige Nullen nach dem Komma lassen wir weg.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"formatValue = (v) => localeDeCH.format(\".1f\")(v) // + \" V/m\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"---\n## Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"mapWidth = width >= breakpoints[1]\n ? Math.max(Math.min(width * 0.5, 768), 320)\n : width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"legendWidth = width >= breakpoints[1]\n ? Math.max(Math.min(width * 0.5, 768), 320)\n : width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"tooltipMaxWidth = 220","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"### Chart components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":490,"value":"chartsBreakpoint = breakpoints[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"chartWidth = width >= chartsBreakpoint\n ? chartDimensions.width / 3\n : chartDimensions.width\n\n// chartWidth = Number.parseInt(\n// ((width - chartMargin.left - chartMargin.right) / 3) * 0.9\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"chartHeight = responsiveValue(200, 250, 250)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"chartMargin = ({\n top: 25,\n right: 30,\n bottom: 25,\n left: 45\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"chartDimensions = {\n return {\n width,\n height: chartHeight,\n margin: chartMargin,\n boundedWidth: width - chartMargin.left - chartMargin.right,\n boundedHeight: chartHeight - chartMargin.top - chartMargin.bottom\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"### Achsen\n\nDie **x-Achse** zeigt den Bereich der Messwerte an. \n\nSie ist für alle drei Services identisch. Die `domain` der x-Achse reicht von `0` bis zum höchsten Wert in den Daten, der ein Messwert oder ein Grenzwert sein kann. \n\nDie x-Achse reicht jedoch immer mindestens bis zum höchsten Grenzwert (5 V/m).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"x = {\n const maxRange = [\n d3.max(data, (d) => d.grenzwert), // Grösster Grenzwert\n d3.max(data, (d) => d.wert) // Grösster Messwert\n ];\n const maxXValue = d3.greatest(maxRange); // Gib den grössten Wert in den Daten zurück\n\n return d3\n .scaleLinear()\n .domain([0, maxXValue])\n .range([\n chartDimensions.margin.left,\n chartWidth - chartDimensions.margin.right\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"Die **y-Achse** zeigt die Jahre an.\n\nDie Anzahl der Jahre variiert je nach Messort, sollte aber für alle drei Services am Messort gleich sein. Einmalmessungen haben 1 Jahr, während Wiederholungsmessungen n Jahre haben können.\n\nDaher muss die `domain` für die y-Achse je nach Messort festgelegt werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"// Funktion um die Jahre am Messort zu extrahieren\nfunction getYearExtent(code) {\n const locationData = data\n .filter((d) => d.code == code)\n .sort((a, b) => b.jahr - a.jahr); // sortiert, so dass das neueste Jahr zuerst kommt\n return [...new Set(d3.map(locationData, (d) => d.jahr))]; // distinct Werte, da die y-Achse als d3.scaleBand() angelegt wird\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"y = {\n let yExtent = getYearExtent(selectedRegionId);\n return d3\n .scaleBand()\n .domain(yExtent)\n .range([\n chartDimensions.margin.top,\n chartDimensions.height - chartDimensions.margin.bottom\n ])\n .padding(0.2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"yAxis = (svg) => {\n const dimensions = chartDimensions;\n const numOfTicks = y.domain()[1];\n const axisHeight = dimensions.boundedHeight;\n const pixelsPerTick = 50;\n const numberOfTicksTarget = Math.max(\n 1,\n Math.floor(axisHeight / pixelsPerTick)\n );\n\n svg\n .append(\"g\")\n // For tick values left of graph uncomment\n .attr(\"transform\", `translate(${dimensions.margin.left}, 0)`)\n .call(d3.axisLeft(y).tickSize(8).ticks(numberOfTicksTarget))\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"fill\", ZHColors.black[\"60\"])\n .style(\"font-size\", responsiveValue(\"12px\", \"14px\"))\n )\n .call((g) => {\n g.selectAll(\".tick line\").attr(\"stroke\", ZHColors.black[\"20\"]);\n })\n .call((g) => {\n g.selectAll(\".domain\").remove();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"## Filter components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":548,"value":"Es ist nicht vorgesehen, die Messorte zu vergleichen. Daher ist die Gebietsauswahl auf `1` beschränkt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"maxSelectedRegions = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"RemovableChip = ({\n ondelete,\n onpointerenter,\n onpointerleave,\n content,\n ariaLabel = \"Entfernen\"\n}) => {\n return lit.html`\n

\n ${content}\n \n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"TogglableChip = ({\n onpointerenter,\n onpointerleave,\n oninput,\n content,\n checked\n}) => {\n return lit.html`\n

\n ${content}\n \n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"ShadowChip = () => lit.html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"ChipList = ({ content }) => lit.html`\n

\n ${content}\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"### Map components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":757,"value":"markerPath = \"M25.6051 4.96472C22.7699 2.1978 18.9616 0.654846 15.0001 0.668053C11.0386 0.654846 7.23025 2.1978 4.39509 4.96472C3.00568 6.31104 1.90074 7.92263 1.14579 9.70395C0.390834 11.4853 0.00123501 13.4 9.1192e-05 15.3347C-0.0138092 19.4276 1.5619 23.366 4.39509 26.3197L15.0001 37.3347L25.6051 26.3197C28.4383 23.366 30.014 19.4276 30.0001 15.3347C29.9989 13.4 29.6094 11.4853 28.8544 9.70395C28.0994 7.92263 26.9945 6.31104 25.6051 4.96472ZM15.0001 20.6681C12.2318 20.6681 10.0001 18.4347 10.0001 15.6664C9.99921 15.0096 10.128 14.3591 10.3789 13.7522C10.6299 13.1453 10.9982 12.5938 11.4627 12.1295C11.9272 11.6651 12.4787 11.297 13.0858 11.0463C13.6928 10.7955 14.3433 10.667 15.0001 10.6681C17.7684 10.6681 20.0001 12.9014 20.0001 15.6664C20.0012 16.3234 19.8726 16.9741 19.6218 17.5814C19.3709 18.1886 19.0027 18.7403 18.5382 19.205C18.0737 19.6696 17.5221 20.038 16.9149 20.2891C16.3078 20.5401 15.6571 20.6689 15.0001 20.6681Z\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"markerEinmal = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"markerMehrmals = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"---\n## Styling / Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":951,"value":"pageColor = \"#1A7F1F\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"ZHColors = ({\n black: {\n 100: \"#000000\",\n 80: \"#333333\",\n 60: \"#666666\",\n 40: \"#949494\",\n 20: \"#cccccc\",\n 10: \"#f0f0f0\",\n 5: \"#f7f7f7\",\n 0: \"#FFFFFE\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"Die **Hauptfarbe der ZHweb-Themenseite** wird genutzt, um die Balken für die Services einzufärben. Die Services werden in einzelnen Grafiken mit separatem Titel dargestellt. Aus diesem Grund wird die Farbwahl auf eine Farbe für alle Services reduziert. Das trägt zu einem ruhigeren Gesamtbild bei, da es harmonischer wirkt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"serviceColor = pageColor // [\"#7F3DA7\", \"#A77F3D\", \"#3DA77F\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"Die **Komplementärfarbe zur Hauptfarbe der Themenseite** markiert den Anlagegrenzwert.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"// Komplementärfarbe zur Hauptfareb der Seite wird für die Markierung des Grenzwerts verwendet\nthresholdColor = \"#7F3DA7\" //${pageColor}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"color = {\n return d3.scaleOrdinal(\n services,\n serviceColor\n //d3.schemeGnBu[9].slice(3)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"elIds = ({\n inputWrapper: DOM.uid(\"zhstat-input-wrapper\"),\n mapContainer: DOM.uid(\"zhstat-map-container\"),\n chartWrapper: DOM.uid(\"zhstate-chart-wrapper\"),\n card: DOM.uid(\"zhstate-card\"),\n chip: DOM.uid(\"zhstat-chip\"),\n chipShadow: DOM.uid(\"zhstat-chip-shadow\"),\n chipList: DOM.uid(\"zhstat-chip-list\"),\n chipListReset: DOM.uid(\"zhstat-chip-list-reset\"),\n visuallyHidden: DOM.uid(\"zhstat-visually-hidden\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"import { joinedData, grenzwerte } from \"9239cb5e2bf926fe\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"data = joinedData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"Inputs.table(data.filter((d) => d.jahr === 2023))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"// group data by service\nchartData = d3.group(selectedRegion, (d) => d.service)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"services = [...new Set(data.map((d) => d.service))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"grenzwert = d3.group(grenzwerte, (d) => d.service)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"device = [...new Set(selectedRegion.map((d) => d.device))][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"interval = [...new Set(selectedRegion.map((d) => d.intervall))][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"searchDropdown","database":"$undefined"},{"id":1732,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import { createSearchField } from \"9483c185142e1463\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"import { createMapLibre } from \"4bb14dc580841ecd\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"lit = import(`https://esm.run/lit-html@3`) // import(\"lit-html@3.2.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"maplibregl = require(\"maplibre-gl@4.1.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"