2b:null 2c:["$","title",null,{"children":"AFM - Elektromobilität, Bestand Personenwagen nach Antriebstechnologie | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T93d,wrapper = { sync; return render( lit.html`

Bestand elektrischer Personenwagen

Antriebstechnologie ${viewof driveTypeRadios}

Dargestellter Wert ${viewof valueTypeRadios}

${viewof mapLegend}

${viewof searchDropdown} ${viewof regionList}

Um die Daten einer Gemeinde anzuzeigen, klicken Sie auf die entsprechende Gemeinde auf der Karte oder wählen Sie sie über die Suchfunktion aus. Es ist auch möglich, «Zürich - ganzer Kanton» über die Suche auszuwählen. Es können maximal drei Gebiete ausgewählt werden.

${viewof mapTooltip} ${viewof mapView}

Gebietsstand: Gemeinden per 1.1.2023.

${viewof lineChartTooltip} ${viewof lineChart}

Datenquelle: Bundesamt für Strassen (ASTRA) - IVZ-Fahrzeuge, Daten zur Grafik herunterladen

`, this ); }32:T50f,viewof mapView = { const node = createMap({ colorScale, getData: (d) => { return data.find((r) => r.BFS === d.GEBIET_C).valuesByYear[defaultYear]; }, onClick: (d) => { if (d.ART_C !== 1) return; /* Region toggling */ toggleRegion(d.GEBIET_C); }, onPointerEnter: (e, d) => { if (d.ART_C === 1) { 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:T4f6,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.filter( (region) => !isNaN(region.valuesByYear[year]) ); // 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.BFS) })); return createTooltip( { dataPoints: [{ label: "Jahr", value: year }, ...dataPoints], visible, x: `calc(${xPos})`, y: `calc(${dimensions.margin.top}px - 100% - .25rem)` }, this ); }34:T40c,xAxis = (svg) => { const dimensions = lineChartDimensions; const axisWidth = xScale.range()[1] - xScale.range()[0]; const pixelsPerTick = 50; 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) => d.getFullYear() % 5 === 0 ? d3.timeFormat("%Y")(d) : null ) ) .call((g) => // Adding gridlines g .selectAll(".tick text") .attr("fill", ZHColors.black["60"]) .attr("y", 16) .style("font-size", responsiveValue("12px", "14px")) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.black["20"]); }) .call((g) => { g.selectAll(".domain").attr("stroke", ZHColors.black["20"]); }); }35:Ta95,createLines = (svg) => { const dimensions = lineChartDimensions; const container = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left} ${dimensions.margin.top})` ); const isSelected = (id) => selectedRegions.some((r) => r.BFS === id); const regionContainers = container .selectAll("g.region") .data( showReferenceData ? selectedRegions : selectedRegions.filter((r) => r.name !== referenceData.name) ) .join("g") .attr("class", "region") .style( "--_color", (d) => colors[selectedRegions.findIndex((region) => region.BFS === d.BFS)] ); 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 5... */ const isDivisibleByFive = v.year.getFullYear() % 5 === 0; if (isDivisibleByFive) { return true; } if ( values.length < 5 && index === 0 && !values.some((v) => v.year.getFullYear() % 5 === 0) ) { return true; } else { return false; } }) .map((value) => ({ ...value, BFS: d.BFS })) ) .join("path") .attr("class", "region__shape") .attr("d", (d) => { return d3 .symbol() .size(48) .type( symbols[selectedRegions.findIndex((region) => region.BFS === d.BFS)] )(); }) .attr( "transform", (d) => `translate(${xScale(xAccessor(d))} ${yScale(yAccessor(d))})` ) .attr("fill", "var(--_color)") .attr("stroke", "white") .attr("stroke-width", (d) => (d.year.getFullYear() % 5 === 0 ? 2 : 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.BFS === 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.BFS === highlightedRegionId : false ) .raise(); }; return updateLines; }36:Te46,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 selectedMarkerLine = container .append("line") .attr("x1", xScale(new Date(defaultYear, 0, 1))) .attr("x2", xScale(new Date(defaultYear, 0, 1))) .attr("y1", 0) .attr("y2", dimensions.boundedHeight) .attr("stroke-width", 1) .attr("stroke", ZHColors.black["40"]) .attr("opacity", 1); const selectedText = container .append("text") .attr("x", xScale(new Date(defaultYear, 0, 1))) .attr("y", 0) .attr("dy", "-0.71em") .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-family", ZHFonts.black) .text(defaultYear); const shapes = container .selectAll("path") .data( showReferenceData ? selectedRegions : selectedRegions.filter((r) => r.name !== referenceData.name) ) .join("path") .attr("d", (d) => { return d3 .symbol() .size(64) .type( symbols[selectedRegions.findIndex((region) => region.BFS === d.BFS)] )(); }) .style( "fill", (d) => colors[selectedRegions.findIndex((region) => region.BFS === d.BFS)] ) .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) => { // Do nothing when no region is selected and the reference data is hidden if (!showReferenceData && selectedRegions.length === 1) { return; } 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 defaultYear = years[index]; setValue(defaultYear, viewof highlightedYear); const markerXPos = xScale(defaultYear); highlightedMarkerLine .attr("x1", markerXPos) .attr("x2", markerXPos) .attr("opacity", 1); shapes .attr("opacity", (d) => !isNaN(d.valuesByYear[defaultYear.getFullYear()]) ? 1 : 0 ) .attr( "transform", (d) => `translate(${markerXPos} ${yScale( d.valuesByYear[defaultYear.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:T6ad,// Wenn der min. Wert vom dataDomainRange grösser ist als der kleinste Wert der lowerBounds, dann schliess den kleinsten Wert der lowerBounds aus // Wenn der max. Wert vom dataDomainRange innerhalb vom grössten Bucket, dann nimm x1 als oberste Grenze, sonst x0 bucketsDomain = { const valueArray = fetchedData .filter( (d) => d.Jahr.getFullYear() === defaultYear && // nur das aktuellste Jahr d.BFS !== 0 && // Kanton Zürich für die Skala ausschliessen d.Werttyp === valueTypeRadios && // Skala ist variabel nach Wert und... d.Treibstoff === driveTypeRadios // ... nach Treibstoff ) .map((r) => r.Wert); const bin = d3.bin(); //.thresholds(8); const buckets = bin(valueArray); const dataDomainRange = bin.domain()(valueArray); // let lowerBounds = buckets.map((d) => d.x0); // let upperBounds = buckets.map((d) => d.x1); let allBounds = []; // Filter out let lowerBounds = dataDomainRange[0] * -1 >= buckets.map((d) => d.x0)[0] * -1 ? buckets.map((d) => d.x1) //.filter((n) => n != buckets.map((d) => d.x0)[0]) : buckets.map((d) => d.x0); let upperBounds = dataDomainRange[1] >= d3.max(buckets.map((d) => d.x0)) && dataDomainRange[1] <= d3.max(buckets.map((d) => d.x1)) ? buckets.map((d) => d.x1) : buckets.map((d) => d.x0); // .filter((n) => n != d3.max(buckets.map((d) => d.x1))); // Adds all elements of lower bounds and upper bounds into all bounds. may contain duplicates allBounds.push(...lowerBounds, ...upperBounds); //Removes duplicates from allBounds let bucketsDomain = allBounds.filter( (val, index, self) => self.indexOf(val) === index ); return bucketsDomain; }38:T415,// Wenn der min. Wert vom dataDomainRange grösser ist als der kleinste Wert der lowerBounds, dann schliess den kleinsten Wert der lowerBounds aus // Wenn der max. Wert vom dataDomainRange innerhalb vom grössten Bucket, dann nimm x1 als oberste Grenze, sonst x0 { let lowerBounds = buckets.map((d) => d.x0); let upperBounds = buckets.map((d) => d.x1); let allBounds = []; // Adds all elements of lower bounds and upper bounds into all bounds. may contain duplicates allBounds.push(...lowerBounds, ...upperBounds); //Removes duplicates from allBounds let bucketsDomain = allBounds.filter( (val, index, self) => self.indexOf(val) === index ); // return bucketsDomain; if ( valueTypeRadios === "Gesamtzahl" && driveTypeRadios === "Steckerfahrzeuge" ) { return [200, 400, 600, 800, 1000, 2000, 7000, 8000]; } else if ( valueTypeRadios === "Gesamtzahl" && driveTypeRadios === "Batterie-elektrische" ) { return [200, 400, 600, 800, 1000, 2000, 5000]; } else { return bucketsDomain; } }39:Tdd7,3a:[{"id":"f0d9b259e1463c3c15eec416106ffddee7ae56c52c993bdbdf1a36006a034b6a09040e0a2d23e6997b163b72783111382d9c5fd61a7bb906198c594290d3d8da","href":"https://static.observableusercontent.com/files/f0d9b259e1463c3c15eec416106ffddee7ae56c52c993bdbdf1a36006a034b6a09040e0a2d23e6997b163b72783111382d9c5fd61a7bb906198c594290d3d8da","name":"Bestand (1)@1.csv","type":"text/csv","lastModified":1717070459981.323,"size":1056843},{"id":"4218f9c03c8bfafb2c94d0d36d9640eb6f4401d9e23883eae7236c4efdd673b58c1fe13ff910cc801bf9e7bc66eba62fc7b55ac0b30e474af71ba5befba87899","href":"https://static.observableusercontent.com/files/4218f9c03c8bfafb2c94d0d36d9640eb6f4401d9e23883eae7236c4efdd673b58c1fe13ff910cc801bf9e7bc66eba62fc7b55ac0b30e474af71ba5befba87899","name":"Bestand@3.csv","type":"text/csv","lastModified":1745336288432.231,"size":1132848},{"id":"8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","href":"https://static.observableusercontent.com/files/8c4d5257689a0b7ac9460f721ceaa4365520215ccec41a34e5e71b47ed6300762793ef8ed35cc585b8ea8ecca707ee2a06519cba32ab201f19998a37f85914f1","name":"close@2.svg","type":"image/svg+xml","lastModified":1705913380498.143,"size":367},{"id":"65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","href":"https://static.observableusercontent.com/files/65b83e1544510f43b2db2d4d5fc994f5968a0473aea1e22b5e290de6ebff912441936859148330d36a7fa1f716d6b4e3abff688a66d8f8208ef76d3764a38f2f","name":"close.svg","type":"image/svg+xml","lastModified":1705913380498.143,"size":305}] 2f:{"id":"d03951466e17b7da","slug":null,"title":"AFM - Elektromobilität, Bestand Personenwagen nach Antriebstechnologie","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-01-22T08:49:40.498Z","update_time":"$D2025-04-22T15:38:04.911Z","view_time":null,"first_public_time":"$D2024-05-30T12:50:52.816Z","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":5248,"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":1,"collection":{"id":"361a362e60186c1f","slug":"afm-elektromobilitat","title":"AFM - Elektromobilität","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"AFM - Elektromobilität, Bestand Personenwagen nach Antriebstechnologie","cells":[{"id":0,"value":"# AFM - Elektromobilität, Bestand Personenwagen nach Antriebstechnologie","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":4883,"value":"### Radios","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5166,"value":"viewof driveTypeRadios = Inputs.radio(drive, { value: drive[0] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5186,"value":"viewof valueTypeRadios = Inputs.radio(werttyp, { value: werttyp[0] })","pinned":true,"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":2383,"value":"viewof mapLegend = createLegend({\n title:\n valueTypeRadios === \"Anteil\"\n ? \"Fahrzeugbestand, in %\"\n : \"Fahrzeugbestand, in Anz.\",\n colorScale,\n width: width,\n // TODO Deactivate max value at the moment. Discuss with basil.\n maxDataValue: maxValueOfYear,\n indicatorValue:\n data.find((d) => d.BFS === highlightedRegionId)?.valuesByYear[\n defaultYear\n ] ?? null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"### Map\n\n- fill: is set to the most recent year in the data, e.g. static fill","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":848,"value":"$32","pinned":true,"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":"viewof mapTooltip = {\n const { x, y, visible, regionId } = mapTooltipState;\n\n /*\n * This array will always just contain one or none elements.\n * It's just easier to use the array methods instead of using conditionals\n */\n const regionDataPoints = data\n .filter((r) => r.BFS === regionId)\n .map((r) => ({\n label: r.name,\n value: isNaN(r.valuesByYear[defaultYear])\n ? \"Keine Daten\"\n : valueFormat(r.valuesByYear[defaultYear])\n }));\n\n const xPosition = width / 2 > x ? `${x + 16}px` : `calc(-100% + ${x - 16}px)`;\n const yPosition = `calc(-100% + ${y}px)`;\n\n return createTooltip(\n {\n x: xPosition,\n y: yPosition,\n visible,\n dataPoints: [\n {\n label: \"Jahr\",\n value: defaultYear\n },\n ...regionDataPoints\n ]\n },\n this\n );\n}","pinned":true,"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":"viewof regionList = {\n const regionContent = (region, index) => {\n return lit.html`\n${htmlRegionSymbol(region.BFS)}${region.name}\n `;\n };\n\n const shadowChips = new Array(\n maxSelectedRegions - selectedRegionIds.length\n ).fill(null);\n\n return render(\n ChipList({\n content: [...selectedRegionIds, ...shadowChips].map((id, index) => {\n if (id === null) return ShadowChip();\n\n const region = data.find((d) => d.BFS === id);\n const args = {\n content: regionContent(region, index),\n onpointerenter: () =>\n setValue(region.BFS, viewof highlightedRegionId),\n onpointerleave: () => setValue(null, viewof highlightedRegionId)\n };\n\n return RemovableChip({\n ...args,\n ondelete: () => removeRegion(region)\n });\n })\n }),\n this\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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 svg.call(yAxisLabel);\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":1045,"value":"### Line Chart Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"$33","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.BFS, viewof highlightedRegionId)}\n @pointerleave=${() => setValue(null, viewof highlightedRegionId)}>\n ${htmlRegionSymbol(region.BFS)}\n ${\n region.BFS === referenceData.BFS\n ? lit.html`Linie anzeigen`\n : lit.nothing\n }\n ${region.name}\n

\n`","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 oder Kanton Zürich suchen\",\n list: data.map((d) => ({\n label: d.name,\n id: d.BFS,\n selected: selectedRegionIds.includes(d.BFS)\n })),\n onSelect: toggleRegion\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 === 1,\n isHighlighted: (d) => highlightedRegionId === d.GEBIET_C && d.ART_C === 1,\n getSymbol: (id) => d3.symbol(getRegionSymbol(id)),\n getSymbolColor: getRegionColor,\n });\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":90,"value":"yScale = {\n const maxYValue = Math.max(\n 4,\n Math.ceil(\n d3.max(selectedRegions, (d) => d3.max(d.values.map((v) => v.value)))\n )\n );\n\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":"yAxis = (svg) => {\n const dimensions = lineChartDimensions;\n const numOfTicks = yScale.domain()[1];\n\n const axisHeight = dimensions.boundedHeight;\n const pixelsPerTick = 30;\n const numberOfTicksTarget = Math.max(\n 1,\n Math.floor(axisHeight / pixelsPerTick)\n );\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0 ${dimensions.margin.top})`)\n .call(\n d3\n .axisRight(yScale)\n .tickSize(dimensions.margin.left + dimensions.boundedWidth)\n .tickFormat((d) =>\n valueTypeRadios === \"Anteil\" ? d + \" %\" : d.toLocaleString(\"de-CH\")\n )\n .ticks(numberOfTicksTarget)\n )\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"x\", 0)\n .attr(\"dy\", -4)\n .attr(\"fill\", ZHColors.black[\"60\"])\n )\n .call((g) => {\n g.selectAll(\".tick line\").attr(\"stroke\", ZHColors.black[\"20\"]);\n })\n .call((g) => {\n g.selectAll(\".domain\").remove();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"yAxisLabel = (svg) => {\n const path =\n \"M12 4C12.2652 4 12.5196 4.10536 12.7071 4.29289L18.7071 10.2929C19.0976 10.6834 19.0976 11.3166 18.7071 11.7071C18.3166 12.0976 17.6834 12.0976 17.2929 11.7071L13 7.41421L13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19L11 7.41421L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071C4.90237 11.3166 4.90237 10.6834 5.29289 10.2929L11.2929 4.29289C11.4804 4.10536 11.7348 4 12 4Z\";\n\n const container = svg\n .append(\"g\")\n .attr(\"transform\", `translate(-4 10)`)\n .attr(\"fill\", ZHColors.black[\"60\"]);\n\n container.append(\"path\").attr(\"d\", path).attr(\"transform\", \"scale(0.75)\");\n\n container\n .append(\"text\")\n .text(valueTypeRadios === \"Anteil\" ? \"Anteil\" : \"Gesamtzahl\")\n .style(\"font-size\", \"12px\")\n .attr(\"x\", \"24\")\n .attr(\"y\", \"13\");\n}","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":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 `;\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":889,"value":"viewof selectedRegionIds = Inputs.input([0, 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":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.BFS))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2668,"value":"maxValueOfYear = d3.max(\n data.filter((d) => d.BFS != 0).map((r) => r.valuesByYear[defaultYear])\n)","pinned":true,"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":5159,"value":"// toggleDrive = () => {\n// let nextValue;\n// if (selectedDrive === drive[0]) {\n// nextValue = drive[1];\n// } else {\n// nextValue = drive[0];\n\n// if (nextValue.length === 1) {\n// nextValue.shift();\n// }\n\n// nextValue.push();\n// }\n\n// setValue(nextValue, viewof selectedDrive);\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2485,"value":"removeRegion = (region) => {\n const nextValue = viewof selectedRegionIds.value.filter(\n (d) => d !== region.BFS\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 = (BFS) => {\n let nextValue;\n if (selectedRegionIds.includes(BFS)) {\n nextValue = selectedRegionIds.filter((r) => r !== BFS);\n } else {\n nextValue = [...selectedRegionIds];\n\n if (nextValue.length === maxSelectedRegions) {\n nextValue.shift();\n }\n\n nextValue.push(BFS);\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.BFS === 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.BFS === 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":true,"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 valueTypeRadios === \"Anteil\"\n ? lit.html`${localeDeCH.format(\".2f\")(v)} %`\n : lit.html`${v.toLocaleString(\"de-CH\")}`","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":10,"value":"lineChartHeight = responsiveValue(250, 240)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"lineChartMargin = ({\n top: 50,\n right: 20,\n bottom: 36,\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 = 3","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":3291,"value":"valueArray = fetchedData\n .filter(\n (d) =>\n d.Jahr.getFullYear() === defaultYear && // nur das aktuellste Jahr\n d.BFS !== 0 && // Kanton Zürich für die Skala ausschliessen\n d.Werttyp === valueTypeRadios && // Skala ist variabel nach Wert und...\n d.Treibstoff === driveTypeRadios // ... nach Treibstoff\n )\n .map((r) => r.Wert)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3542,"value":"d3.max(valueArray)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3296,"value":"bin = d3.bin().thresholds(7)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3298,"value":"buckets = bin(valueArray)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5232,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3300,"value":"dataDomainRange = {\n if (valueTypeRadios === \"Anteil\") {\n const bin = d3.bin();\n return bin.domain()(valueArray);\n } else if (valueTypeRadios === \"Gesamtzahl\") {\n const bin = d3.bin().thresholds(12);\n return bin.domain()(valueArray);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3302,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"colorScale = {\n const stops = bucketsDomain;\n return d3\n .scaleThreshold()\n .range(blPuScheme)\n .domain(stops)\n .unknown(\"lightgrey\");\n}","pinned":true,"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(\n d3.interpolate(\"#7AB6E2\", \"#54268E\"),\n bucketsDomain.length + 1\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2566,"value":"swatches(blPuScheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"The darkest color of the following color scheme is the darkest blue from the ZH design system. The starting point was generated with a hue shift.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1369,"value":"interpolatedColorScheme = d3.quantize(d3.interpolate(\"#b3e0d5\", \"#00407c\"), 8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"swatches(interpolatedColorScheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2561,"value":"swatches = (colorScheme) => {\n return htl.html`

${colorScheme.map(\n (c) =>\n htl.html`

`\n )}

`;\n}","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 inputContainer: DOM.uid(\"zhstat-input-container\"),\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 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":3235,"value":"cl = makeCl(\"button-group\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"$39","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"css","database":"$undefined"},{"id":19,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3132,"value":"file = FileAttachment(\"Bestand@3.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3136,"value":"Inputs.table(fetchedData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"fetchedData = d3.csvParse(await file.text(), (d) => ({\n ...d,\n Gemeinde: d.Gemeinde === \"Zürich\" ? \"Stadt Zürich\" : d.Gemeinde,\n Wert: Number.parseFloat(d.Wert),\n Jahr: new Date(+d.Jahr, 0, 1),\n BFS: Number.parseInt(d.BFS, 10)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1715,"value":"/*\n * Group by municipalities and rename properties\n */\ndata = fetchedData\n .filter(\n (d) => d.Treibstoff === driveTypeRadios && d.Werttyp === valueTypeRadios\n )\n .reduce((groups, d) => {\n const group = groups.find((g) => g.name === d.Gemeinde);\n\n const currentValue = {\n // category: d.Treibstoff,\n value: d.Wert,\n year: d.Jahr\n };\n\n if (group) {\n group.values.push(currentValue);\n group.valuesByYear[currentValue.year.getFullYear()] = currentValue.value;\n } else {\n groups.push({\n BFS: d.BFS,\n name: d.Gemeinde,\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":68,"value":"years = {\n const extent = d3.extent(fetchedData, (d) => d.Jahr.getFullYear());\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":3156,"value":"drive = [...new Set(fetchedData.map((d) => d.Treibstoff))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3246,"value":"werttyp = [...new Set(fetchedData.map((d) => d.Werttyp))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"referenceData = data.find((d) => d.name === \"Zürich - ganzer Kanton\")","pinned":true,"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 \"c2dac13d2b22c78d\" //from \"f825b9eb531d44ee\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"import { createLegend } with { width as width } from \"18ec1715c73fb431\"","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":5241,"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`) // import(\"lit-html@3.2.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"