2b:null 2c:["$","title",null,{"children":"PKS: Häusliche Gewalt - Opfer nach Geschlecht | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T607,wrapper = { return render( lit.html`

Opfer von Gewaltdelikten nach Geschlecht

Verhältnisse zwischen ${yearExtent.join( " und " )}, in Prozent (%)

Gewalt total

${viewof chartGewalt}

Gewalt im häuslichen Umfeld

${viewof chartHG}

Gewalt im ausserhäuslichen Umfeld

${viewof chartAHG}

Datenquelle: Kantonspolizei Zürich, Polizeiliche Kriminalstatistik (PKS). Daten zur Grafik herunterladen.

`, this ); }32:T987,function stackedBar( data, { barHeight = height / 2, halfBarHeight = barHeight / 2, f = d3.format(".0%"), boundedWidth = chartDimensions.boundedWidth, boundedHeight = height * 0.66 } = {} ) { const svg = d3 .create("svg") .attr("viewBox", [0, 0, chartDimensions.width, chartDimensions.height]) .attr("aria-hidden", "true") .style("display", "block"); const sel = svg.append("g"); const join = sel .selectAll("g") .data(data) .join("g") .attr("transform", `translate(0,${chartDimensions.margin.top})`); sel.call(xAxis); // stack rect for each data value join .append("rect") .attr("class", "rect-stacked") .attr("x", (d) => x(d.cumulative)) .attr("y", boundedHeight / 2 - halfBarHeight) .attr("height", barHeight) .attr("width", (d) => x(d.value) - chartDimensions.margin.left) .style("fill", (d) => colors(d.label)) .style("stroke", "white"); // add values on bar join .append("text") .attr("class", "text-value") .attr("text-anchor", "middle") .attr("fill", "white") .attr("x", (d) => x(d.cumulative) + x(d.value) / 2) .attr("y", boundedHeight / 2) .text((d) => `${f(d.percent)}`); // add the labels join .append("text") .attr("class", "text-label") .attr("text-anchor", "middle") .attr("x", (d) => x(d.cumulative) + x(d.value) / 2) .attr("y", boundedHeight / 2 - halfBarHeight * 1.1) // .attr("y", h / 2 + halfBarHeight * 1.1 + 20) .style("fill", ZHColors.black[80]) // .style("fill", (d) => colors(d.label)) .text((d) => d.label); // append ratio values // const label = join // .append("text") // .attr("class", "ratio-label") // .attr("y", boundedHeight / 2) // // .attr("dy", "0.35em") // .attr("text-anchor", "middle") // .style("fill", "white") // .attr("x", function () { // // ensure there is enough space to display numbers // if (x(data[0]) < 0.25 || x(data[0]) > chartDimensions.width - 35) { // return chartDimensions.width / 2; // } else { // return x(data[1].cumulative); // } // }) // .text( // d3.format(".0f")(data[1].cumulative * 100) + // " : " + // d3.format(".0f")(data[1].value * 100) // ); sel .selectAll("text") .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")); return svg; }33:[] 2f:{"id":"38f5aa580e809de1","slug":null,"title":"PKS: Häusliche Gewalt - Opfer nach Geschlecht","thumbnail":"d3f01e6a5d1bb29d3de87e1367b004ca3fdcfc03922a7a65373715ed39c80d7e","access_level":"public","create_time":"$D2023-11-26T11:59:24.003Z","update_time":"$D2025-06-19T13:51:55.567Z","view_time":null,"first_public_time":"$D2024-03-01T12:39:07.125Z","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":1055,"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":"PKS: Häusliche Gewalt - Opfer nach Geschlecht","cells":[{"id":0,"value":"# PKS: Häusliche Gewalt - Opfer nach Geschlecht\n\nDarstellung der Opfer nach Geschlecht, aufgeschlüsselt nach Gewalt, ausserhäuslicher Gewalt und häuslicher Gewalt.\n\n Daten: [Opfer von Gewaltstraftaten nach Geschlecht, Altersklasse, Gewaltkategorie und Qualifikation](${dataPath})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"### Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":579,"value":"viewof chartGewalt = {\n const groupData = groupDataFunc(\n derivedData.filter((d) => d.Deliktskategorie == \"Gewalt\")\n );\n return stackedBar(groupData, {\n colors: ZHGender\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"viewof chartAHG = {\n const groupData = groupDataFunc(\n derivedData.filter((d) => d.Deliktskategorie == \"Ausserhäusliche Gewalt\")\n );\n return stackedBar(groupData, {\n colors: ZHGender\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"viewof chartHG = {\n const groupData = groupDataFunc(\n derivedData.filter((d) => d.Deliktskategorie == \"Häusliche Gewalt\")\n );\n return stackedBar(groupData, {\n colors: ZHGender\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"groupDataFunc(\n derivedData.filter((d) => d.Deliktskategorie == \"Häusliche Gewalt\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"### Chart components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"margin = ({ top: 30, right: 10, bottom: 20, left: 15 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"height = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"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":128,"value":"// set up scales for horizontal placement\nx = d3\n .scaleLinear()\n .domain([0, 1])\n .range([chartDimensions.margin.left, chartDimensions.boundedWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"xAxis = (svg) => {\n svg\n .append(\"g\")\n .attr(\n \"transform\",\n `translate(0,${chartDimensions.height - chartDimensions.margin.top})`\n )\n .call(d3.axisBottom(x).tickSizeOuter(0).ticks(3, \"%\"))\n .call((g) =>\n // Adding gridlines\n g.selectAll(\".tick text\").attr(\"fill\", ZHColors.black[\"80\"]).attr(\"y\", 16)\n )\n .call((g) => g.selectAll(\"domain\").remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"### Colors & styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"ZHGender = [ZHColors.chart.lightviolet, ZHColors.chart.aquamarine] //[\"#7F3DA7\", \"#65A73D\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"colors = d3.scaleOrdinal(sex, ZHGender).unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"dataPath = \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00001202_00005085.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"fetchedData = await d3.csv(dataPath, (d) => ({\n ...d,\n Jahr: parseInt(d.Ausgangsjahr),\n Anzahl: parseInt(d.Anzahl),\n Deliktskategorie:\n d[\"Gewaltkategorie\"] == \"HG\"\n ? \"Häusliche Gewalt\"\n : \"Ausserhäusliche Gewalt\",\n Geschlecht: d.Geschlecht == \"M\" ? \"Männlich\" : \"Weiblich\"\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"yearExtent = d3.extent(fetchedData, (d) => d.Ausgangsjahr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"sex = {\n const sex = [...new Set(fetchedData.map((d) => d.Geschlecht))];\n\n return [\"Weiblich\", \"Männlich\"];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"categories = [...new Set(fetchedData.map((d) => d.Deliktskategorie))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"Die Daten werden nach Geschlecht aufgeschlüsselt als Anteile dargestellt. Es sind jedoch Daten für mehrere Jahre, beginnend mit 2017, verfügbar. Daher wird zunächst die Summe 2017-2022 pro Geschlecht berechnet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1033,"value":"// Defined sort order based on the order of the drive types\nsortByObject = sex.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":668,"value":"derivedData = tidy(\n fetchedData.sort(\n (a, b) => sortByObject[a.Geschlecht] - sortByObject[b.Geschlecht]\n ),\n select([\"Deliktskategorie\", \"Geschlecht\", \"Anzahl\"]),\n // 1. compute the total for each month and store as a property on each point\n groupBy(\n \"Deliktskategorie\",\n mutateWithSummary({ totalByCategory: sum(\"Anzahl\") })\n ),\n\n groupBy(\n [\"Deliktskategorie\", \"Geschlecht\"],\n mutateWithSummary({ totalByGender: sum(\"Anzahl\") })\n ),\n\n groupBy(\n [\"Geschlecht\"],\n totalAt([\"totalByCategory\", \"totalByGender\"], sum, {\n Deliktskategorie: \"Gewalt\"\n })\n ),\n\n // 2. compute the percent of total. use rate() to safely\n // handle division by zero and nully values.\n mutate({ percent: rate(\"totalByGender\", \"totalByCategory\") }),\n\n distinct([\"Deliktskategorie\", \"Geschlecht\"]),\n select([\n \"Deliktskategorie\",\n \"Geschlecht\",\n \"totalByGender\",\n \"totalByCategory\",\n \"percent\"\n ])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"// Format the data (instead of using d3.stack()) and filter out 0 values:\nfunction groupDataFunc(data) {\n // filter out data that has zero values\n // also get mapping for next placement\n // (save having to format data for d3 stack)\n let cumulative = 0;\n const _data = data\n .map((d) => {\n cumulative += d.percent;\n return {\n value: d.percent,\n // want the cumulative to prior value (start of rect)\n cumulative: cumulative - d.percent,\n label: d.Geschlecht,\n percent: d.percent\n };\n })\n .filter((d) => d.percent > 0);\n return _data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"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":104,"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":33,"value":"### Imports & libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"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"},{"id":462,"value":"import {\n tidy,\n select,\n filter,\n distinct,\n groupBy,\n summarize,\n sum,\n mutateWithSummary,\n mutate,\n rate,\n totalAt\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"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"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"