2b:null 2c:["$","title",null,{"children":"Vorlage für Karten mit Daten aus dem Gemeindeporträt | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T4c5,wrapper = { return render( lit.html`

${viewof indikator}

${viewof jahr}

${indikator}, ${jahr}

${description}

${viewof mapLegend}

${viewof map}

Datenquelle: Gemeindepoträt des Kantons Zürich

Datenbezug: Daten als CSV herunterladen

`, this ); }32:T4f9,viewof map = { const svg = d3.create("svg").attr("viewBox", mapExtent); const karte = svg.append("g"); const mouseMap = svg.append("g"); const featureElements = karte .selectAll("path") .data(mapGeoJSON.features) .join("path") .attr("id", (d, i) => typeof d.properties.data !== "undefined" ? "map_" + d.properties.GEBIET_C : i ) .style("fill-opacity", 1) .style("stroke-width", 0.5) .attr("stroke", (d) => d.properties.ART_N === "See" ? "dimgrey" : "lightgrey" ) .attr("fill", (d) => d.properties.ART_N === "See" ? "lightgrey" : colorScale( +daten_raum.filter((bfs) => bfs.BFS_NR == d.properties.GEBIET_C)[0] .INDIKATOR_VALUE ) ) .attr("stroke-width", 0.5) .attr("d", d3.geoPath(projectionMap)) .style("cursor", "pointer") .attr("class", (d) => d.properties.ART_N) .attr("pointer-events", (d, i) => d.properties.ART_N === "See" ? "none" : "all" ) .on("mouseover", function (event, d) { console.log("mouse"); mouseOverMap(mouseMap, d, d3.select(this), jahr); }) .on("mouseout", function (event, d) { mouseOut(); }) .on("click"); return Object.assign(svg.node()); }33:T898,mouseOverMap = function (container, thisData, that, jahrAkt) { var thisBfs = thisData.properties.GEBIET_C; let bbox = that._groups[0][0].getBBox(); var mouseOverRW = 190, mouseOverRH = 48; //Position Tooltip var xPos = bbox.x + bbox.width / 2, yPos = bbox.y + bbox.height / 2; //Korrektur, damit tooltip nicht über den Rand hinaus geht: if (xPos > width / 2) { xPos = bbox.x + bbox.width / 2 - mouseOverRW; } if (yPos > 80) { yPos = bbox.y + bbox.height / 2 - mouseOverRH; } var mouseOverL = container .append("g") .attr("id", "mouseOverL") .attr("pointer-events", "none"); var mouseOverP = mouseOverL.append("g").attr("id", "mouseOverP"); var mouseOverT = mouseOverL .append("g") .attr("id", "mouseOverT") .attr("transform", "translate(" + xPos + "," + yPos + ")"); mouseOverP .append("path") .attr("class", "mouse") .attr("d", that.attr("d")) .style("fill", "none") .style("stroke", "dimgrey") .style("stroke-width", 2); mouseOverT .append("rect") .attr("x", -5) .attr("y", 0) .attr("width", mouseOverRW) .attr("height", mouseOverRH) .style("fill", "white") .attr("fill-opacity", 0.8) .style("stroke", "dimgrey"); mouseOverT .append("path") .attr("class", "mouse") .attr("d", that.attr("d")) .style("fill", "white") .attr("fill-opacity", 0.5) .attr("transform", "translate(" + -xPos + "," + -yPos + ")"); mouseOverT .append("text") .attr("x", 2) .attr("y", 16) .style("font-size", "14px") .style("font-weight", "bold") .text(thisData.properties.GEBIET_N) .style( "font-family", "HelveticaNowBlack, Arial Black, Helvetica, sans-serif" ); let value = daten_raum .filter((bfs) => bfs.BFS_NR == thisBfs)[0] .INDIKATOR_VALUE.toLocaleString("de-CH"); let unit = daten_raum.filter((bfs) => bfs.BFS_NR == thisBfs)[0].EINHEIT_KURZ; mouseOverT .append("text") .attr("x", 2) .attr("y", 16) .attr("dy", "1.4em") .style("font-size", "14px") .text(jahrAkt + ": " + value + " " + unit) .style("font-family", "HelveticaNowRegular, Helvetica, Arial, sans-serif"); }34:[] 2f:{"id":"b53b20bfd07349f0","slug":null,"title":"Vorlage für Karten mit Daten aus dem Gemeindeporträt","thumbnail":"021b8c0c5ee0d32ba0fe1866ef6df56670514c8d8e99bb573a077a053cb590a3","access_level":"public","create_time":"$D2023-08-31T16:33:22.350Z","update_time":"$D2023-09-01T06:42:52.252Z","view_time":null,"first_public_time":"$D2023-08-31T16:33:22.350Z","has_unpublished_edits":null,"fork":{"id":"e7ee2f1a9f83bb58","slug":"vorlage-fur-karten-mit-daten-aus-dem-gemeindeportrat","title":"Vorlage für Karten mit Daten aus dem Gemeindeporträt","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":2132,"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":"1abd9f68e8b72174","slug":"gemeindeportrat-data-access-vorlagen","title":"Gemeindeporträt - Data Access & Vorlagen","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Vorlage für Karten mit Daten aus dem Gemeindeporträt","cells":[{"id":0,"value":"# Vorlage für Karten mit Daten aus dem Gemeindeporträt","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"logo","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1920,"value":"_[Work in Progress]_\n\n**Known issue:**\nFür einige Indikatoren gibt es keine Daten für den Zeitraum ab 2019. Dies führt derzeit dazu, dass die Karte und andere Elemente nicht angezeigt werden. Das Notebook muss neu geladen werden → wird vorübergehend durch den Ausschluss von Indikatoren mit Zeitreihen, die vor 2019 enden, gelöst.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1802,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"## 1. Kartenmaterial laden","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1518,"value":"// Zwischen 2019 und 2022 gab es keine Gemeindemutationen. Es kann die gleiche Karte verwendet werden. Auf den 1.1.2023 gab es erstmals wieder eine Gemeindefusion; dafür gibt es eine aktualisierte Kartengrundlage.\npathMaps = (function () {\n if (\n d3.max(\n daten_raum,\n (d) => d.INDIKATOR_JAHR >= 2019 && d.INDIKATOR_JAHR < 2023\n )\n ) {\n return \"https://www.web.statistik.zh.ch/geodaten_visualisierungen/VIS_GEMEINDEN_SEEN_GEN_F_KTZH/VIS_GEMEINDEN_SEEN_GEN_F_KTZH_2019_01_01.json\";\n } else if (d3.max(daten_raum, (d) => d.INDIKATOR_JAHR >= 2023)) {\n return \"https://www.web.statistik.zh.ch/geodaten_visualisierungen/VIS_GEMEINDEN_SEEN_GEN_F_KTZH/VIS_GEMEINDEN_SEEN_GEN_F_KTZH_2023_01_01.json\";\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"md`Import der Geodaten:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1517,"value":"mapGeoJSON = d3.json(\n pathMaps \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"projectionMap = d3 // The GeoJSON is encoded in WGS84 planar coordinates; we use the Marcator projection.\n .geoMercator()\n .fitExtent(mapExtent, mapGeoJSON)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1979,"value":"Die GeoJson für die Jahre vor 2019 sind auf Github verfügbar: https://github.com/statistikZH/Ressources_Maps\nLeider ist dieses Kartenmaterial noch nicht mit dem ab 2019 harmonisiert.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1938,"value":"## 2. Daten des Gemeindeporträts laden","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1542,"value":"md`Um zu zeigen, wie man die Karte einfärbt, laden wir uns Daten für den ausgewählten Indikator vom Gemeindeporträt ins Notebook:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1948,"value":"Zunächst laden wir uns die Liste der Datensätze mit den Download-Urls aus dem [GitHub Repo \"API_Gemeindepotraet\"](https://github.com/statistikZH/API_Gemeindeportraet/tree/main).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1398,"value":"gpzh_datasets = d3.csv(\n \"https://raw.githubusercontent.com/statistikZH/API_Gemeindeportraet/main/output/gpzh_dataset_overview.csv\", {typed: true}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2120,"value":"Temporäre Lösung: Datensätze bei denen das Enddatum der Zeitreihe vor dem 31.12.2019 liegen, werden bei der Auswahl der Indikatoren ausgeschlossen. Das sind rund 15 Indikatoren.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2109,"value":"filtered_datasets = gpzh_datasets.filter((d) => d.end_date >= \"2019-12-31\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2098,"value":"Inputs.table(filtered_datasets)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1966,"value":"Jetzt können wir die Datensätze filterbar machen, zum Beispiel nach dem Indikatornamen. Dazu extrahieren wir den Namen der Indikatoren. So können wir der Karte ein Dropdown-Menü mit den Indikatoren hinzufügen, mit dem die auf der Karte angezeigten Werte geändert werden können.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1296,"value":"indikatoren = [...new Set(d3.map(filtered_datasets, (d) => d.title))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1335,"value":"viewof indikator = Inputs.select(\n [\"Bestand Hybridantrieb [%]\"].concat(indikatoren.sort()),\n {\n label: \"Indikator\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"Aufgrund des gewählten Indikators definieren wir den Datensatz. Die Download-URL für unsere Daten lautet:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"url = filtered_datasets.filter((d) => d.title == indikator)[0].download_url","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1955,"value":"Die Daten könne wir nun direkt Laden und uns in einer Tabelle anzeigen lassen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1737,"value":"data = d3.csv(url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"Inputs.table(daten_raum)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1960,"value":"Neben der Download-Url können wir auch andere Informationen aus dieser Liste nutzen; bspw. die Beschreibung des Indikators oder den verfügbaren Zeitraum. Die Beschreibung können wir dann direkt mit an der Karte anzeigen; das gibt Nutzenden mehr Kontext zu den Daten.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1784,"value":"description = filtered_datasets.filter((d) => d.title == indikator)[0].description","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"jahre = [\n ...new Set(\n d3.map(\n data.filter((d) => d.INDIKATOR_JAHR >= 2019), // Wir limitieren auf 2019, da wir davor die Kartendaten noch nicht gut harmonisiert und historisiert verfügbar haben.\n (d) => d.INDIKATOR_JAHR\n )\n )\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1510,"value":"viewof jahr = Inputs.select(jahre.sort(d3.descending), {\n label: \"Jahr\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1974,"value":"Durch Auswahl des Indikators und nun auch des Jahres können wir die Daten festlegen, nach denen die Karte eingefärbt werden soll.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1327,"value":"daten_raum = data.filter(\n (el) => el.INDIKATOR_NAME == indikator && el.INDIKATOR_JAHR == jahr\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2080,"value":"## 3. Karte zeichnen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1879,"value":"**Legende:** Jetzt kann die Legende definiert werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1794,"value":"viewof mapLegend = Legend(colorScale, 250, {\n title: daten_raum.filter((d) => d.INDIKATOR_NAME == indikator)[0]\n .EINHEIT_LANG,\n tickSize: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"**Karte:** Und schlussendlich auch die Karte.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1549,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2078,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"mouseOut = function () {\n d3.select(\"#mouseOverL\").remove();\n d3.select(\"#mouseOverC\").remove();\n\n d3.select(\".Gemeinde\")\n .selectAll(\"path\")\n .style(\"stroke-width\", 0.5)\n .style(\"fill-opacity\", 1)\n .style(\"stroke-opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1788,"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":1581,"value":"colorScale = d3.scaleSequential(d3.interpolateViridis).domain(\n d3.extent(\n daten_raum.filter((el) => el.BFS_NR > 0),\n (d) => +d.INDIKATOR_VALUE\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"margin = ({ top: 15, right: 25, bottom: 30, left: 35 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1439,"value":"height = Math.min(500, width * (584 / 464))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1824,"value":"mapWidth = // ? Math.max(Math.min(width * 0.95, width), 320) // width >= breakpoints[2]\n// : width\n\nwidth >= breakpoints[1] ? Math.max(Math.min(width, 1152), 320) : width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"mapExtent = [\n // [100, 16],\n [0, 0],\n [width, height]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1823,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"md`## Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1807,"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":5,"value":"## Imports & Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1198,"value":"import { logo } from \"@statistikzh/shared-imports\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1791,"value":"import { Legend } from \"a6f229c8e92174c1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1805,"value":"lit = import(\"lit-html@2.8.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"