2d:null 2e:["$","title",null,{"children":"Select | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:[] 31:{"id":"9680de5133c133dc","slug":"leu-select","title":"Select","thumbnail":"1031021b707d29fe28e3ae7ff33b4435d715763cb71b52c66e24d51a71815bf4","access_level":"public","create_time":"$D2024-07-09T08:52:08.800Z","update_time":"$D2025-07-03T06:55:20.778Z","view_time":null,"first_public_time":"$D2024-07-17T11:57:07.483Z","has_unpublished_edits":null,"fork":false,"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":164,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null}],"members":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b4b9279e515ea00f","slug":"leu-component-library","title":"Leu - Component Library","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Select","cells":[{"id":0,"value":"# Select\n\n- [Storybook](https://statistikzh.github.io/leu/?path=/story/select--regular)\n- [GitHub](https://github.com/statistikZH/leu/tree/main/src/components/select)\n\nThe following elements are needed to build a dropdown:\n- `leu-select`\n- `leu-menu-item`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Load custom elements\n\n`leu-menu-item` is defined as a dependency of `leu-select`. There is no need to load `leu-menu-item` separately.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"leu = Promise.allSettled([\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-select.js`)\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Usage\n\nThe basic structure of a leu-select element should like the following markup:\n```html\n\n Zürich\n Winterthur\n Uster\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"$${viewof select}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"viewof select = {\n leu;\n return htl.html`\n Zürich\n Winterthur\n Uster\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"select","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## Using dynamic data as options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"Fetch a OGD dataset:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"data = await d3.csv(\n \"https://www.web.statistik.zh.ch/ogd/data/KANTON_ZUERICH_373.csv\",\n (d) => ({\n ...d,\n GEBIET_NAME: d.GEBIET_NAME === \"Zürich\" ? \"Stadt Zürich\" : d.GEBIET_NAME,\n BFS_NR: Number.parseInt(d.BFS_NR, 10)\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"and retrieve a distinct list of municipalities from it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"municipalities = Array.from(\n new Set(data.filter((d) => d.BFS_NR > 0).map((d) => d.GEBIET_NAME))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$${viewof selectMun}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"viewof selectMun = {\n leu;\n return htl.html`\n ${municipalities.map(\n (m) => htl.html.fragment`${m}`\n )}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"selectMun","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"---\n## Loading fonts and theme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"fonts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"theme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { fonts, theme, version } from \"@statistikzh/leu-general\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"