2b:null 2c:["$","title",null,{"children":"PKS: Häusliche Gewalt - Entwicklung Opfer von häuslicher Gewalt | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T79a,viewof chart = { const dimensions = chartDimensions; const svg = d3 .create("svg") .attr("viewBox", [0, 0, dimensions.width, dimensions.height]) .attr("aria-hidden", "true") .style("display", "block"); const container = svg .append("g") .attr( "transform", `translate(${chartDimensions.margin.left} ${chartDimensions.margin.top})` ); // Add the y-axis container.call(yAxis); // Each layer of the stack goes in a group // the group contains that layer for all categories const categories = container .selectAll("g.category") .data(series) .join("g") .attr("class", "category") .style("--_color", (d) => colors.Delikte[d.name]); categories .append("g") .selectAll("g") .data(series) .join("g") .attr("fill", (d) => colors.Delikte[d.key]) .attr("stroke", "white") .attr("stroke-width", 0.75) .selectAll("rect") .data((D) => D.map((d) => ((d.key = D.key), d))) .join("rect") .attr("x", (d) => x(d.data[0])) .attr("y", (d) => y(d[1])) .attr("width", barWidth) .attr("height", (d) => y(d[0]) - y(d[1])); // Add totals labels var label_groups = svg .append("g") .attr( "transform", `translate(${chartDimensions.margin.left} ${chartDimensions.margin.top})` ) .selectAll("g") .data(series) .enter() .append("g") .attr("fill", (d) => colors.Delikte[d.name]); var labels = label_groups .selectAll("g") .data((d) => d) .enter() .append("g"); labels .append("text") .attr("text-anchor", "middle") .attr("x", (d) => x(d.data[0])) .attr("y", (d) => y(d[1])) .attr("dx", barWidth / 2) .attr("dy", "1rem") .style("fill", "white") .style("font-family", ZHFonts.regular) .style("font-size", ".75rem") .text((d) => formatValue(d[1] - d[0])); // Append the vertical axis. svg.call(xAxis); return svg.node(); }32:T5a9,yAxis = (svg) => { const dimensions = chartDimensions; const numOfTicks = y.domain()[1]; const axisHeight = dimensions.boundedHeight; const pixelsPerTick = 50; const numberOfTicksTarget = Math.max( 1, Math.floor(axisHeight / pixelsPerTick) ); svg .append("g") .attr("transform", `translate(${dimensions.margin.left},0)`) // .attr("transform", `translate(${dimensions.margin.left}, 0)`) .call( d3 .axisLeft(y) .tickSize(-chartDimensions.width + margin.left + margin.right) .tickFormat((d) => d.toLocaleString("de-CH")) .ticks(numberOfTicksTarget) ) .call((g) => g .selectAll(".tick text") .attr("dx", "-0.5em") .attr("fill", ZHColors.axis.ticklabel) ) .call( (g) => g .selectAll(".tick line") .attr("stroke", (d) => y.domain()[0] !== 0 && d === 0 ? ZHColors.chart.black80 : ZHColors.axis.tickline ) // Higlight the 0 line if it's not the domain start ) .call((g) => { g.selectAll(".domain").remove(); }) // add axis label .call((g) => g .append("g") .attr("fill", ZHColors.axis.axislabel) .append("text") .text(unit) .attr("text-anchor", "start") .style("font-size", "12px") .attr("x", -chartDimensions.margin.left - 10) .attr("y", "10") ); }33:T465,derivedData = d3 .csv(dataPath) .then((data) => { // Daten aufbereiten const aufbereiteteData = data.map((d) => ({ ...d, year: new Date(`${d.Ausgangsjahr}-01-01`), Ausgangsjahr: d.Ausgangsjahr, // Jahr als separate Variable behalten Anzahl: d.Anzahl === "NA" ? 0 : parseInt(d.Anzahl), Gewaltkategorie: d.Gewaltkategorie === "HG" ? "Im häuslichen Umfeld" : "Im ausserhäuslichen Umfeld" })); return aufbereiteteData; }) .then((aufbereiteteData) => { // Hier kannst du deine groupBy-Operation machen console.log(aufbereiteteData); // Gruppierung (falls du sie direkt hier machen willst): const gruppiert = groupBy( ["year", "Ausgangsjahr", "Gewaltkategorie"], summarize({ total: sum("Anzahl") }) )(aufbereiteteData); return gruppiert; }) .catch((error) => { console.error("Fehler beim Laden der Daten:", error); }) // tidy( // fetchedData, // // filter((d) => d.Gewaltkategorie == "Im häuslichen Umfeld"), // groupBy(["year", "Gewaltkategorie"], summarize({ total: sum("Anzahl") })) // )34:[] 2f:{"id":"a3e36bb170bb9b63","slug":null,"title":"PKS: Häusliche Gewalt - Entwicklung Opfer von häuslicher Gewalt","thumbnail":"71e48c6b4fad7259036380785df93432ff6b841613219a0220167a586386e2b6","access_level":"public","create_time":"$D2023-11-06T13:31:44.200Z","update_time":"$D2025-10-29T08:21:02.761Z","view_time":null,"first_public_time":"$D2024-03-01T12:38:51.199Z","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":691,"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":4,"collection":null,"type":"notebook","body":{"title":"PKS: Häusliche Gewalt - Entwicklung Opfer von häuslicher Gewalt","cells":[{"id":0,"value":"# PKS: Häusliche Gewalt - Entwicklung Opfer von häuslicher Gewalt\n\nDatenquelle: [Opfer von Gewaltstraftaten nach Geschlecht, Altersklasse, Gewaltkategorie und Qualifikation](${dataPath})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"wrapper = {\n return render(\n lit.html`\n

${titel}

${subtitel}

\n ${viewof chartLegend}\n

\n ${viewof chart}\n

Datenquelle: ${source}. \n Daten zur Grafik herunterladen.\n

\n `,\n this\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"viewof chartLegend = {\n return lit.html`\n

\n ${htmlSectorSymbol(kategorie.name)}\n ${kategorie.name}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"### Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"### Chart components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"margin = ({ top: 30, right: 20, bottom: 25, left: 17 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"chartDimensions = {\n return {\n width,\n height: height,\n margin: margin,\n boundedWidth: width - margin.left - margin.right,\n boundedHeight: height - margin.top - margin.bottom\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"barWidth = x.bandwidth()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"// Jahre extrahieren und aufsteigend sortieren - mit Datum-Objekt\nyears = [...new Set(derivedData.map((d) => d.year))].sort((a, b) =>\n d3.ascending(a, b)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// x encodes the category class.\nx = d3\n .scaleBand()\n .domain(years)\n .rangeRound([\n chartDimensions.margin.left,\n chartDimensions.width - chartDimensions.margin.right\n ])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"yDomain = {\n const maxYValue = Math.max(\n 0,\n Math.ceil(d3.max(series, (d) => d3.max(d, (d) => d[1])))\n );\n const minYValue = Math.min(\n 0,\n Math.floor(d3.min(series, (d) => d3.min(d, (d) => d[0])))\n );\n\n return [minYValue, maxYValue];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"y = d3\n .scaleLinear()\n .domain(yDomain)\n .nice()\n .range([chartDimensions.boundedHeight, chartDimensions.margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"xAxis = (svg) => {\n const dimensions = chartDimensions;\n\n svg\n .append(\"g\")\n .attr(\n \"transform\",\n `translate(${dimensions.margin.left} ${\n dimensions.height - dimensions.margin.bottom\n })`\n )\n .call(\n d3\n .axisBottom(x)\n .tickSize(8)\n .tickSizeOuter(0)\n .tickFormat((d) => d.getFullYear())\n )\n .call((g) =>\n // Adding gridlines\n g\n .selectAll(\".tick text\")\n .attr(\"fill\", ZHColors.axis.ticklabel)\n .attr(\"y\", 16)\n .style(\"font-size\", responsiveValue(\"10px\", \"12px\"))\n )\n .call((g) => {\n g.selectAll(\".tick line\")\n .attr(\"opacity\", (d) => (d % 1 === 0 ? 1 : 0))\n .attr(\"stroke\", ZHColors.axis.tickline);\n })\n .call((g) => {\n g.selectAll(\".domain\").attr(\"stroke\", ZHColors.axis.axisline);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"### Color & styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":616,"value":"colors = ({\n Delikte: {\n \"Im ausserhäuslichen Umfeld\": ZHColors.chart.blue,\n \"Im häuslichen Umfeld\": ZHColors.chart.darkblue\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"symbols = ({\n Delikte: {\n \"Im ausserhäuslichen Umfeld\": d3.symbolSquare,\n \"Im häuslichen Umfeld\": d3.symbolSquare\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"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":606,"value":"formatValue = (v) =>\n isNaN(v) ? \"keine Angaben\" : `${localeDeCH.format(\",.0f\")(v)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"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":77,"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":384,"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":381,"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 visuallyHidden: DOM.uid(\"zhstat-visually-hidden\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"htmlSectorSymbol = (name) =>\n lit.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"getSectorSymbol = (name) => {\n return symbols.Delikte[name];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"getSectorColor = (name) => {\n return colors.Delikte[name];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":598,"value":"// Defined sort order based on the order of the drive types\nsortByObject = category.reduce((obj, item, index) => {\n return {\n ...obj,\n [item]: index\n };\n}, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"dataPath = \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00001202_00005085.csv\"\n// \"https://www.dev.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00005620_00004568.csv\" // Test-Version der Daten auf Dev","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"/*\n * Group by Sektor and rename properties\n */\ngroupedByCategory = derivedData\n .sort(\n (a, b) => sortByObject[a.Gewaltkategorie] - sortByObject[b.Gewaltkategorie]\n )\n .reduce((groups, d) => {\n const group = groups.find((g) => g.name === d.Gewaltkategorie);\n\n const currentValue = {\n value: d.total,\n year: d.year,\n sector: d.Gewaltkategorie\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.Gewaltkategorie,\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((d) => d3.descending(d.sector))\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"series = {\n const data = derivedData.sort(\n (a, b) => sortByObject[a.Gewaltkategorie] - sortByObject[b.Gewaltkategorie]\n );\n return d3\n .stack()\n .keys(d3.union(derivedData.map((d) => d.Gewaltkategorie))) // distinct seriesHG keys, in input order\n .value(([, D], key) => D.get(key).total)(\n // get value for each seriesHG key and stack\n d3.index(\n derivedData,\n (d) => d.year,\n (d) => d.Gewaltkategorie\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"category = {\n const gewaltkategorien = [\n ...new Set(derivedData.map((d) => d.Gewaltkategorie))\n ];\n\n return gewaltkategorien.reverse();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"yearExtent = d3.extent(derivedData, (d) => d.Ausgangsjahr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"### Chart description","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":577,"value":"titel = \"Opfer von Gewaltdelikten\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"subtitel = `Zwischen ${yearExtent.join(\" und \")}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"unit = \"Anzahl Opfer\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"source = \"Kantonspolizei Zürich, Polizeiliche Kriminalstatistik (PKS)\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"### Imports & libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":570,"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":106,"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"},{"id":16,"value":"import { tidy, filter, groupBy, mutate, summarize, sum } from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"