2b:null 2c:["$","title",null,{"children":"Sekundarschulträger | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T654,wrapper = { sync; return render( lit.html`

${viewof searchDropdown} ${viewof regionList}

Trägertyp (effektiv)${viewof mapLegend}

Hat eine Gemeinde einen Anschlussvertrag für die Erfüllung der Sekundarschulaufgaben für alle ihre Schülerinnen und Schüler mit einer benachbarten Sitzgemeinde abgeschlossen, wird die Farbe verwendet.

${viewof mapTooltip} ${viewof mapView}

${viewof dataTable}

Auf Karte klicken, um eine Gemeinde auszuwählen

`, this ); }32:T5ef,viewof osHTML = lit.html`

${viewof searchDropdown} ${viewof regionList}

Trägertyp (effektiv) ${viewof mapLegend}

${viewof mapTooltip} ${viewof mapView}

${viewof dataTable}

Auf Karte klicken, um eine Gemeinde auszuwählen

`33:T54c,viewof mapView = { const node = createMap({ colorScale, isHighlighted: (d) => highlightedRegionId === d.GEBIET_C && d.ART_C === 17, getData: (d) => { return data.find((r) => r.code === d.GEBIET_C).typ; }, onClick: (d) => { if (d.ART_C !== 17) return; /* Region toggling */ toggleRegion(d.GEBIET_C); }, onPointerEnter: (e, d) => { if (d.ART_C === 17) { setValue(d.GEBIET_C, viewof highlightedRegionId); const position = getPointerPosition(e, e.target.ownerSVGElement); setValue( { x: position[0], y: position[1], visible: true, regionId: d.GEBIET_C }, viewof mapTooltipState ); } }, onPointerLeave: (e, d) => { setValue(null, viewof highlightedRegionId); setValue( { ...viewof mapTooltipState.value, visible: false }, viewof mapTooltipState ); }, onPointerMove: (e, d) => { const position = getPointerPosition(e, e.target.ownerSVGElement); setValue( { ...viewof mapTooltipState.value, x: position[0], y: position[1], regionId: d.GEBIET_C, visible: true }, viewof mapTooltipState ); } }); return node; }34:T4da,viewof mapTooltip = { const { x, y, visible, regionId } = mapTooltipState; const gemeindeDataPoints = data .filter((r) => r.code === regionId) .map((r) => ({ label: r.gebiet_name, value: null // später ggf. Vertragstyp AN oder ZV })); const regionDataPoints = data .filter((r) => r.code === regionId) .map((r) => ({ label: "Typ:", value: r.typ })); const xPosition = width / 2 > x ? `${x + 16}px` : `calc(-100% + ${x - 16}px)`; const yPosition = `calc(-100% + ${y}px)`; return createTooltip( { x: xPosition, y: yPosition, visible, dataPoints: [ ...gemeindeDataPoints, ...regionDataPoints // { // label: d3.map( // data.filter((d) => d.code == highlightedRegionId), // (d) => d.label // ), // value: // highlightedRegionId == null // ? "" // : d3 // .map( // data.filter((d) => d.code == highlightedRegionId)[0] // .gdeInfo, // (d) => d.schulgebiet // ) // .join(", \n\r") // } ] }, this ); }35: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 ); }36:Tc1a,37:[{"id":"8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","href":"https://static.observableusercontent.com/files/8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","name":"close@2.svg","type":"image/svg+xml","lastModified":1699607067150.83,"size":367},{"id":"65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","href":"https://static.observableusercontent.com/files/65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","name":"close.svg","type":"image/svg+xml","lastModified":1699607067150.83,"size":305}] 2f:{"id":"aa480aa1180a886c","slug":null,"title":"Sekundarschulträger","thumbnail":"847edb03ca220b5cbf7724feb7dc5fe95cfb9c57e7e1944556c40d007cac1282","access_level":"public","create_time":"$D2023-11-10T09:04:27.150Z","update_time":"$D2026-01-16T14:28:17.475Z","view_time":null,"first_public_time":"$D2024-01-25T16:06:38.594Z","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":3439,"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":2,"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":"Sekundarschulträger","cells":[{"id":0,"value":"# Sekundarschulträger","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"$31","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":3392,"value":"$32","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 (4)\")\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":848,"value":"$33","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":1089,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"### Chips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"$35","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":3426,"value":"data[0].gdeInfo[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1800,"value":"viewof searchDropdown = createSearchField({\n label: \"Gemeinde suchen\",\n list: data\n .filter((d) => d.code !== 0)\n .map((d) => ({\n label:\n d.anschlussvertrag === \"NA\" && d.gdeInfo[0].schulgebiet.includes(\",\")\n ? `${d.gebiet_name} (${d.gdeInfo[0].schulgebiet})`\n : d.gebiet_name,\n id: d.code,\n selected: selectedRegionIds.includes(d.code)\n })),\n onSelect: toggleRegion\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":2409,"value":"viewof dataTable = createDataTable({\n columnNames: [\"Gemeinde\", \"Trägertyp\", selectedRegions[0].label],\n // columnNames: [\"Gemeinde\", selectedYear, \"\"],\n rows: selectedRegions\n .slice()\n // .sort((a, b) => b.valuesByYear[selectedYear] - a.valuesByYear[selectedYear])\n .map((r, index) => {\n const regionName = lit.html`\n ${htmlRegionSymbol(r.code)}${r.gebiet_name}\n `;\n\n const value = referenceData.gdeInfo[0].schulgebiet;\n const typ = referenceData.typ;\n\n const row = {\n cells: [regionName, typ, value], //[regionName, value],\n // onpointerenter: () => setValue(r.code, viewof highlightedRegionId),\n onpointerleave: () => setValue(null, viewof highlightedRegionId)\n };\n\n row.type = \"TOGGLE\";\n\n return row;\n })\n})","pinned":false,"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":false,"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":2258,"value":"sync = {\n viewof mapView.update({\n isSelected: (d) => selectedRegionIds.includes(d.GEBIET_C) && d.ART_C === 17,\n isHighlighted: (d) => highlightedRegionId === d.GEBIET_C && d.ART_C === 17,\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":"$36","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":3411,"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":false,"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":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"