2b:null 2c:["$","title",null,{"children":"2 | Prozentuale Verteilung der Klienten auf die Pflegebedarfsstufen | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T530,// Configuration CONFIG = ({ urls: { ogd: "https://daten.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00003102_00006603.csv" }, colors: { "Stufe 00-03": ZHColors.chart.lightviolet, "Stufe 04-06": ZHColors.chart.darkviolet, "Stufe 07-09": ZHColors.chart.orange, "Stufe 10-12": ZHColors.chart.brown }, symbols: { "Stufe 00-03": d3.symbolCircle, "Stufe 04-06": d3.symbolDiamond2, "Stufe 07-09": d3.symbolTriangle2, "Stufe 10-12": d3.symbolSquare2 }, order: { "Stufe 00-03": 0, "Stufe 04-06": 1, "Stufe 07-09": 2, "Stufe 10-12": 3 }, unit: { long: "Prozent (%)", short: "%" }, defaults: { metric: "Prozent", tooltipMaxWidth: 280 }, metadata: { title: "Prozentuale Verteilung der Bewohnerinnen und Bewohner auf die Pflegebedarfsstufen", remark: "Die Einstufung bezieht sich jeweils auf den Stand am 31.12. des entsprechenden Jahres. Akut- und Übergangspflege (AÜP) sowie Tages- oder Nachtstruktur sind nicht berücksichtigt.", source: "Statistik der sozialmedizinischen Institutionen (SOMED)", datasetUrl: "https://datenkatalog.statistik.zh.ch/datasets/3102@gesundheitsdirektion-kanton-zuerich", ressourceUrl: "https://daten.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00003102_00006603.csv" } })32:T4cf,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 = groupedData; // If the tooltip hangs to the right: Highest x value before the tooltip will be cut off const maxXRight = width - CONFIG.defaults.tooltipMaxWidth; // If the tooltip hangs to the left: Lowest x value before the tooltip will be cut off const minXLeft = CONFIG.defaults.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: getColor(region.name) })); return createTooltip( { dataPoints: [{ label: "Jahr", value: year }, ...dataPoints], visible, x: `calc(${xPos})`, y: `calc(${dimensions.margin.top}px - 100% - .25rem)` }, this ); }33:Tfb5,viewof chartLegend = (() => { const showTooltip = (e) => { const tooltip = e.currentTarget.querySelector(".tooltip-box"); if (tooltip) { tooltip.style.display = "block"; // Prüfe, ob Tooltip über rechten Rand hinausragt const tooltipRect = tooltip.getBoundingClientRect(); const containerRect = tooltip .closest(".container") ?.getBoundingClientRect() || { right: window.innerWidth }; if (tooltipRect.right > containerRect.right) { // Positioniere von rechts statt von der Mitte tooltip.style.left = "auto"; tooltip.style.right = "0"; tooltip.style.transform = "none"; // Pfeil auch anpassen const arrow = tooltip.querySelector(".tooltip-arrow"); if (arrow) { arrow.style.left = "auto"; arrow.style.right = "10px"; arrow.style.transform = "none"; } } } }; const hideTooltip = (e) => { const tooltip = e.currentTarget.querySelector(".tooltip-box"); if (tooltip) { tooltip.style.display = "none"; // Reset Positionierung tooltip.style.left = "50%"; tooltip.style.right = "auto"; tooltip.style.transform = "translateX(-50%)"; const arrow = tooltip.querySelector(".tooltip-arrow"); if (arrow) { arrow.style.left = "50%"; arrow.style.right = "auto"; arrow.style.transform = "translateX(-50%)"; } } }; return lit.html`

{ if (!selectedLegendItem) { setValue(typ, viewof highlightedLegendItem); } }} @pointerleave=${() => setValue(null, viewof highlightedLegendItem)} > ${htmlLegendSymbol(typ)} ${typ}

{ showTooltip(e); const icon = e.currentTarget.querySelector("leu-icon"); if (icon) { icon.style.color = ZHColors.black[100]; } }} @mouseleave=${(e) => { hideTooltip(e); const icon = e.currentTarget.querySelector("leu-icon"); if (icon) { icon.style.color = ZHColors.black[60]; } }} >

`; })()34:T4cb,yAxis = (svg) => { const dimensions = lineChartDimensions; const numOfTicks = yScale.domain()[1]; const axisHeight = dimensions.boundedHeight; // const pixelsPerTick = 50; 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) => `${localeDeCH.format(".0f")(d)} %`) .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.unit.long) .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("10px", "12px")) ) .call((g) => { g.selectAll(".domain").remove(); }); }35: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("10px", "12px")) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.axis.tickline); }) .call((g) => { g.selectAll(".domain").attr("stroke", ZHColors.axis.axisline); }); }36:Tb95,createLines = (svg) => { const dimensions = lineChartDimensions; const container = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left} ${dimensions.margin.top})` ); const isActive = (typ) => activeLegendItem === typ; const hasActiveItem = activeLegendItem !== null; const isSelected = (name) => groupedData.some((r) => r.name === name); const regionContainers = container .selectAll("g.region") .data(groupedData) .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", (d) => highlightedLegendItem !== null && highlightedLegendItem === activeLegendItem ? d.name === highlightedLegendItem ? 2 : 1.5 : 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) => highlightedLegendItem !== null && highlightedLegendItem === activeLegendItem ? d.name === highlightedLegendItem ? d3.symbol().size(68).type(CONFIG.symbols[d.name])() : d3.symbol().size(36).type(CONFIG.symbols[d.name])() : 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 = ({ highlightedLegendItem }) => { regionContainers.attr("opacity", (d) => // The appearance only has to change when the highlighted // region is also selected. Otherwise all lines will be greyed out. highlightedLegendItem !== null && highlightedLegendItem === activeLegendItem ? d.name === highlightedLegendItem ? 1 : 0.2 : 1 ); /* * Raise the highlighted region to the top * so that no other transparent line is overlapping it. */ regionContainers .filter((d) => highlightedLegendItem ? d.name === highlightedLegendItem : false ) .raise(); }; return updateLines; }37:Tac3,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(groupedData) .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) => { // Do nothing when no region is selected and the reference data is hidden if (groupedData.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); }); }38:Tc47,39:T9a9,async function loadAndProcessData() { // 1. Daten laden – "bezirk" wird zusätzlich gebraucht, um die // Aggregatzeilen der Datei sauber auseinanderzuhalten. const rawData = await d3.csv(CONFIG.urls.ogd, (d) => ({ jahr: +d.jahr, bezirk: d.bezirk, altersgruppe: d.altersgruppe, pflegebedarfsstufe: d.pflegebedarfsstufe, anzahl: +d.anz_bewohnende })); console.log("Rohdaten geladen:", rawData.length, "Einträge"); // 2. Auf EINE Schnittebene reduzieren. // Die Datei enthält drei sich überlappende Auswertungen derselben // Personen. Ohne diesen Filter wird jede Person mehrfach gezählt. // "Alle Bezirke" = Kantonstotal, aufgeschlüsselt nach Altersgruppe. const gefiltert = rawData.filter( (d) => d.bezirk === "Alle Bezirke" && d.pflegebedarfsstufe !== "AÜP" && d.pflegebedarfsstufe !== "Alle Stufen" ); console.log("Nach Filter:", gefiltert.length, "Einträge"); // 3. Nach Jahr und Pflegebedarfsstufe gruppieren und summieren const grouped = d3.group( gefiltert, (d) => d.jahr, (d) => d.pflegebedarfsstufe ); const aggregated = []; const yearTotals = new Map(); for (const [jahr, stufenMap] of grouped) { let yearTotal = 0; for (const [stufe, records] of stufenMap) { const sum = d3.sum(records, (d) => d.anzahl); aggregated.push({ jahr: jahr, pflegebedarfsstufe: stufe, anzahl: sum, prozentanteil: 0 // wird gleich berechnet }); yearTotal += sum; } yearTotals.set(jahr, yearTotal); } // 4. Prozentanteile berechnen aggregated.forEach((d) => { const yearTotal = yearTotals.get(d.jahr); d.prozentanteil = yearTotal > 0 ? (d.anzahl / yearTotal) * 100 : 0; }); // 5. Nach Jahr und Pflegebedarfsstufe sortieren const processedData = aggregated.sort((a, b) => { if (a.jahr !== b.jahr) { return a.jahr - b.jahr; } return a.pflegebedarfsstufe.localeCompare(b.pflegebedarfsstufe); }); // 6. Pflegebedarfsstufen umbenennen const mapping = { "00-03": "Stufe 00-03", "04-06": "Stufe 04-06", "07-09": "Stufe 07-09", "10-12": "Stufe 10-12" }; const renamedData = processedData.map((d) => ({ ...d, pflegebedarfsstufe: mapping[d.pflegebedarfsstufe] || d.pflegebedarfsstufe })); // console.log VOR dem return – sonst wird die Zeile nie erreicht console.log("Verarbeitete Daten:", renamedData); return renamedData; }3a:[] 2f:{"id":"1dbaa5b8cf2ca884","slug":null,"title":"2 | Prozentuale Verteilung der Klienten auf die Pflegebedarfsstufen","thumbnail":"5b2f1f2d4cb049a03808cec4fce51e50fafdeb7f7fade56f6b7f96de81a7c352","access_level":"public","create_time":"$D2025-09-05T05:35:00.741Z","update_time":"$D2026-09-06T07:40:25.720Z","view_time":null,"first_public_time":"$D2026-09-06T07:35:57.829Z","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":4581,"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":null,"type":"notebook","body":{"title":"2 | Prozentuale Verteilung der Klienten auf die Pflegebedarfsstufen","cells":[{"id":0,"value":"# 2 | ${CONFIG.metadata.title}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"wrapper = {\n leuElements;\n leuTheme;\n sync;\n return render(\n lit.html`\n

${CONFIG.metadata.title}

\n \n

\n ${viewof chartLegend}\n

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

\n \n

Hinweis: ${\n CONFIG.metadata.remark\n }

Datenquelle: ${\n CONFIG.metadata.source\n }

\n \n

\n\n

\n ${viewof leuDropdown}\n

\n ${viewof leuButton}\n

\n `,\n this\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4357,"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":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":4440,"value":"typen = {\n const typen = Object.keys(CONFIG.order).sort(\n (a, b) => CONFIG.order[a] - CONFIG.order[b]\n );\n // console.log(\"typen\", typen);\n return typen;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4445,"value":"$33","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":"htmlLegendSymbol = (name) => {\n // console.log(\"Name:\", name);\n // console.log(\"Symbol:\", getSymbol(name));\n // console.log(\"Color:\", getColor(name));\n\n return lit.html``;\n}","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({ highlightedLegendItem });\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 1,\n Math.ceil(\n d3.max(groupedData, (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":3943,"value":"pixelsPerTick = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$35","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":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$37","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 window.open(`${CONFIG.metadata.datasetUrl}`, \"_blank\");\n }}\n >\n \n Zu den Daten\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4551,"value":"viewof leuButton = htl.html`\n createPNG({\n containerId: contentId.id,\n padding: \"10px\",\n filename: `${CONFIG.metadata.title}.png`\n })} >\n \n Grafik herunterladen\n `","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 importLeuFromCDN(\"leu-button.js\", leuVersion); // import(`https://esm.sh/@statistikzh/leu@${leuVersion}/leu-button.js`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4537,"value":"leuTheme = theme","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4545,"value":"leuFonts = fonts","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":4447,"value":"// Default für controls definieren\ndefaultMetric = CONFIG.defaults.metric","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4449,"value":"// Input mit initialem Wert\nviewof selectedMetric = Inputs.input(defaultMetric)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4451,"value":"// Highlighted Item (Hover)\nviewof highlightedLegendItem = Inputs.input(null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4453,"value":"// Selected Item (Click)\nviewof selectedLegendItem = Inputs.input(null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4455,"value":"// Aktiver Item (kombiniert highlighted und selected)\nactiveLegendItem = highlightedLegendItem || selectedLegendItem","pinned":true,"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":1076,"value":"### Derived State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"// Daten nach Pflegebedarfsstufe gruppieren\ngroupedData = processedData\n .reduce((groups, d) => {\n const group = groups.find((g) => g.name === d.pflegebedarfsstufe);\n\n const currentValue = {\n value: d.prozentanteil,\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.pflegebedarfsstufe,\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":920,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1070,"value":"getColor = (name) => {\n return CONFIG.colors[name];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"getSymbol = (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(\".1f\")(v)} ${CONFIG.unit.short}`","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":1153,"value":"defaultYear = d3.max(years)","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":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 legend: DOM.uid(\"zhstat-legend\"),\n legendSymbol: DOM.uid(\"zhstat-legend-symbol\"),\n legendItem: DOM.uid(\"zhstat-legend-item\"),\n legendItemActive: DOM.uid(\"zhstat-legend-item-active\"),\n uiElementsContainer: DOM.uid(\"zhstat-ui-elements-container\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4039,"value":"contentId = DOM.uid(\"zhstat-content\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"$38","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":4293,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4297,"value":"// Daten laden und aufberieten\nprocessedData = loadAndProcessData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3829,"value":"bereiche = [...new Set(processedData.map((d) => d.pflegebedarfsstufe))]","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 = await d3.extent([...new Set(processedData.map((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":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.19.1\"","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":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"