2d:null 2e:["$","title",null,{"children":"VSA - Personalübersicht | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T150a,viewof mapVSA = { const stroke_color = "#4d4d4d"; const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, heightMap + margin.bottom]); let selected = selectionPrimar; let selectedOberMap = selectedOber; const karte = svg.append("g").attr("id", "karte"); // .attr( // "transform", // "translate(" + // (widthNow - widthNow * 1.5) / 2 + // "," + // (10 + margin.top) + // ")" // ); // Render geometries from topojson const featureElement = karte .selectAll("path") .data(map2020.features) .enter() .append("path") .attr("d", d3.geoPath()) .style("fill", (d) => d.properties.ART_N != "See" // "-99" are lakes ? colorBez(d.properties.BFS_N) // coloring 'Bezirke' by property 'BFS_N' : "#deebf7" ) .attr("id", (d, i) => d.properties.ART_N != "See" ? "map_" + d.properties.JOIN_C : "map_" + i ) .attr("class", "plz") .style("fill-opacity", 0.75) .style("stroke", stroke_color) .style("stroke-width", 0.5) .attr("d", pathPS) .style("cursor", "pointer") .attr("class", "gemeinden") .attr("pointer-events", (d, i) => d.properties.JOIN_C != "-99" ? "all" : "none" ) .on("mouseover", function (d) { let da = d3.select(this).data()[0]; let thisId = da.properties.JOIN_C; // console.log(thisId); let thisData = dataVSA.filter((el) => el.JOIN_C == thisId)[0]; let that = d3.select("#plz" + thisId); let bbox = this.getBBox(); let mouseGr = karte.append("g").attr("id", "mouseGr"); var mouseOverRW = 185, mouseOverRH = 40; //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 > widthNow / 2 + 40) { xPos = bbox.x + bbox.width / 2 - mouseOverRW; } if (yPos > 80) { yPos = bbox.y + bbox.height / 2 - mouseOverRH; } var mouseOverL = mouseGr .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 + ")"); karte .selectAll("path.plz") .style("stroke-width", 0.3) .style("fill-opacity", 1); d3.select(this).style("stroke", stroke_color).style("stroke-width", 1.5); var mouseRect = mouseOverT .append("rect") .attr("x", -5) .attr("y", 0) .attr("rx", "0.5rem") .attr("ry", "0.5rem") .attr("fill", "#fff") .attr("fill-opacity", 0.9) .attr("stroke", stroke_color) .attr("stroke-width", 1) .attr("width", mouseOverRW) .attr("height", mouseOverRH); mouseOverT .append("text") .attr("x", 2) .attr("y", 16) .text(function (d) { if (thisId == "A08") { return "Sportamt Stadt Zürich"; } else { return da.properties.GEBIET_N; } }) .style("font-family", "Helvetica Neue, sans-serif") .attr("font-size", "0.8rem") .attr("font-weight", "bold"); let mouseName = mouseOverT .append("text") .attr("x", 2) .attr("y", 16) .attr("dy", "1.2em") .text("Bezirk: " + da.properties.BFS_N) .style("font-family", "Helvetica Neue, sans-serif") .attr("font-size", "0.8rem"); mouseOverRW = d3.max([mouseOverRW, mouseName.node().getBBox().width + 8]); mouseRect.attr("width", mouseOverRW); }) .on("click", function (d, i) { karte .selectAll("path") .style("stroke-width", 0.5) .style("fill", (d) => colorBez(d.properties.BFS_N)) .style("fill-opacity", 0.75); d3.select(this).style("stroke", stroke_color).style("stroke-width", 2); selected = selectionPrimar; let clicked = d3.select(this).data()[0].properties.JOIN_C; let selectedPsOsData = dataVSA.filter(function (el) { return el.codeP == clicked; })[0]; selectedOberMap = { label: selectedPsOsData.nameO, value: selectedPsOsData.codeO }; selected = clicked; console.log(selectedOberMap); console.log(clicked); viewof selectionPrimar.value = selected; viewof selectionPrimar.dispatchEvent(new CustomEvent("input")); viewof selectionOber.value = undefined; viewof selectionOber.dispatchEvent(new CustomEvent("input")); let index = (d3.select("#selectPrimar").selectedIndex = 5); //get index of clicked in primarDomains }) .on("mouseout", function () { d3.select("#mouseGr").remove(); karte.selectAll("path").style("stroke-width", 0.5); d3.select(this).style("stroke", stroke_color); mouseOut(); }); karte .select("#map_" + selected) .style("fill", "#f33") .style("stroke", "white") .style("stroke-width", 2); return Object.assign(svg.node(), { value: { selected }, onclick: (event) => { event.currentTarget.value = { selected: selected }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }34:T93b,viewof tab = (function () { if ( typeof selectionTotal.ps === "undefined" && typeof selectionTotal.os === "undefined" ) { return html`

Kontaktinformationen

Bitte wählen Sie eine Schulgemeinde aus, um die Kontaktinformationen angezeigt zu bekommen.

`; } else { return html`

Kontaktinformationen

Sektor	${filteredData[0].NameP}	${filteredData[0].NameO}
Personal	${ filteredData[0].PersonalP.name + " " + filteredData[0].PersonalP.email + " " + filteredData[0].PersonalP.tel }	${ filteredData[0].PersonalO.name + " " + filteredData[0].PersonalO.email + " " + filteredData[0].PersonalO.tel }
Lohn	${ filteredData[0].LohnP.name + " " + filteredData[0].LohnP.email + " " + filteredData[0].LohnP.tel }	${ filteredData[0].LohnO.name + " " + filteredData[0].LohnO.email + " " + filteredData[0].LohnO.tel }
Beratung	${ filteredData[0].BeratungP.name + " " + filteredData[0].BeratungP.email + " " + filteredData[0].BeratungP.tel }	${ filteredData[0].BeratungO.name + " " + filteredData[0].BeratungO.email + " " + filteredData[0].BeratungO.tel }
Sonderpädagogik	${ filteredData[0].SonderpaedagogikP.name + " " + filteredData[0].SonderpaedagogikP.email + " " + filteredData[0].SonderpaedagogikP.tel }	${ filteredData[0].SonderpaedagogikO.name + " " + filteredData[0].SonderpaedagogikO.email + " " + filteredData[0].SonderpaedagogikO.tel }

`; } })()35:T42c,styles = html` `36:Tdca,filteredData = (function() { if (typeof selectionTotal.ps !== "undefined") { let dataSel = dataVSA.filter(el => el.codeP == selectionTotal.ps.value); let dataNew = []; for (let i = 0; i < dataSel.length; i = i + 3) { let obj = {}; obj.NameP = {}; obj.PersonalP = {}; obj.LohnP = {}; obj.BeratungP = {}; obj.SonderpaedagogikP = {}; obj.NameP = dataSel[i].nameP; obj.PersonalP.name = dataSel[i].personalP; obj.LohnP.name = dataSel[i].lohnP; obj.BeratungP.name = dataSel[i].beratungP; obj.SonderpaedagogikP.name = dataSel[i].sonderpaedP; obj.PersonalP.email = dataSel[i + 1].personalP; obj.LohnP.email = dataSel[i + 1].lohnP; obj.BeratungP.email = dataSel[i + 1].beratungP; obj.SonderpaedagogikP.email = dataSel[i + 1].sonderpaedP; obj.PersonalP.tel = dataSel[i + 2].personalP; obj.LohnP.tel = dataSel[i + 2].lohnP; obj.BeratungP.tel = dataSel[i + 2].beratungP; obj.SonderpaedagogikP.tel = dataSel[i + 2].sonderpaedP; obj.NameO = {}; obj.PersonalO = {}; obj.LohnO = {}; obj.BeratungO = {}; obj.SonderpaedagogikO = {}; obj.NameO = dataSel[i].nameO; obj.PersonalO.name = dataSel[i].personalO; obj.LohnO.name = dataSel[i].lohnO; obj.BeratungO.name = dataSel[i].beratungO; obj.SonderpaedagogikO.name = dataSel[i].sonderpaedO; obj.PersonalO.email = dataSel[i + 1].personalO; obj.LohnO.email = dataSel[i + 1].lohnO; obj.BeratungO.email = dataSel[i + 1].beratungO; obj.SonderpaedagogikO.email = dataSel[i + 1].sonderpaedO; obj.PersonalO.tel = dataSel[i + 2].personalO; obj.LohnO.tel = dataSel[i + 2].lohnO; obj.BeratungO.tel = dataSel[i + 2].beratungO; obj.SonderpaedagogikO.tel = dataSel[i + 2].sonderpaedO; dataNew.push(obj); } return dataNew; } else if (typeof selectionTotal.os !== "undefined") { let dataSel = dataVSA.filter(el => el.codeO == selectionTotal.os.value); let dataNew = []; for (let i = 0; i < dataSel.length; i = i + 3) { let obj = {}; obj.NameP = {}; obj.PersonalP = {}; obj.LohnP = {}; obj.BeratungP = {}; obj.SonderpaedagogikP = {}; obj.NameP = ""; obj.PersonalP.name = ""; obj.LohnP.name = ""; obj.BeratungP.name = ""; obj.SonderpaedagogikP.name = ""; obj.PersonalP.email = ""; obj.LohnP.email = ""; obj.BeratungP.email = ""; obj.SonderpaedagogikP.email = ""; obj.PersonalP.tel = ""; obj.LohnP.tel = ""; obj.BeratungP.tel = ""; obj.SonderpaedagogikP.tel = ""; obj.NameO = {}; obj.PersonalO = {}; obj.LohnO = {}; obj.BeratungO = {}; obj.SonderpaedagogikO = {}; obj.NameO = dataSel[i].nameO; obj.PersonalO.name = dataSel[i].personalO; obj.LohnO.name = dataSel[i].lohnO; obj.BeratungO.name = dataSel[i].beratungO; obj.SonderpaedagogikO.name = dataSel[i].sonderpaedO; obj.PersonalO.email = dataSel[i + 1].personalO; obj.LohnO.email = dataSel[i + 1].lohnO; obj.BeratungO.email = dataSel[i + 1].beratungO; obj.SonderpaedagogikO.email = dataSel[i + 1].sonderpaedO; obj.PersonalO.tel = dataSel[i + 2].personalO; obj.LohnO.tel = dataSel[i + 2].lohnO; obj.BeratungO.tel = dataSel[i + 2].beratungO; obj.SonderpaedagogikO.tel = dataSel[i + 2].sonderpaedO; dataNew.push(obj); } return distincts(dataNew, "personalO"); } })()37:[] 31:{"id":"5751ac5f885499ac","slug":"vsa-personalubersicht","title":"VSA - Personalübersicht","thumbnail":"f4d627f8d32818ecbd4a2e65a6ac60f1cf7aca54cafd9e6f527459445117969a","access_level":"public","create_time":"$D2021-01-11T07:20:02.620Z","update_time":"$D2023-01-31T13:42:20.745Z","view_time":null,"first_public_time":"$D2021-01-11T07:20:43.461Z","has_unpublished_edits":null,"fork":true,"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":2181,"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":"12cce3fc6cf83be7","slug":"zhweb-andere-themen","title":"ZHweb andere Themen","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"VSA - Personalübersicht","cells":[{"id":0,"value":"md`# VSA - Personalübersicht\n\n- For projekt deatils and data file see *Auftrag 'A2020_0188'*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"toc('h2, h3', 'Inhalt')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"viewof selectionPrimar = {\n const form = html``;\n const timeout = setTimeout(() => {\n form.primar.selectedIndex = 0;\n form.onchange();\n });\n\n form.onchange = () => {\n clearTimeout(timeout);\n form.value = form.primar.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n form.primar.selectedIndex = form.primar.options.length - 1;\n form.value = form.primar.value;\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2179,"value":"selectionPrimar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"viewof text1 = html`

oder

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"viewof selectionOber = {\n const form = html``;\n const timeout = setTimeout(() => {\n form.i.selectedIndex = 0;\n form.onchange();\n });\n form.onchange = () => {\n clearTimeout(timeout);\n form.value = form.i.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n var obj = {};\n obj.value = form.i.value;\n obj.label = form.i.label;\n\n viewof selectionPrimar.value = \"\";\n viewof selectionPrimar.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.i.selectedIndex = form.i.options.length - 1;\n form.value = form.i.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"viewof text2 = (function () {\n if (typeof selectionTotal.ps !== \"undefined\") {\n return html`

Gewählte Primarschule / Gesamtschule / Kreisschule: ${selectionTotal.ps.label} (${selectionTotal.ps.value})

`;\n } else if (typeof selectionTotal.os !== \"undefined\") {\n return html`

Gewählte Sekundarschule: ${selectionTotal.os.label} (${selectionTotal.os.value})

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

Bitte wählen Sie eine Schulgemeinde aus.

`;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2069,"value":"legendeTitel = html`

Bezirke:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"legende = swatches({ color: colorBez })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1913,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1609,"value":"md`## CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1919,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"margin = ({ top: 5, right: 15, bottom: 15, left: 15 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"padding = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"widthNow = d3.min([width, 768])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"heightMap = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"mapSize = [widthNow, heightMap]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"selectedPrimar = primarDomains\n .filter(el => el.value == mapVSA.selected)\n .map(d => d)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"selectedOber = oberDomains\n .filter(el => el.value == selectionOber)\n .map(d => d)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"selectionTotal = (function() {\n let obj = {};\n console.log(\"selectionTotal\");\n console.log(typeof selectedPrimar);\n if (typeof selectedPrimar !== \"undefined\") {\n obj.ps = selectedPrimar;\n obj.os = undefined;\n } else {\n obj.ps = undefined;\n obj.os = selectedOber;\n }\n return obj;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"highlightMap = (function () {\n const stroke_color = \"#4d4d4d\";\n\n if (typeof selectionTotal.ps !== \"undefined\") {\n d3.select(\"#map_\" + selectionTotal.ps.value)\n .style(\"fill\", stroke_color) //'#D40053')\n .style(\"stroke\", stroke_color)\n .style(\"stroke-width\", 2);\n } else if (typeof selectionTotal.os !== \"undefined\") {\n let selectedOberData = nestedDataOberstufe.get(selectionTotal.os.value);\n for (let i = 0; i < selectedOberData.length; i++) {\n console.log(d3.select(\"#map_\" + selectedOberData[i].codeP));\n d3.select(\"#map_\" + selectedOberData[i].codeP)\n .style(\"fill\", stroke_color) //'#D40053')\n .style(\"stroke\", stroke_color)\n .style(\"stroke-width\", 2);\n }\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Data\n\n### *Maps*\n\n1. Loading GeoJSON *PS_2020_Schulgemeinden_korr_geo.json*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"map2020 = d3.json(\n \"https://www.web.statistik.zh.ch/geodaten_visualisierungen/PS_Schulgemeinden_F_KTZH/PS_Schulgemeinden_F_KTZH_2023_01_01.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`### *Map projection*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"projectionPS = d3 // When a GeoJSON is encoded in WGS84 planar coordinates, and you need to project it with D3\n .geoMercator()\n .fitExtent([[10, 10], [widthNow, heightMap].map((d) => d - 10)], map2020)\n\n// d3\n// .geoIdentity()\n// .reflectY(true)\n// .fitExtent([[padding, padding], mapSize.map(d => d - padding)], map2020)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"pathPS = d3.geoPath(projectionPS)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`### *VSA data* (Update 8.1.2021)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"data_URL = \"https://raw.githubusercontent.com/statistikZH/Visualisierung_VSAKarte/main/Data/VSA_Kantonskarte.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"dataVSA = d3.csv(data_URL, { typed: true }, function (d) {\n return {\n codeP: d.Code_P,\n codeO: d.Code_O,\n feldP: d.Feld_P,\n nameP: d.Name_P,\n gemeindeP: d.Name_P.split(\" / \").pop(), // Gemeindename ohne Prefix wie PSP\n personalP: d.Personal_P,\n lohnP: d.Lohn_P,\n beratungP: d.Beratung_P,\n sonderpaedP: d.Sonderpädagogik_P,\n nameO: d.Name_O,\n gemeindeO: d.Name_O.split(\" / \").pop(), // Gemeindename ohne Prefix wie PSP\n personalO: d.Personal_O,\n lohnO: d.Lohn_O,\n beratungO: d.Beratung_O,\n sonderpaedO: d.Sonderpädagogik_O\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"primarDomains = distincts(\n [\n ...Array.from(\n new Set(\n dataVSA\n .sort((a, b) => d3.ascending(a.gemeindeP, b.gemeindeP))\n .map(function (d) {\n let obj = {};\n obj.label = d.gemeindeP;\n obj.value = d.codeP;\n return obj;\n })\n )\n )\n ],\n \"label\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"oberDomains = distincts(\n [\n ...Array.from(\n new Set(\n dataVSA\n .sort((a, b) => d3.ascending(a.gemeindeO, b.gemeindeO))\n .map(function (d) {\n let obj = {};\n obj.label = d.gemeindeO;\n obj.value = d.codeO;\n return obj;\n })\n )\n )\n ],\n \"label\"\n).filter((d) => d.label != \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`### *Nested Data* `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"nestedData = d3.group(dataVSA, d => d.codeO)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"nestedDataOberstufe = d3.group(dataVSA, d => d.codeO)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"statColors = [\n \"#8dd3c7\",\n \"#ffffb3\",\n \"#bebada\",\n \"#fb8072\",\n \"#80b1d3\",\n \"#fdb462\",\n \"#b3de69\",\n \"#fccde5\",\n \"#4292c6\",\n \"#bc80bd\",\n \"#ccebc5\",\n \"#ffed6f\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"colorBez = d3\n .scaleOrdinal()\n .domain([\n \"Affoltern\",\n \"Andelfingen\",\n \"Bülach\",\n \"Dielsdorf\",\n \"Dietikon\",\n \"Hinwil\",\n \"Horgen\",\n \"Meilen\",\n \"Pfäffikon\",\n \"Uster\",\n \"Winterthur\",\n \"Zürich\"\n ])\n .range(statColors)\n .unknown(\"#d9d9d9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"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', 2)\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":1086,"value":"function distincts(array, element) {\n var flags = [],\n output = [],\n l = array.length,\n i;\n\n for (i = 0; i < l; i++) {\n if (flags[array[i][element]]) continue;\n flags[array[i][element]] = true;\n output.push(array[i]);\n }\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Libraries & Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"class View {\n constructor(value) {\n Object.defineProperties(this, {\n _list: { value: [], writable: true },\n _value: { value, writable: true }\n });\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent(new CustomEvent(\"input\", { detail: value }));\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n bind(input, invalidation) {\n return bind(input, this, invalidation);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"function bind(input, view, invalidation = Inputs.disposal(input)) {\n set(input, view.value);\n input[`on${eventof(input)}`] = () => (view.value = get(input));\n const update = ({ detail: value }) =>\n get(input) === value || set(input, value);\n view.addEventListener(\"input\", update);\n invalidation.then(() => view.removeEventListener(\"input\", update));\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"function get(input) {\n switch (input.type) {\n case \"range\":\n case \"number\":\n return input.valueAsNumber;\n case \"date\":\n return input.valueAsDate;\n case \"checkbox\":\n return input.checked;\n case \"file\":\n return input.multiple ? input.files : input.files[0];\n default:\n return input.value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"function set(input, value) {\n switch (input.type) {\n case \"range\":\n case \"number\": input.valueAsNumber = value; break;\n case \"date\": input.valueAsDate = value; break;\n case \"checkbox\": input.checked = value; break;\n case \"file\": input.multiple ? (input.files = value) : (input.files = [value]); break;\n default: input.value = value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"function eventof(input) {\n switch (input.type) {\n case \"button\":\n case \"submit\": return \"click\";\n case \"file\": return \"change\";\n default: return \"input\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\", 'd3-request', 'd3-fetch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"import { toc } from \"@tomshanley/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2035,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"import { swatches as Swatches } from \"@bayre/svg-swatches\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1855,"value":"import {\n tidy,\n select,\n summarize,\n groupBy,\n sum,\n rate,\n pivotWider,\n pivotLonger,\n mutate,\n mutateWithSummary,\n arrange,\n TMath,\n cumsum,\n mean,\n roll,\n desc,\n asc,\n filter,\n distinct\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## References\n\n- https://observablehq.com/@statistikzh/erganzungsleistungen-mietzinsregionen-per-2021?collection=@statistikzh/zhweb-andere-themen\n- [Render geometries from topojson using D3.js](https://observablehq.com/@davidsingal/highlight-geometry-from-topojson)\n- [Highlight selected region](http://bl.ocks.org/vsapsai/9034950)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"// legend2 = Swatches({\n// colour: colorBez,\n// swatchRadius: 6,\n// labelFont: \"Helvetica Neue 0.25rem sans-serif\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"