2b:null 2c:["$","title",null,{"children":"Primar- und Sekundarschulgemeinden nach Trägerschaft | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T410,viewof regionList = { const regionContent = (region, index) => { return lit.html` ${htmlRegionSymbol(region.code)}${region.gebiet_name} `; }; const shadowChips = new Array(maxSelectedRegions).fill(null); return render( ChipList({ content: [...selectedRegionIds].map((id, index) => { if (id === null) return ShadowChip(); const region = data.find((d) => d.code === id); const args = { content: regionContent(region, index), onpointerenter: () => setValue(region.code, viewof highlightedRegionId), onpointerleave: () => setValue(null, viewof highlightedRegionId) }; if (region.name === region.gebiet_name) { return TogglableChip({ ...args, oninput: () => toggleReferenceLine(), checked: showReferenceData }); } return RemovableChip({ ...args, ondelete: () => removeRegion(region) }); }) }), this ); }32:Tc1a,33:[{"id":"8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","href":"https://static.observableusercontent.com/files/8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","name":"close@2.svg","type":"image/svg+xml","lastModified":1699632246550.627,"size":367},{"id":"65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","href":"https://static.observableusercontent.com/files/65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","name":"close.svg","type":"image/svg+xml","lastModified":1699632246550.627,"size":305}] 2f:{"id":"e7eda8b7a89086a1","slug":null,"title":"Primar- und Sekundarschulgemeinden nach Trägerschaft","thumbnail":"4b578c8fc4250ad683e08aade3c1b5e89547f076dfe48b765b647f3296081edd","access_level":"public","create_time":"$D2023-11-10T16:04:06.550Z","update_time":"$D2026-01-16T14:09:17.966Z","view_time":null,"first_public_time":"$D2024-01-25T16:04:09.509Z","has_unpublished_edits":null,"fork":{"id":"aa480aa1180a886c","slug":null,"title":"Sekundarschulträger","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":3514,"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":0,"collection":{"id":"43e6e48355982031","slug":"gaz-schultrager","title":"GAZ - Schulträger","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Primar- und Sekundarschulgemeinden nach Trägerschaft","cells":[{"id":0,"value":"# Primar- und Sekundarschulgemeinden nach Trägerschaft\n\nDie folgende Schulträgerkarte zeigt, wo überall noch Schulgemeinden die Aufgaben der Volksschule wahrnehmen – und wo bereits politische Gemeinden dafür zuständig sind. Mehr unter [Gemeindefusion | Kanton Zürich (zh.ch)](https://www.zh.ch/de/politik-staat/gemeinden/gemeindefusion.html).\n\nDie Karte unterscheidet die Primar- resp. Sekundarschulgemeinden nach Trägerschaft der Aufgaben. Dies können Politische Gemeinden, Primar- resp. Sekundarschulgemeinden oder Schulgemeinden sein. Schulgemeinden, sind Gemeinden, in welchen Primar- und Sekundarschulaufgaben gemeinsam wahrgenommen werden - auch genannt Volksschulgemeinde.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"wrapper = {\n let sync = radios == \"Primarschulträger\" ? syncPS : syncOS;\n let map = radios == \"Primarschulträger\" ? viewof psHTML : viewof osHTML;\n\n sync;\n\n return render(\n lit.html`\n

\n${viewof radios}\n

\n${map}`,\n this\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"---\n## Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3406,"value":"viewof radios = Inputs.radio([\"Primarschulträger\", \"Sekundarschulträger\"], {\n label: \"Karte wechseln\",\n value: \"Primarschulträger\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3104,"value":"legendLabel = [\n ...new Set(\n legendLabelOS\n .filter((d) => d.legendLabel != \"Anschlussvertrag (2)\")\n .map((d) => d.legendLabel)\n )\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2383,"value":"viewof mapLegend = swatches(d3.scaleOrdinal(legendLabel, zhScheme), {\n swatchSize: 15\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"### Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3396,"value":"import { viewof psHTML, sync as syncPS } with { elIds as elIds } from \"2e3ef5aa254cfaf6\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3485,"value":"import { viewof osHTML, sync as syncOS } with { elIds as elIds } from \"aa480aa1180a886c\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":" // viewof mapView = radios === \"Primarschulträger\" ? mapViewPS : mapViewOS","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"### Map Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1029,"value":"### Chips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1797,"value":"### Search Dropdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2439,"value":"### Data Table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3217,"value":"gebietTyp = referenceData.label","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2930,"value":"### HTML Region Symbol","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2932,"value":"htmlRegionSymbol = (id) =>\n lit.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2252,"value":"---\n## Updates / Synchronisation\nTo optimize performance the map and the line chart won't be rerendered after a dependency state change happened. To update each representation a `update` method is called.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3437,"value":"// art_c = radios == \"Primarschulträger\" ? 17 : 11","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3448,"value":"// map = radios == \"Primarschuleträger\" ? mapViewPS : mapViewOS","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"// sync = {\n// viewof mapView.update({\n// isSelected: (d) =>\n// selectedRegionIds.includes(d.GEBIET_C) && d.ART_C === art_c,\n// isHighlighted: (d) =>\n// highlightedRegionId === d.GEBIET_C && d.ART_C === art_c,\n// getSymbol: () => d3.symbol().type(d3.symbolCircle),\n// getSymbolColor: () => \"#D40053\"\n// });\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"---\n## Filter Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":714,"value":"RemovableChip = ({ onpointerenter, onpointerleave, content }) => {\n return lit.html`\n

\n ${content}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"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":2894,"value":"ShadowChip = () => lit.html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"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":2888,"value":"ResetButton = () => lit.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"---\n## State\n\nAll state that is used or set by multiple components should be stored in a dedicated `Inputs.input`.\nWith this approach we try to have a unidirectional data flow most of the times.\n\nA value of a state can be changed with the `setValue()` utility function.\n\n*Derived state* is just a state object/list that has been transformed. But it does not contain any state itself. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3300,"value":"// Adliswil als default Auswahl\ndefaultGebiet = \"D012\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"viewof selectedRegionIds = Inputs.input([defaultGebiet])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"viewof highlightedRegionId = Inputs.input(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"// viewof highlightedYear = Inputs.input(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1872,"value":"// viewof selectedYear = Inputs.input(defaultYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"viewof mapTooltipState = Inputs.input({\n positionX: 0,\n positionY: 0,\n visible: false,\n regionId: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1946,"value":"viewof showReferenceData = Inputs.input(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"### Derived State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"selectedRegions = data.filter((d) => selectedRegionIds.includes(d.code))\n\n// selectedRegionIds.length === 0\n// ? data.filter((d) => d.code == defaultGebiet)\n// : data.filter((d) => selectedRegionIds.includes(d.code))\n\n// [referenceData].concat(\n// data.filter((d) => selectedRegionIds.includes(d.code))\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2668,"value":"// maxValueOfYear = d3.max(data.map((r) => r.valuesByYear[selectedYear]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2485,"value":"removeRegion = (region) => {\n const nextValue = viewof selectedRegionIds.value.filter(\n (d) => d !== region.code\n );\n\n setValue(nextValue, viewof selectedRegionIds);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"toggleRegion = (code) => {\n let nextValue;\n if (selectedRegionIds.includes(code)) {\n nextValue = nextValue.shift(); //selectedRegionIds.filter((r) => r !== code);\n } else {\n nextValue = [...selectedRegionIds];\n\n if (nextValue.length === maxSelectedRegions) {\n nextValue.shift();\n }\n\n nextValue.push(code);\n }\n\n setValue(nextValue, viewof selectedRegionIds);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2488,"value":"toggleReferenceLine = () => {\n setValue(!showReferenceData, viewof showReferenceData);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"getRegionColor = (id) => {\n return colors[selectedRegions.findIndex((region) => region.code === id)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"getRegionSymbol = (id) => {\n return symbols?.[selectedRegions.findIndex((r) => r.code === id)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"setValue = (value, input) => {\n if (input.value !== value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"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":1565,"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":1660,"value":"getPointerPosition = (e, element) => {\n // If it is a TouchEvent just get the position of the first touch\n const { clientX, clientY } = e.touches ? e.touches[0] : e;\n const rect = element.getBoundingClientRect();\n const x = clientX - rect.left;\n const y = clientY - rect.top;\n\n return [x, y];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"### Locale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1604,"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":1606,"value":"percentageFormat = (v) => lit.html`${localeDeCH.format(\".2f\")(v)} %`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"---\n## Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"maxSelectedRegions = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"symbols = [d3.symbolCircle, d3.symbolSquare, d3.symbolTriangle]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"// defaultYear = d3.max(years).getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2072,"value":"tooltipMaxWidth = 220","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2781,"value":"mapWidth = width >= breakpoints[1]\n ? Math.max(Math.min(width * 0.5, 480), 320)\n : width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"---\n## Styling / Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"colors = [\"#0070B4\", \"#D40053\", \"#00544C\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"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":1842,"value":"htl.html`\n

${key}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3110,"value":"zhScheme = [\n \"#949494\", // Politische Gemeinde\n \"#00797B\", // Sekundarschulgemeinden\n \"#DC7700\", // Zweckverband\n \"#9572D5\" // Volksschulgemeinde\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"colorScale = {\n const gemeindeTyp = [\n \"Politische Gemeinde\",\n \"Sekundarschulgemeinde\",\n \"Zweckverband\",\n \"Volksschulgemeinde\"\n ];\n //return d3.scaleOrdinal(categories, zhScheme);\n return d3.scaleOrdinal(gemeindeTyp, zhScheme).unknown(\"#009EE0\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"The following color scheme uses the lightest blue color and the darkest purple color of the ZH design system. It is used for the visualisation by the `colorScale`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2558,"value":"blPuScheme = d3.quantize(d3.interpolate(\"#7AB6E2\", \"#54268E\"), 8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2770,"value":"The following color scheme is \"handpicked\" from the ZH design system","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1398,"value":"zhBlueScheme = [\n \"#7AB6E2\",\n \"#45AADF\",\n \"#1FA1DC\",\n \"#009EE0\",\n \"#028ACC\",\n \"#027EC1\",\n \"#0070B4\",\n \"#0262A4\",\n \"#025594\",\n \"#00407C\"\n].filter((c, i) => i !== 2 && i !== 3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"### CSS class generation\n\nThis `makeCl` utility creates a helper function that generates unique ids for CSS classes. It will probably make sense to make this publicly available, as it solves a very generic issue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1834,"value":"makeCl = (prefix) => {\n const registry = {};\n\n const cl = (name) => {\n const identifier = `zhstat-${prefix}-${name}`;\n if (typeof registry[identifier] === \"undefined\") {\n registry[identifier] = DOM.uid(identifier);\n }\n\n return registry[identifier].id;\n };\n\n return cl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"elIds = ({\n inputWrapper: DOM.uid(\"zhstat-input-wrapper\"),\n mapContainer: DOM.uid(\"zhstat-map-container\"),\n tooltip: DOM.uid(\"zhstat-tooltip\"),\n tooltipDatapointList: DOM.uid(\"zhstat-datapoint-list\"),\n tooltipDatapoint: DOM.uid(\"zhstat-datapoint\"),\n tooltipDatapointSymbol: DOM.uid(\"zhstat-datapoint-symbol\"),\n tooltipDatapointLabel: DOM.uid(\"zhstat-datapoint-label\"),\n tooltipDatapointValue: DOM.uid(\"zhstat-datapoint-value\"),\n chartWrapper: DOM.uid(\"zhstate-chart-wrapper\"),\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":19,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":616,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"css","database":"$undefined"},{"id":365,"value":"referenceData = data.find((d) => d.code === selectedRegionIds[0])\n\n// selectedRegionIds.length === 0\n// ? data.find((d) => d.code === defaultGebiet)\n// : data.find((d) => d.code === selectedRegionIds[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"---\n## Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":843,"value":"// import { createMap } with { mapWidth as width } from \"12fc8c29f3fb63eb\"\nimport { createMap } with { mapWidth as width } from \"77c3063040871d12\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"import { createLegend } with { width as width } from \"f0b02f1582e35d36\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"import { createTooltip } with {\n elIds as elIds,\n width as width\n} from \"7ec9f277c82fd4b4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1794,"value":"import { createSearchField } from \"7a6c781ec0b2f013\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1862,"value":"// import {createTimelineSlider} from \"d2738f80f6eaa67c\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"import { createDataTable } from \"4a5e3e8faeb7b157\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3094,"value":"import { dataOS as data, legendLabelOS, gemeindenOS } from \"06f16eabd96b28b2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3087,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3090,"value":"import { desc, asc, filter, distinct } from \"@pbeshai/tidyjs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3508,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"lit = import(`https://esm.run/lit-html@3`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"---\n## Appendix\n\nSource Icons: https://icons.mono.company/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"