2b:null 2c:["$","title",null,{"children":"Energieverbrauch der kantonalen Ladestationen für Elektrofahrzeuge | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T414,wrapper = { leuElements; leuTheme; return render( lit.html`

${CONFIG.metadata.title}

${CONFIG.metadata.subtitle}

⚠ Die Daten des aktuellsten Jahres sind provisorisch und werden fortlaufend aktualisiert. Definitive Werte liegen ab Q1 des Folgejahres vor.

${viewof lineChartTooltip} ${viewof lineChart}

${CONFIG.metadata.remark}

Datenquelle: ${CONFIG.metadata.source}

${viewof leuDropdown}

`, this ); }32:T53b,viewof lineChartTooltip = { const dimensions = lineChartDimensions; const visible = highlightedYear !== null; const year = visible ? highlightedYear.getFullYear() : defaultYear; const x = xScale(highlightedYear) + dimensions.margin.left; /* Not all of the selected regions have data for this specific year */ const regions = selectedRegions; // If the tooltip hangs to the right: Highest x value before the tooltip will be cut off const maxXRight = width - tooltipMaxWidth; // If the tooltip hangs to the left: Lowest x value before the tooltip will be cut off const minXLeft = tooltipMaxWidth; const xPos = x > width / 2 ? `${Math.max(minXLeft, x)}px - 100%` : `${Math.min(maxXRight, x)}px`; const dataPoints = regions .sort((a, b) => b.valuesByYear[year] - a.valuesByYear[year]) .map((region, i) => ({ label: region.name, value: valueFormat(region.valuesByYear[year]), symbol: getRegionColor(region.name) })); return createTooltip( { dataPoints: [ { label: "Jahr", value: year === d3.max(years).getFullYear() ? `${year} (provisorisch)` : year }, ...dataPoints ], visible, x: `calc(${xPos})`, y: `calc(${dimensions.margin.top}px - 100% - .25rem)` }, this ); }33:T4c8,yAxis = (svg) => { const dimensions = lineChartDimensions; const numOfTicks = yScale.domain()[1]; const axisHeight = dimensions.boundedHeight; const pixelsPerTick = 40; const numberOfTicksTarget = Math.max( 1, Math.floor(axisHeight / pixelsPerTick) ); svg .append("g") .attr("transform", `translate(0 ${dimensions.margin.top})`) .call( d3 .axisRight(yScale) .tickSize(dimensions.margin.left + dimensions.boundedWidth) .tickFormat((d) => d.toLocaleString("de-CH")) .ticks(numberOfTicksTarget) ) .call((g) => g .selectAll(".tick text") .attr("x", 0) .attr("dy", -4) .attr("fill", ZHColors.axis.ticklabel) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.axis.gridline); }) .call((g) => g .append("text") .attr("x", 0) .attr("y", -30) .attr("fill", ZHColors.black["60"]) .attr("text-anchor", "start") .text(CONFIG.metadata.unit.long) .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("10px", "12px")) ) .call((g) => { g.selectAll(".domain").remove(); }); }34:T41b,xAxis = (svg) => { const dimensions = lineChartDimensions; const axisWidth = xScale.range()[1] - xScale.range()[0]; const pixelsPerTick = 200; const numberOfTicksTarget = Math.max( 1, Math.floor(axisWidth / pixelsPerTick) ); svg .append("g") .attr( "transform", `translate(${dimensions.margin.left} ${ dimensions.height - dimensions.margin.bottom })` ) .call( d3 .axisBottom(xScale) .ticks(numberOfTicksTarget) .tickSize(8) .tickFormat((d) => d3.timeFormat("%Y")(d) % 1 === 0 ? d3.timeFormat("%Y")(d) : null ) ) .call((g) => // Adding gridlines g .selectAll(".tick text") .attr("fill", ZHColors.axis.ticklabel) .attr("y", 16) .style("font-size", responsiveValue("10px", "12px")) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.axis.tickline); }) .call((g) => { g.selectAll(".domain").attr("stroke", ZHColors.axis.axisline); }); }35:T897,createLines = (svg) => { const dimensions = lineChartDimensions; const container = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left} ${dimensions.margin.top})` ); const isSelected = (name) => selectedRegions.some((r) => r.name === name); const regionContainers = container .selectAll("g.region") .data(selectedRegions) .join("g") .attr("class", "region") .style("--_color", (d) => CONFIG.colors[d.name]); const lines = regionContainers .append("path") .attr("class", "region__line") .attr("stroke", "var(--_color)") .attr("stroke-width", 1.5) .attr("fill", "none") .attr("d", (d) => lineGenerator(d.values)); const shapes = regionContainers .selectAll("path.region__shape") .data((d) => d.values .filter((v, index, values) => { /* Only keep values that are divisible by 2... */ const isDivisibleByFive = v.year % 1 === 0; if (isDivisibleByFive) { return true; } else { return false; } }) .map((value) => ({ ...value, name: d.name })) ) .join("path") .attr("class", "region__shape") .attr("d", (d) => { return d3.symbol().size(36).type(CONFIG.symbols[d.name])(); }) .attr( "transform", (d) => `translate(${xScale(xAccessor(d))} ${yScale(yAccessor(d))})` ) .attr("fill", "var(--_color)") .attr("stroke", "white") .attr("stroke-width", 1); const updateLines = ({ highlightedRegionId }) => { regionContainers.attr("opacity", (d) => // The appearance only has to change when the highlighted // region is also selected. Otherwise all lines will be greyed out. highlightedRegionId !== null && isSelected(highlightedRegionId) ? d.name === highlightedRegionId ? 1 : 0.2 : 1 ); /* * Raise the highlighted region to the top * so that no other transparent line is overlapping it. */ regionContainers .filter((d) => highlightedRegionId ? d.name === highlightedRegionId : false ) .raise(); }; return updateLines; }36:Ta40,createMarker = (svg) => { const dimensions = lineChartDimensions; const container = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left} ${dimensions.margin.top})` ); const highlightedMarkerLine = container .append("line") .attr("x1", 0) .attr("x2", 0) .attr("y1", 0) .attr("y2", dimensions.boundedHeight) .attr("stroke-width", 1) .attr("stroke", ZHColors.black["100"]) .attr("stroke-dasharray", "2") .attr("opacity", 0); const shapes = container .selectAll("path") .data(selectedRegions) .join("path") .attr("d", (d) => { return d3.symbol().size(68).type(CONFIG.symbols[d.name])(); }) .style("fill", (d) => CONFIG.colors[d.name]) .attr("stroke", "white") .attr("stroke-width", "2") .attr("opacity", 0); const markerXScale = d3 .scaleLinear() .domain([ dimensions.margin.left, dimensions.margin.left + dimensions.boundedWidth ]) .range([0, dimensions.boundedWidth]); const bisect = d3.bisector((d) => d); const moveListener = (e) => { const pointerCoords = getPointerPosition( e, e.target.ownerSVGElement ?? e.target ); const [posX, posY] = pointerCoords; if ( posX > dimensions.margin.left && posX < dimensions.margin.left + dimensions.boundedWidth && posY > dimensions.margin.top && posY < dimensions.margin.top + dimensions.boundedHeight ) { /* Find date from position */ const year = xScale.invert(markerXScale(posX)); /* Find the closest data point */ const index = bisect.center(years, year); const selectedYear = years[index]; setValue(selectedYear, viewof highlightedYear); const markerXPos = xScale(selectedYear); highlightedMarkerLine .attr("x1", markerXPos) .attr("x2", markerXPos) .attr("opacity", 1); shapes .attr("opacity", (d) => !isNaN(d.valuesByYear[selectedYear.getFullYear()]) ? 1 : 0 ) .attr( "transform", (d) => `translate(${markerXPos} ${yScale( d.valuesByYear[selectedYear.getFullYear()] || 0 )})` ); } else { highlightedMarkerLine.attr("opacity", 0); shapes.attr("opacity", 0); setValue(null, viewof highlightedYear); } }; svg.on("mousemove", moveListener); svg.on("touchmove", moveListener); svg.on("mouseleave", (e) => { highlightedMarkerLine.attr("opacity", 0); shapes.attr("opacity", 0); setValue(null, viewof highlightedYear); }); }37:T46b,38:[] 2f:{"id":"372b1f509b7f6c1d","slug":null,"title":"Energieverbrauch der kantonalen Ladestationen für Elektrofahrzeuge","thumbnail":"e0f1a0547da7423ecc2782030185fcada2534511c43631970e4f3348f1c1086f","access_level":"public","create_time":"$D2025-09-30T14:53:10.606Z","update_time":"$D2026-01-20T10:49:00.121Z","view_time":null,"first_public_time":"$D2025-09-30T15:26:33.764Z","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":4271,"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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Energieverbrauch der kantonalen Ladestationen für Elektrofahrzeuge","cells":[{"id":0,"value":"# ${CONFIG.metadata.title}\n\n**Datenquelle:** OGD-Datensatz [«E-Ladestationen der kantonalen Verwaltung Zürich»](${CONFIG.metadata.datasetUrl})\n\n\n**Wichtige Hinweise:**\n\n- Die OGD werden während des Jahres fortlaufend aktualisiert. Deshalb sind die Daten des aktuellsten Jahres vorläufig. An der Grafik wird ein entsprechender Hinweis eingeblendet. Im Tooltip ist das aktuellste Jahr mit dem Zusatz «provisorisch» versehen.\n- Die Anzahl der Standorte und E-Ladestationen kann nicht aus den OGD abgeleitet werden.\n- Ladeinfrastruktur-Anbieter: Anbieterwechsel per Juli 2025 von PLUG'N ROLL (Repower) zu AVIA VOLT Suisse AG. Deshalb erfolgt keine Anbieternennung im Grafiktitel und es wird ein entsprechender Hinweis unterhalb der Grafik ergänzt.","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":1040,"value":"### Line Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"viewof lineChart = {\n const dimensions = lineChartDimensions;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, dimensions.width, dimensions.height])\n .attr(\"aria-hidden\", \"true\")\n .style(\"display\", \"block\");\n\n svg.call(xAxis);\n\n svg.call(yAxis);\n\n const updateLines = createLines(svg);\n\n svg.call(createMarker);\n\n return Object.assign(svg.node(), {\n update: (...args) => {\n updateLines(...args);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3892,"value":"formatTime = d3.timeFormat(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"### Line Chart Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2923,"value":"### Line Chart Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2926,"value":"viewof lineChartLegend = lit.html`\n

\n setValue(region.name, viewof highlightedRegionId)}\n @pointerleave=${() => setValue(null, viewof highlightedRegionId)}>\n ${htmlRegionSymbol(region.name)}\n ${region.name}\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 = (name) =>\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 lineChart.update({ highlightedRegionId });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"---\n## Line Chart Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"xAccessor = (d) => d.year","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"yAccessor = (d) => d.value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"xScale = d3\n .scaleTime()\n .domain(d3.extent(years))\n .range([0, lineChartDimensions.boundedWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3946,"value":"maxYValue = Math.max(\n 300000,\n Math.ceil(\n d3.max(selectedRegions, (d) => d3.max(d.values.map((v) => v.value)))\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"yScale = {\n const domain = [0, maxYValue];\n\n return d3\n .scaleLinear()\n .domain(domain)\n .nice()\n .range([lineChartDimensions.boundedHeight, 0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"lineGenerator = d3\n .line()\n .defined((d) => !isNaN(yAccessor(d)))\n .x((d) => xScale(xAccessor(d)))\n .y((d) => yScale(yAccessor(d)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4044,"value":"---\n## leu components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4046,"value":"viewof leuDropdown = htl.html`\n \n \n Datensatz im OGD-Katalog anzeigen\n Daten als CSV herunterladen\n \n createPNG({\n containerId: contentId.id,\n padding: \"10px\",\n filename: `${CONFIG.metadata.title}.png`\n })}>Grafik als PNG herunterladen\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4048,"value":"leuTheme = theme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4053,"value":"leuFonts = fonts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4055,"value":"leuElements = {\n importLeuFromCDN(\"leu-dropdown.js\", leuVersion);\n importLeuFromCDN(\"leu-menu.js\", leuVersion);\n importLeuFromCDN(\"leu-menu-item.js\", leuVersion);\n importLeuFromCDN(\"leu-icon.js\", leuVersion);\n}","pinned":true,"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":889,"value":"viewof selectedRegionIds = Inputs.input([261])","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":1076,"value":"### Derived State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"/*\n * Group by Gebiet and rename properties\n */\nselectedRegions = processedData\n .reduce((groups, d) => {\n const group = groups.find((g) => g.name === d.betreiber);\n\n const currentValue = {\n value: d.energieverbrauch,\n year: new Date(d.jahr, 0, 1)\n };\n\n if (group) {\n group.values.push(currentValue);\n group.valuesByYear[currentValue.year.getFullYear()] = currentValue.value;\n } else {\n groups.push({\n name: d.betreiber,\n values: [currentValue],\n valuesByYear: {\n [currentValue.year.getFullYear()]: currentValue.value\n }\n });\n }\n\n return groups;\n }, [])\n .map((group) => ({\n ...group,\n values: group.values.sort((a, b) => a.year - b.year)\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2668,"value":"maxValueOfYear = d3.max(\n selectedRegions.map((r) => r.valuesByYear[selectedYear])\n)","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":1070,"value":"getRegionColor = (name) => {\n return CONFIG.colors[name];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"getRegionSymbol = (name) => {\n return CONFIG.symbols[name];\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":"valueFormat = (v) =>\n isNaN(v)\n ? \"keine Daten\"\n : lit.html`${localeDeCH.format(\",.0f\")(v)} ${\n CONFIG.metadata.unit.short\n }`","pinned":true,"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":10,"value":"lineChartHeight = responsiveValue(400, 350)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"lineChartMargin = ({\n top: 45,\n right: 30,\n bottom: 30,\n left: 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"lineChartDimensions = {\n return {\n width,\n height: lineChartHeight,\n margin: lineChartMargin,\n boundedWidth: width - lineChartMargin.left - lineChartMargin.right,\n boundedHeight:\n lineChartHeight - lineChartMargin.top - lineChartMargin.bottom\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"// maxSelectedRegions = 2","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 = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4039,"value":"contentId = DOM.uid(\"zhstat-content\")","pinned":true,"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":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 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 visuallyHidden: DOM.uid(\"zhstat-visually-hidden\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"css","database":"$undefined"},{"id":19,"value":"---\n## Data\n\n`loadAndProcessData()` - kombinierte Funktion:\n- Lädt die CSV-Daten ab Url\n- Aggregiert nach Jahr (ohne Betreiber-Gruppierung)\n- Setzt `betreiber` fix auf \"Kantonale Verwaltung\"\n- Gibt sortierte Array zurück\n\nDamit wird vereinfacht und es gibt nur noch eine Datenlinie für die kantonale Verwaltung.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4116,"value":"CONFIG = ({\n urls: {\n ogd: \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00002282_00004563.csv\"\n },\n colors: {\n \"Kantonale Verwaltung\": ZHColors.chart.blue\n },\n symbols: {\n \"Kantonale Verwaltung\": d3.symbolCircle\n },\n metadata: {\n title: \"Energieverbrauch der kantonalen Ladestationen für Elektrofahrzeuge\",\n subtitle:\n \"Ladestationen mit der kantonalen Verwaltung als Betreiberin, in Kilowattstunden (kWh)\",\n remark:\n \"Hinweis Ladeinfrastruktur-Anbieter: Anbieterwechsel per Juli 2025 von PLUG'N ROLL (Repower) zu AVIA VOLT Suisse AG.\",\n source: \"Immobilienamt des Kantons Zürich\",\n unit: { short: \"kWh\", long: \"Kilowattstunden (kWh)\" },\n datasetUrl:\n \"https://datenkatalog.statistik.zh.ch/datasets/2282@ima-kanton-zuerich\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4118,"value":"// Daten laden und verarbeiten (kombiniert)\nasync function loadAndProcessData() {\n const raw = await d3.csv(CONFIG.urls.ogd);\n\n const grouped = d3.rollup(\n raw,\n (v) => d3.sum(v, (d) => +d.aktiver_energieverbrauch || 0),\n (d) => +d.jahr\n );\n\n const result = [];\n grouped.forEach((energieverbrauch, jahr) => {\n result.push({\n jahr,\n betreiber: \"Kantonale Verwaltung\",\n energieverbrauch\n });\n });\n\n return result.sort((a, b) => a.jahr - b.jahr);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4137,"value":"processedData = loadAndProcessData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4141,"value":"betreiber = Array.from(new Set(processedData.map((d) => d.betreiber)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3654,"value":"yearExtent = d3.extent(processedData, (d) => d.jahr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"years = {\n const extent = yearExtent;\n\n return d3.range(extent[0], extent[1] + 1).map((d) => new Date(d, 0, 1));\n}","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":3990,"value":"import {\n colors as ZHColors,\n fonts as ZHFonts\n} from \"@statistikzh/common-styles\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4029,"value":"import { createPNG } from \"@statistikzh/shared-imports\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4051,"value":" import {\n fonts,\n theme,\n importLeuFromCDN\n } with { leuVersion as version } from \"@statistikzh/leu-general\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4105,"value":"leuVersion = \"^0.9\"","pinned":true,"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":1139,"value":"lit = import(`https://esm.run/lit-html@3`) // import(\"lit-html@3.2.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"