2b:null 2c:["$","title",null,{"children":"📈 A2: Fossilfreier Anteil verbrannter Abfall | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T4b9,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 }, ...dataPoints], visible, x: `calc(${xPos})`, y: `calc(${dimensions.margin.top}px - 100% - .25rem)` }, this ); }32:T414,xAxis = (svg) => { const dimensions = lineChartDimensions; const axisWidth = xScale.range()[1] - xScale.range()[0]; const pixelsPerTick = 100; 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() % 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("12px", "14px")) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.axis.tickline); }) .call((g) => { g.selectAll(".domain").attr("stroke", ZHColors.axis.axisline); }); }33:T968,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) => colors.Variable[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.getFullYear() % 1 === 0; if (isDivisibleByFive) { return true; } if ( values.length < 5 && index === 0 && !values.some((v) => v.year.getFullYear() % 1 === 0) ) { 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(symbols.Variable[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; }34:Tae5,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(symbols.Variable[d.name])(); }) .style("fill", (d) => colors.Variable[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) => { // 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 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); }); }35:T46b,36:[] 2f:{"id":"252a945055cab60c","slug":null,"title":"📈 A2: Fossilfreier Anteil verbrannter Abfall","thumbnail":"d0136766d65d92fd0250c4da3887add1755c48bfcff57ab87ca2be4e48adb385","access_level":"public","create_time":"$D2024-07-24T12:30:21.969Z","update_time":"$D2025-04-01T05:45:06.066Z","view_time":null,"first_public_time":"$D2024-07-24T12:45:45.818Z","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":4192,"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":"5e3d875f95e398da","slug":"decarb-monitoring-awel","title":"AWEL - Decarb-Monitoring","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"📈 A2: Fossilfreier Anteil verbrannter Abfall","cells":[{"id":0,"value":"# 📈 A2: Fossilfreier Anteil verbrannter Abfall","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4095,"value":"dataPath = \"https://raw.githubusercontent.com/statistikZH/decarb_monitoring/main/output/A2_data.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"wrapper = {\n leuElements;\n leuTheme;\n return render(\n lit.html`\n

${titel}

${untertitel}

\n \n

\n ${viewof lineChartTooltip}\n ${viewof lineChart}\n

\n \n

Datenquelle: ${quelle} \n

\n \n

\n\n

\n ${viewof leuDropdown}\n

\n `,\n this\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":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":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":"$31","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":true,"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 d3.max(selectedRegions, (d) => d3.max(d.values.map((v) => v.value))),\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":"yAxis = (svg) => {\n const dimensions = lineChartDimensions;\n const numOfTicks = yScale.domain()[1];\n\n const axisHeight = dimensions.boundedHeight;\n const pixelsPerTick = 75;\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) => (d * 100).toLocaleString(\"de-CH\") + \" %\")\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.axis.ticklabel)\n )\n .call((g) => {\n g.selectAll(\".tick line\").attr(\"stroke\", ZHColors.axis.gridline);\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.axis.axislabel);\n\n container.append(\"path\").attr(\"d\", path).attr(\"transform\", \"scale(0.75)\");\n\n container\n .append(\"text\")\n .text(unit)\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":"$32","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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$34","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 Daten als CSV herunterladen\n \n createPNG({\n containerId: contentId.id,\n padding: \"10px\",\n filename: `${titel}.png`\n })}>Grafik als PNG herunterladen\n\n`","pinned":false,"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":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":"/*\n * Group by Gebiet and rename properties\n */\nselectedRegions = fetchedData\n .reduce((groups, d) => {\n const group = groups.find((g) => g.name === d.Indikator_Name);\n\n const currentValue = {\n value: d.Wert,\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.Indikator_Name,\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 colors.Variable[name];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"getRegionSymbol = (name) => {\n return symbols.Variable[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":"// Sets the locale\nlocaleNumber = {\n const res = await fetch(\n \"https://cdn.jsdelivr.net/npm/d3-format@3/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) => lit.html`${localeNumber.format(\".1f\")(v * 100)} %`","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(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":382,"value":"symbols = ({\n Variable: {\n \"Biogener Anteil im verbrannten Abfall\": d3.symbolCircle\n }\n})","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":243,"value":"colors = ({\n Variable: {\n \"Biogener Anteil im verbrannten Abfall\": ZHColors.chart.grassgreen\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3713,"value":"htl.html`\n

${key}

\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 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":"$35","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":3434,"value":"fetchedData = d3.csv(dataPath, (d) => ({\n ...d,\n Wert: Number.parseFloat(d.Wert),\n Jahr: +d.Jahr\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3829,"value":"bereiche = [...new Set(fetchedData.map((d) => d.Indikator_Name))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4075,"value":"titel = {\n const titel = [...new Set(fetchedData.map((d) => d.Indikator_Name))];\n const gebiet = [...new Set(fetchedData.map((d) => d.Gebiet))];\n\n return `${titel}, ${gebiet}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4079,"value":"untertitel = `In ${unit}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3861,"value":"unit = [...new Set(fetchedData.map((d) => d.Einheit))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4077,"value":"quelle = [...new Set(fetchedData.map((d) => d.Datenquelle))]","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":3654,"value":"yearExtent = d3.extent(fetchedData, (d) => d.Jahr)","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4029,"value":"import { createPNG } from \"@statistikzh/shared-imports\"","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4187,"value":"leuVersion = \"^0.9\"","pinned":true,"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":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":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"