2d:null 2e:["$","title",null,{"children":"Data Access für das Gemeindeporträt Kanton Zürich | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T5ab,{ const data = plotData.filter( (d) => d.gebiet == selectGebiet && d.jahr >= startYear ); const label = [...new Set(d3.map(data, (d) => d.label))]; const unit = [...new Set(d3.map(data, (d) => d.unit))]; return Plot.plot({ height: 275, marginTop: 40, marginLeft: 50, marginRight: 50, width, title: `${selectTitel}`, subtitle: `${selectGebiet}, in ${label}`, caption: `Hinweis zu den Daten: ${data[0].beschreibung}`, y: { axis: "both", grid: true, nice: true, ticks: 250 / 40, label: null, // label, tickFormat: (d) => d.toLocaleString("de-CH") // Hochkomma als Tausendertrennzeichen setzen }, marks: [ Plot.ruleY([0]), Plot.lineY(data, { x: "year", y: "value", stroke: "#f31505", marker: "circle" }), Plot.ruleX( data, Plot.pointerX({ x: "year", py: "value", stroke: "black" }) ), Plot.dot(data, Plot.pointerX({ x: "year", y: "value", stroke: "black" })), Plot.text( data, Plot.pointerX({ px: "year", py: "value", dy: -17, frameAnchor: "top-left", fontSize: "12px", fontVariant: "tabular-nums", text: (d) => [ `Jahr: ${d.jahr}`, `Wert: ${d.value.toLocaleString("de-CH")} ${unit}` ].join(" ") }) ) ] }); }34:T4a2,viewof plot = { const data = toggleKanton == true ? plotData.filter( (d) => (d.gebiet == selectGebiet || d.gebiet == "Zürich - ganzer Kanton") && d.jahr >= startYear ) : plotData.filter((d) => d.gebiet == selectGebiet && d.jahr >= startYear); const label = [...new Set(d3.map(data, (d) => d.label))]; const unit = [...new Set(d3.map(data, (d) => d.unit))]; return Plot.plot({ marginTop: 25, marginLeft: 50, color: { legend: true, scheme: "Set1" }, width, height: 350, title: selectTitel, subtitle: label, x: { label: null, grid: false, type: "utc", ticks: width / 120 }, y: { grid: true, ticks: 350 / 120, label: label, tickFormat: (d) => d.toLocaleString("de-CH") // Hochkomma als Tausendertrennzeichen setzen }, marks: [ Plot.ruleY([0]), Plot.lineY(data, { x: "year", y: "value", stroke: "gebiet", marker: "circle" }), Plot.crosshairX(data, { x: "year", y: "value", color: "gebiet", opacity: 1 }) ] }); }35:[{"id":"5eb209572835ecae1d87e479eacc20a37b3988cc8a2dce786209376c2bd4412ded88ee96c2b92f5f83560628eb5a5ee630cee513261ba76cb7651a654227310c","href":"https://static.observableusercontent.com/files/5eb209572835ecae1d87e479eacc20a37b3988cc8a2dce786209376c2bd4412ded88ee96c2b92f5f83560628eb5a5ee630cee513261ba76cb7651a654227310c","name":"OGD_Datenkatalog_JSON.PNG","type":"image/png","lastModified":1692890303608.854,"size":25696},{"id":"36f8c6ce7ed556195acc0c0721b04d50879c2e2722ddb99283ed9bfce93f2fcda818d345caa40b5740e95842d99eba02b93eb0deb6502dde7782a68d4ecd0419","href":"https://static.observableusercontent.com/files/36f8c6ce7ed556195acc0c0721b04d50879c2e2722ddb99283ed9bfce93f2fcda818d345caa40b5740e95842d99eba02b93eb0deb6502dde7782a68d4ecd0419","name":"embed_and_embed_cells_v2.png","type":"image/png","lastModified":1692970671980.945,"size":277686}] 31:{"id":"34e51408cbaafa2f","slug":"gemeindeportrat-data-access","title":"Data Access für das Gemeindeporträt Kanton Zürich","thumbnail":"0cbc7941d2949b9ba42f5c6917aaa142686fab0005898537b2bfbff3a85336c8","access_level":"public","create_time":"$D2023-08-18T09:08:17.270Z","update_time":"$D2025-04-10T13:06:23.407Z","view_time":null,"first_public_time":"$D2023-08-25T13:56:04.330Z","has_unpublished_edits":null,"fork":{"id":"fe887eb4dc187a99","slug":null,"title":"Untitled","owner":{"id":"c365a64096212d04","login":"cgrb","name":""}},"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":1783,"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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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":"Data Access für das Gemeindeporträt Kanton Zürich","cells":[{"id":0,"value":"# Data Access für das Gemeindeporträt Kanton Zürich\n\n_Work in Progress_\n\nDas [Gemeindeporträt vom Kanton Zürich (zh.ch/gemeindeportraet)](https://zh.ch/gemeindeportraet) ist ein umfangreiches Indikatorensystem, welches die wichtigsten Fakten zu den Zürcher Gemeinden beinhaltet. Es bietet über 300 Indikatoren für einzelne Gemeinden, Regionen oder den ganzen Kanton. Meist sind Datenreihen über einen längeren Zeitraum verfügbar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1247,"value":"## Datenbezug\nDie Daten können entweder direkt im Gemeindeporträt abgefragt und heruntergeladen oder über den [Datenkatalog der offenen Behördendaten]( https://www.zh.ch/de/politik-staat/statistik-daten/datenkatalog.html#/?q=gemeindeportraet) bezogen werden. Es fehlt derzeit jedoch eine Möglichkeit die Daten direkt über eine API abzurufen.\n\nFür Nutzende, die gerne selbst im Sinne von Abfragen auf die Daten zugreifen und die Daten so aktuell wie verfügbar und auch konsistent bei sich auf der Webseite oder in Applikationen einbinden möchten, sind die bestehenden Datenbezüge umständlich:\n- Im Gemeindeporträt müssen Indikatoren ausgewählt und die Daten händisch als CSV oder Excel exportiert werden.\n- Im Datenkatalog der offenen Behördendaten hat jede Ressource (Indikator) zwar einen Permalink, um aber alle Links für die Daten des Gemeindepoträts zu bekommen, müssen diese mühsam zusammengesucht werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1250,"value":"## Dieses Notebook\nMit diesem Notebook versuchen wir Nutzenden eine Zwischenlösung anzubieten, indem wir \n1. zeigen, wie sie systematisch an die Datensätze des Gemeindeporträts kommen,\n2. die Möglichkeit bieten, eine Liste der Indikatoren mit den dazugehörigen Download-URLs zu beziehen, und\n3. wir auch direkt eine Visualisierung der Indikatoren anbieten.\n4. (Optional) Embedding (Einbindung) der Visualisierungen in Webseiten.\n\nNachfolgend werden die einzelnen Optionen Schritt-für-Schritt erklärt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1252,"value":"---\n## 1. Die Datensätze identifizieren\n\nFür den Datenkatalog der offenen Behördendaten gibt es ein JSON mit allen verfügbaren Datensätzen und Ressourcen.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1260,"value":"

Das JSON beschreibt jeden Datensatz und listet die zum Datensatz gehörigen Distributionen (= Ressource = Indikator = CSV). Für jede Distribution gibt es eine **downloadUrl**, die den Permalink zum Datenfile (CSV) darstellt.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1771,"value":"Im GitHub Repository [**API_Gemeindeportraet**](https://github.com/statistikZH/API_Gemeindeportraet) wird eine unregelmässig aktualisierte Liste aller Datasets des Gemeindeportäts des Kantons Zürich ebenfalls publiziert, welche über den Link https://github.com/statistikZH/API_Gemeindeportraet/blob/main/output/gpzh_dataset_overview.csv abgerufen und direkt in Anwendungen eingebunden werden kann.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1276,"value":"### 1. JSON laden","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1269,"value":"Das JSON ist offen zugänglich und kann daher problemlos abgerufen werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"openzhJSON = {\n const jsonURL = \"https://www.web.statistik.zh.ch/ogd/daten/zhweb.json\";\n\n return d3.json(jsonURL);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"Reduzierung des JSON auf das Array der Werte.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"// Reducing the JSON to the array of values\njsonData = Object.values(openzhJSON)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"### 2. JSON filtern\nUm nur die Datensätze des Gemeindeporträts zu erhalten, muss das JSON gefiltert werden. Die Information, ob ein Datensatz aus dem Gemeindeporträt stammt, wird über den Parameter der landingPage mitgegeben.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"gpzhOnly = jsonData.filter(\n (d) =>\n d.landingPage ==\n \"https://www.zh.ch/de/politik-staat/gemeinden/gemeindeportraet.html\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"Am besten wird die Anzahl der Datensätze mit der Anzahl der bei der Abfrage des Datenkatalogs zurückgegebenen Datensätze verglichen: https://www.zh.ch/de/politik-staat/statistik-daten/datenkatalog.html#/?q=gemeindeportraet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1304,"value":"Das JSON lässt sich auch auf weitere Parameter hin filtern. Nachfolgend als Beispiel, wie alle Datensätze im format CSV aus dem JSON extrahiert werden können.\n\n```js\n\ncsvOnly = jsonData.filter(\n (item) =>\n item.distribution.find((distribution) => distribution.format === \"CSV\") &&\n // Optionally filter for publisher\n item.publisher.find(\n (publisher) => publisher === \"Statistisches Amt des Kantons Zürich\"\n )\n)\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1513,"value":"## 2. Download-URLs herunterladen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1648,"value":"Mit etwas Transformation der Daten kann nun auch die Download-URL für jeden Datensatz aus dem JSON extrahiert werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"// Data structure: assign downloadUrl per title, and rename properties.\ngroupedData = gpzhOnly.reduce((groups, d) => {\n groups.push({\n // Properties of the SGEM (code, name, type)\n // keyword: d.keyword,\n titel: d.title,\n beschreibung: d.description,\n thema: d.theme[0],\n start: d.startDate,\n ende: d.endDate,\n url: d.distribution[0].downloadUrl\n });\n\n return groups; // Excluding 'Stadt Zürich' as a whole, b/c we have each SGEM for Stadt Zürich\n}, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"// A flat array of arrays containing all the keys, followed by the array of values having these keys\ngrouped = d3.flatGroup(\n groupedData,\n (v) => v.thema,\n (d) => d.titel,\n (d) => d.beschreibung,\n (d) => d.url\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1681,"value":"Somit erhalten wir eine Liste aller Datensätze aus dem Gemeindeporträt mit deren Namen, Beschreibung und Download-URL.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1605,"value":"viewof filterTable = {\n const themenliste = [...new Set(d3.map(groupedData, (d) => d.titel))];\n return Inputs.select([null].concat(themenliste), {\n label: \"Tabelle nach Indikator filtern:\",\n // format: ([key, value]) => `${value} (${key})`, // customize the displayed options by adding the count of resources\n sort: true,\n value: null\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1636,"value":"Es wurden **${downloadTable.length}** Datensätze gefunden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"viewof downloadTable = {\n const tableData = grouped.map(([Thema, Titel, Beschreibung, Url]) => ({\n Thema,\n Titel,\n Beschreibung,\n Url\n }));\n\n return Inputs.table(\n filterTable == null\n ? tableData\n : tableData.filter((d) => d.Thema == filterTable),\n {\n header: {\n // Umbenennen einzelner Spaltennamen\n Titel: \"Indikator Name\",\n Url: \"Download Url\"\n },\n // value: tableData.filter((_, i) => [1, 3, 7, 9].includes(i)),\n multiple: true,\n sort: \"Titel\",\n reverse: false // sortiert nach Spalte Thema\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"

Sortieren: Die Tabelle kann nach jeder Spalte sortiert werden. Auswählen: Durch Anklicken der Checkboxen links neben dem Thema können auch nur einzelne Datensätze für den Export ausgewählt werden.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1667,"value":"Die Liste kann nun bequem als CSV oder JSON heruntergeladen werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1536,"value":"button(downloadTable, \"gpzh_downloadUrls.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"button(downloadTable, \"gpzh_downloadUrls.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1687,"value":"## 3. Daten visualisieren\n\nMit Hilfe der Liste können nun die Daten für die gewünschten Datensätze direkt geladen werden.\n\nNachfolgend wird über das Thema ein Datensatz ausgewählt und anschliessend für ein frei wählbares Gebiet als Liniendiagramm visualisiert.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1719,"value":"#### Datensatz wählen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"viewof selectTheme = Inputs.select(\n new Map(\n Array.from(\n d3.group(groupedData, (d) => d.thema), // group the GPZH datasets by theme\n ([key, values]) => [values.length, key]\n )\n ),\n {\n label: \"Thema:\",\n format: ([key, value]) => `${value} (${key} Datensätze)`, // customize the displayed options by adding the count of resources\n sort: false,\n value: \"Bevölkerung\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"viewof selectTitel = Inputs.select(\n Array.from(\n d3.group(\n grouped\n .map(([Thema, Titel]) => ({\n Thema,\n Titel\n }))\n .filter((d) => d.Thema == selectTheme),\n (d) => d.Titel\n ), // group the GPZH datasets by theme\n ([key, values]) => [key]\n ),\n {\n label: \"Datensätze zum Thema:\",\n // format: ([key, value]) => `${value} (${key})`, // customize the displayed options by adding the count of resources\n sort: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"downloadUrl = grouped\n .map(([Thema, Titel, Beschreibung, Url]) => ({\n Thema,\n Titel,\n Beschreibung,\n Url\n }))\n .filter((d) => d.Thema == selectTheme && d.Titel == selectTitel)[0].Url","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1703,"value":"

↑ Bemerkt? Wird ein neuer Datensatz gewählt, so ändert sich unmittelbar die Download-URL; achte auf die 3 Ziffern vor dem .csv.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1721,"value":"#### Daten werden heruntergeladen\nDie Daten, die sich hinter der Download-URL verstecken, werden direkt geladen und als Tabelle dargestellt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1709,"value":"Inputs.table(fetchedData, {\n columns: [\n \"BFS_NR\",\n \"GEBIET_NAME\",\n \"INDIKATOR_NAME\",\n \"INDIKATOR_JAHR\",\n \"INDIKATOR_VALUE\",\n \"EINHEIT_KURZ\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"fetchedData = d3.csv(downloadUrl, { typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1724,"value":"#### Daten werden visualisiert","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1730,"value":"Eine schlichte Darstellung der Daten je Gemeinde als Liniendiagramm. Fährt man mit der Maus über die Linie, werden die Werte je Jahr angezeigt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":602,"value":"viewof selectGebiet = Inputs.select(\n [...new Set(d3.map(fetchedData, (d) => d.GEBIET_NAME))],\n { label: \"Gemeinde wählen:\", value: \"Wetzikon\", sort: true }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1693,"value":"Es kann der dargestellte Zeitraum angepasst werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":925,"value":"viewof startYear = Inputs.range(\n d3.extent(plotData, (d) => d.jahr),\n { label: \"Startjahr\", step: 1 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"Auch Vergleiche mit anderen Gebieten, wie bspw. dem Kanton Zürich, sind möglich.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":806,"value":"viewof toggleKanton = Inputs.toggle({\n label: \"Kanton Zürich einblenden\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"## 4. Embedding (Einbindung)\n\nManchmal reicht ein Bild eines Diagramms nicht aus; ein Notebook kann interaktiv sein oder Live-Daten abrufen. Es ist dynamisch, und die Version, die an anderer Stelle gezeigt wird, sollte es auch sein.\n\nDurch die Einbindung kann eine funktionierende Version des Notebooks in eine andere Website eingefügt werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1752,"value":"Das Embedding ist kein Import – es ist nur HTML, was bedeutet, dass es überall im Web abgelegt werden kann. Es wird mit dem Embedding Tool erstellt, das sich im Zellenmenü (links neben jeder Zelle) und im Notebookmenü (oben rechts auf der Seite) befindet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1744,"value":"

${await FileAttachment(\"embed_and_embed_cells_v2.png\").image()}\n

Links: Menü der Code Zelle; Rechts: Menü des Notebooks.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1757,"value":"Neben einem Embedding als **iFrame** stehen weitere Embedding Methoden zur verfügung; **Runtime with JavaScript** oder **Runtime with React**, die Code generieren, der die Runtime-API zum Rendern der Zellen verwendet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1745,"value":"Mehr zum Thema Embedding von Observable Notebooks kann [hier](https://observablehq.com/@observablehq/embeds) nachgelesen werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1325,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"plotData = Object.assign(\n fetchedData.map((d) => ({\n jahr: +d.INDIKATOR_JAHR,\n year: d3.utcYear(new Date(d.INDIKATOR_JAHR)), //.toLocaleDateString(\"de-CH\"),\n gebiet: d.GEBIET_NAME,\n value: +d.INDIKATOR_VALUE,\n unit: d.EINHEIT_KURZ,\n label: d.EINHEIT_LANG,\n beschreibung: grouped\n .map(([Thema, Titel, Beschreibung, Url]) => ({\n Thema,\n Titel,\n Beschreibung,\n Url\n }))\n .filter((d) => d.Thema == selectTheme && d.Titel == selectTitel)[0]\n .Beschreibung,\n url: downloadUrl\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"button = (data, filename = \"data.csv\") => {\n if (!data) throw new Error(\"Array of data required as first argument\");\n\n let downloadData;\n if (filename.includes(\".csv\")) {\n downloadData = new Blob([d3.csvFormat(data)], { type: \"text/csv\" });\n } else {\n downloadData = new Blob([JSON.stringify(data, null, 2)], {\n type: \"application/json\"\n });\n }\n\n const size = (downloadData.size / 1024).toFixed(0);\n const button = DOM.download(\n downloadData,\n filename,\n `Download ${filename} (~${size} KB)`\n );\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"