2b:null 2c:["$","title",null,{"children":"Primarschulträger | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T463,wrapper = { sync; return render( 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

`, this ); }32:T54c,viewof mapView = { const node = createMap({ colorScale, isHighlighted: (d) => highlightedRegionId === d.GEBIET_C && d.ART_C === 11, getData: (d) => { return data.find((r) => r.code === d.GEBIET_C).typ; }, onClick: (d) => { if (d.ART_C !== 11) return; /* Region toggling */ toggleRegion(d.GEBIET_C); }, onPointerEnter: (e, d) => { if (d.ART_C === 11) { 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; }33: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 ); }34:T430,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: () => setValue(region.code, viewof highlightedRegionId) }); }) }), this ); }35:T63d,viewof dataTable = createDataTable({ columnNames: ["Gemeinde", "Trägertyp", selectedRegions[0].label], // columnNames: ["Gemeinde", selectedYear, ""], rows: selectedRegions .slice() // .sort((a, b) => b.valuesByYear[selectedYear] - a.valuesByYear[selectedYear]) .map((r, index) => { const regionName = lit.html` ${htmlRegionSymbol(r.code)}${r.gebiet_name} `; // const value = // typeof r.valuesByYear[selectedYear] !== "undefined" // ? percentageFormat(r.valuesByYear[selectedYear]) // : "Keine Daten"; // const value = d3 // .map( // data.filter((d) => d.code == highlightedRegionId)[0].gdeInfo, // (d) => d.schulgebiet // ) // .join(", \n\r"); const value = referenceData.gdeInfo[0].schulgebiet; const typ = referenceData.typ; const row = { cells: [regionName, typ, value], //[regionName, value], // onpointerenter: () => setValue(r.code, viewof highlightedRegionId), onpointerleave: () => setValue(null, viewof highlightedRegionId) }; row.type = "TOGGLE"; // if (r.name === referenceData.gdeInfo[0].schulgebiet) { // row.type = "TOGGLE"; // /* The toggle type row is just a "normal" row without any action for now */ // /*row.checked = showReferenceData; // row.oninput = toggleReferenceLine;*/ // } else { // row.type = "DELETE"; // row.ondelete = () => { // removeRegion(r); // }; // } return row; }) })36:Tc1a,37:[{"id":"8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","href":"https://static.observableusercontent.com/files/8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","name":"close@2.svg","type":"image/svg+xml","lastModified":1699628576880.221,"size":367},{"id":"65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","href":"https://static.observableusercontent.com/files/65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","name":"close.svg","type":"image/svg+xml","lastModified":1699628576880.221,"size":305}] 2f:{"id":"2e3ef5aa254cfaf6","slug":null,"title":"Primarschulträger","thumbnail":"cbde337135d8784d90c02f9d1538a6b1bb30d39d03e6249922e444dfb5ad4ca1","access_level":"public","create_time":"$D2023-11-10T15:02:56.880Z","update_time":"$D2026-01-16T14:34:20.628Z","view_time":null,"first_public_time":"$D2024-01-25T16:06:32.718Z","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":3456,"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":"Primarschulträger","cells":[{"id":0,"value":"# Primarschulträ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":3386,"value":"viewof psHTML = lit.html`\n \n \n

\n \n ${viewof searchDropdown}\n ${viewof regionList}\n\n

\n Trägertyp (effektiv)${viewof mapLegend}\n

\n ${viewof mapTooltip}\n ${viewof mapView}\n

\n \n

\n ${viewof dataTable}\n

Auf Karte klicken, um eine Gemeinde auszuwählen

\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":1034,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3104,"value":"legendLabel = [\n ...new Set(\n legendLabelPS\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: 20\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":"$32","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":"$33","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":"$34","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":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\" &&\n d.gdeInfo[0].schulgebiet.includes(\",\") &&\n d.gebiet_name !== \"Turbenthal\" &&\n d.gebiet_name !== \"Wila\"\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":3394,"value":"viewof searchDropdown2 = createSearchField({\n label: \"Politische Gemeinde suchen\",\n list: primarGemeinden\n .filter((d) => d.code !== 0)\n .map((d) => ({\n id: d.code,\n label: d.gemeinde_name,\n selected: selectedRegionName.includes(d.gemeinde_name)\n }))\n // onSelect: toggleRegion\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3406,"value":"defaultGebietNew = [{ value: \"K302\", key: \"Flaach\" }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3404,"value":"viewof selectedRegionName = Inputs.input([defaultGebietNew.value])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3413,"value":"selectedGemeindeId = data.filter((d) => selectedRegionIds.includes(d.code))[0]\n .code","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3397,"value":"{\n sync;\n\n return render(\n lit.html`\n

\n \n

\n \n ${viewof searchDropdown2}`\n );\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":3282,"value":"data\n .filter((d) => d.code === selectedRegionIds[0])\n .map((d) => ({\n id: d.code,\n gemeinde: d.name,\n gebiet: d.gdeInfo[0].schulgebiet,\n label: d.label\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2409,"value":"$35","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":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":2258,"value":"sync = {\n viewof mapView.update({\n isSelected: (d) => selectedRegionIds.includes(d.GEBIET_C) && d.ART_C === 11,\n isHighlighted: (d) => highlightedRegionId === d.GEBIET_C && d.ART_C === 11,\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 = ({\n ondelete,\n onpointerenter,\n onpointerleave,\n content\n // ariaLabel = \"Entfernen\"\n}) => {\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// [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(defaultGebiet, 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\", // PS: Politische Gemeinde\n \"#0FA693\", // U: Primarschulgemeinden\n \"#9572D5\" // S: 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 \"Primarschulgemeinde\",\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":3117,"value":"referenceData.gdeInfo[0].schulgebiet","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3333,"value":"selectedRegionIds[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"referenceData = 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 \"4a92876822b66fae\"","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":2406,"value":"import { createDataTable } from \"4a5e3e8faeb7b157\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3094,"value":"import {\n dataPS as data,\n legendLabelPS,\n gemeindenPS,\n primarGemeinden\n} 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":3439,"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"