2b:null 2c:["$","title",null,{"children":"Chart Wrapper | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:[] 2f:{"id":"208acee28f332e0c","slug":null,"title":"Chart Wrapper","thumbnail":"5a6d5e23974261bf798494f12c2fa2d4564a2644f910d8fd712f83f509061249","access_level":"public","create_time":"$D2025-07-03T06:51:09.707Z","update_time":"$D2025-07-03T12:32:06.869Z","view_time":null,"first_public_time":"$D2025-07-03T12:19:34.820Z","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":82,"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":1,"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":"Chart Wrapper","cells":[{"id":0,"value":"# Chart Wrapper\n\n- [Storybook](https://statistikzh.github.io/leu/?path=/story/components-chartwrapper--regular)\n- [GitHub](https://github.com/statistikZH/leu/tree/main/src/components/chart-wrapper)\n\nThe following elements are used in this notebook.\n- `leu-chart-wrapper`\n- `leu-dropdown` (optional)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"## Load custom elements","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-chart-wrapper.js`),\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-dropdown.js`)\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## Usage\n\n```html\n\n

\n \n

\n \n \n …\n \n …\n \n\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"{\n leu;\n return htl.html`\n \n

Entwicklung der Leerwohnungsziffer seit 1984

\n Leerwohnungsziffer, in Prozent\n

\n ${chart}\n

\n Quelle: Statistisches Amt des Kantons Zürich\n \n \n \n \n OGD Ressource\n \n Als CSV Tabelle\n Als XLS Tabelle\n

\n \n Als PNG exportieren\n \n \n Als SVG exportieren\n \n \n Als PDF exportieren\n \n \n \n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"## Example chart\n\nThis chart is just for demonstration purposes. The content of the `chart` slot can be anything.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"chart = Plot.plot({\n width,\n x: { round: true, tickFormat: \"d\", interval: 1, label: \"Jahr\" },\n y: { label: null },\n marks: [\n Plot.barY(data, {\n x: \"INDIKATOR_JAHR\",\n y: \"INDIKATOR_VALUE\",\n fill: \"#377db5\"\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"data = (\n await d3.csv(\n \"https://www.web.statistik.zh.ch/ogd/data/KANTON_ZUERICH_373.csv\",\n (d) => ({\n ...d,\n INDIKATOR_VALUE: +d.INDIKATOR_VALUE,\n INDIKATOR_JAHR: +d.INDIKATOR_JAHR,\n date: new Date(+d.INDIKATOR_JAHR, 0, 1)\n })\n )\n).filter((d) => d.GEBIET_NAME === \"Zürich - ganzer Kanton\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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":15,"value":"theme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"import { fonts, theme, version } from \"@statistikzh/leu-general\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"