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

Opfer und Täter/Täterinnen nach Geschlecht

Anzahl der Opfer und Täter/Täterinnen von ${yearExtent.join( " bis " )}, in %

${viewof chartLegend}

Häusliches Umfeld

${viewof chartHG}

Ausserhäusliches Umfeld

${viewof chartGewalt}

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

`, this ); }32:T8f4,viewof chartGewalt = { // Create the SVG container. const svg = d3 .create("svg") .attr("width", chartDimensions.width) .attr("height", chartDimensions.height) .attr("viewBox", [0, 0, chartDimensions.width, chartDimensions.height]) .attr("style", "max-width: 100%; height: auto;"); // Append a group for each series, and a rect for each element in the series. svg .append("g") .selectAll() .data(seriesGewalt) .join("g") .attr("fill", (d) => color(d.key)) .attr("stroke", "white") .selectAll("rect") .data((D) => D.map((d) => ((d.key = D.key), d))) .join("rect") .attr("x", (d) => x(d[0])) .attr("y", (d) => y(d.data[0]) + barHeight / 2) .attr("height", barHeight) .attr("width", (d) => x(d[1]) - x(d[0])); // .append("title") // .text( // (d) => // `${d.key}, ${d.data[0]}\n${formatValue( // d.data[1].get(d.key).value // )} Straftaten` // ); // Add annotation line and text svg .append("g") .selectAll() .data( derivedData.filter((d) => d.Gewaltkategorie === "Ausserhäusliche Gewalt") ) .join("text") .attr("text-anchor", "start") .attr("x", (d) => x(d.anteil_ot) - 30) .attr("y", (d) => y(d.Geschlecht) + 5) .attr("dy", "0.35em") .text((d) => d.Geschlecht == "Männlich" ? `← ${d3.format(".0%")(d.anteil_ot)} waren Opfer und Täter` : `← ${d3.format(".0%")(d.anteil_ot)} waren Opfer und Täterin` ); svg .append("g") .selectAll() .data( derivedData.filter((d) => d.Gewaltkategorie === "Ausserhäusliche Gewalt") ) .join("line") .attr("x1", (d) => x(d.anteil_ot)) .attr("x2", (d) => x(d.anteil_ot)) .attr("y1", (d) => y(d.Geschlecht) + 15) .attr("y2", (d) => y(d.Geschlecht) + barHeight * 1.75) .attr("stroke", "#0b3536") .attr("stroke-dasharray", "1 1") .attr("stroke-width", "1px"); // Add the y-axis svg.call(yAxis); // Append the vertical axis. svg.call(xAxis); svg .selectAll("text") .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")); // Return the chart with the color scale as a property (for the legend). return Object.assign(svg.node(), { scales: { color } }); }33:T8aa,viewof chartHG = { // Create the SVG container. const svg = d3 .create("svg") .attr("width", chartDimensions.width) .attr("height", chartDimensions.height) .attr("viewBox", [0, 0, chartDimensions.width, chartDimensions.height]) .attr("style", "max-width: 100%; height: auto;"); // Append a group for each series, and a rect for each element in the series. svg .append("g") .selectAll() .data(seriesHG) .join("g") .attr("fill", (d) => color(d.key)) .attr("stroke", "white") .selectAll("rect") .data((D) => D.map((d) => ((d.key = D.key), d))) .join("rect") .attr("x", (d) => x(d[0])) .attr("y", (d) => y(d.data[0]) + barHeight / 2) .attr("height", barHeight) .attr("width", (d) => x(d[1]) - x(d[0])) .append("title") .text( (d) => `${d.key}, ${d.data[0]}\n${formatValue( d.data[1].get(d.key).value )} Straftaten` ); // Add annotation line and text svg .append("g") .selectAll() .data(derivedData.filter((d) => d.Gewaltkategorie == groups[1])) .join("text") .attr("text-anchor", "start") .attr("x", (d) => x(d.anteil_ot) - 30) .attr("y", (d) => y(d.Geschlecht) + 5) .attr("dy", "0.35em") .text((d) => d.Geschlecht == "Männlich" ? `← ${d3.format(".0%")(d.anteil_ot)} waren Opfer und Täter` : `← ${d3.format(".0%")(d.anteil_ot)} waren Opfer und Täterin` ); svg .append("g") .selectAll() .data(derivedData.filter((d) => d.Gewaltkategorie == groups[1])) .join("line") .attr("x1", (d) => x(d.anteil_ot)) .attr("x2", (d) => x(d.anteil_ot)) .attr("y1", (d) => y(d.Geschlecht) + 15) .attr("y2", (d) => y(d.Geschlecht) + barHeight * 1.75) .attr("stroke", "#0b3536") .attr("stroke-dasharray", "1 1") .attr("stroke-width", "1px"); // Add the y-axis svg.call(yAxis); // Append the vertical axis. svg.call(xAxis); svg .selectAll("text") .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")); // Return the chart with the color scale as a property (for the legend). return Object.assign(svg.node(), { scales: { color } }); }34:Te2b,function capsuleBar( _data, { barCount = 100, // amount each capsule/bar should represent roundTo = 100, // number to round the capsule then label = "label", // key for label value_one = "anteil_ot", // keys to take data from that match the sets above value_two = "anteil_opfer", // keys to take data from that match the sets above labelKey = "label", // key for label e.g. 2022 pairFill = ["#0b3536", "#0098d8"], // colours for each pair stroke_width = 10, // width of bar (they are lines/strokes) barWidth = 50, // width of capusle barPadding = 3, // spacing between bars margin = { left: 70, top: 20, right: 30, bottom: 50 } // chart margins } = {} ) { const data = _data.map((d) => { const obj = { ...d }; // have a total value of capsules/bars obj.total = barCountNum(d[value_one] + d[value_two], roundTo); // have the count of where the bars change colour obj.value_one_bars = barCountNum(d[value_one], roundTo); return obj; }); const max = d3.max(data.map((d) => d.total)); const height = max * (stroke_width * 1.4); const width = barWidth * barPadding * data.length; const w = width; // + (margin.left + margin.right); const h = height + (margin.top + margin.bottom); const yScale = d3.scaleLinear().domain([0, max]).range([height, margin.top]); const xScale = d3 .scaleLinear() // .domain(sex) .domain([0, data.length]) .range([margin.left, w]); const svg = DOM.svg(w, h); const sel = d3.select(svg); // group for each segment const join = sel .selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => { return `translate(${xScale(i)}, ${margin.top})`; }); join .selectAll("line") .data((d) => d3.range(d.total).map(() => d.value_one_bars)) .join("line") .attr("y1", (d, i) => yScale(i)) .attr("y2", (d, i) => yScale(i)) .attr("x1", 0) .attr("x2", barWidth) .attr("stroke-width", stroke_width) .attr("stroke-linecap", "round") .attr("stroke", (value_one_bars, i) => { // value_one_bars has the count where the bars change colour if (i + 1 <= value_one_bars) { return pairFill[0]; } else { return pairFill[1]; } }); // labels for columns join .append("text") .attr("x", barWidth / 2) .attr("y", height + margin.top + 8) .attr("text-anchor", "middle") .attr("fill", "#454545") .text((d) => d[label]); // pct line join .append("line") .attr("y1", (d) => yScale(d.value_one_bars - 1) - stroke_width / 2 - 1.5) .attr("y2", (d) => yScale(d.value_one_bars - 1) - stroke_width / 2 - 1.5) .attr("x1", -5) .attr("x2", barWidth + 15) .attr("stroke", pairFill[0]) .attr("stroke-dasharray", "1 1") .attr("stroke-width", "1px"); // pct labels join .append("text") .attr("x", barWidth + 20) .attr("y", (d) => yScale(d.value_one_bars - 1) - 3) .attr("text-anchor", "start") .attr("fill", pairFill[0]) .text((d) => { const pctValue = calcPctVal1(d[value_one], d[value_two]); return `${pctValue} %`; }); sel .selectAll("text") .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")); // have the total number of bars after rounding function barCountNum(value) { return roundNearestX(value) / barCount; } function roundNearestX(num, x = 100) { return Math.round(num / x) * x; } function calcPctVal1(val1, val2) { const total = val1 + val2; return Math.round((val1 / total) * 100); } return svg; }35:T6da,function circlePct( datum, { axis = [25, 50, 75, 100], size = 400, strokeAxis = "#06004f", axisLabelsFill = "#06004f", circleFill = "#D40053", valueFill = "#fff" } = {} ) { const svg = DOM.svg(width, size + 20); const sel = d3.select(svg); const sqrtScale = d3.scaleSqrt().domain([0, 100]).range([0, 200]); // append the axis circles sel .append("g") .attr("class", "axis-wrap") .selectAll("circle") .data(axis) .enter() .append("circle") .attr("class", (d) => "axis axis-" + d) .attr("r", (d) => sqrtScale(d)) .attr("cx", width / 2) .attr("cy", size / 2) .style("stroke", strokeAxis) .style("fill", "none") .style("opacity", 0.2); // append some axis labels sel .append("g") .attr("class", "axis-labels-wrap") .selectAll(".axis-labels") .data(axis) .enter() .append("text") .attr("x", width / 2) .attr("y", (d) => size / 2 + sqrtScale(d) + 5) .style("text-anchor", "end") .style("fill", axisLabelsFill) .text((d) => d + "%"); // append a circle for the value const area = sel .append("circle") .attr("class", "area-circle") .attr("cx", width / 2) .attr("cy", size / 2) .style("fill", circleFill) .style("opacity", 1) .attr("r", (d) => sqrtScale(datum)); // append it's value const areaLabel = sel .append("text") .attr("class", "area-label") .attr("x", width / 2) .attr("y", size / 2 + 12) .style("text-anchor", "middle") .style("font-size", "48px") .style("fill", valueFill) .text(datum + "%"); sel .selectAll("text") .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")); return svg; }36:[] 2f:{"id":"91d506fdf92a60b1","slug":null,"title":"PKS: Häusliche Gewalt - Opfer und Täter werden","thumbnail":"45695622e6516819f6a74b175207f627c5d663b6b2f86c518c498aa525ce7d4d","access_level":"public","create_time":"$D2023-10-26T11:19:04.579Z","update_time":"$D2025-12-17T12:44:45.352Z","view_time":null,"first_public_time":"$D2024-03-01T12:37:40.964Z","has_unpublished_edits":null,"fork":false,"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":1079,"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 und Täter werden","cells":[{"id":0,"value":"# PKS: Häusliche Gewalt - Opfer und Täter werden\n\nAusgehend von der Gesamtzahl der Opfer von 2017 bis 2022 zeigt dieses Balkendiagramm den Anteil der Personen, die nicht nur zum Opfer wurden, sondern auch Gewalt gegen andere ausübten, aufgeschlüsselt nach Geschlecht bei Gewalt und häuslicher Gewalt. Daten: [PKS, Opfer von Gewaltstraftaten nach Geschlecht, Altersklasse, Gewaltkategorie und Qualifikation](${dataPath})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"viewof chartLegend = swatches(color, {\n columns: \"175px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"### Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"### Chart components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"margin = ({\n top: 30,\n right: 20,\n bottom: 0,\n left: 70\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"barHeight = y.bandwidth() / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"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":594,"value":"y = d3\n .scaleBand()\n .domain(sex)\n // .domain(\n // d3.groupSort(\n // groupedData.sort(\n // (a, b) => sortByObject[a.Geschlecht] - sortByObject[b.Geschlecht]\n // ),\n // (D) => -d3.sum(D, (d) => d.value),\n // (d) => d.Geschlecht\n // )\n // )\n .range([\n chartDimensions.margin.top,\n chartDimensions.height - chartDimensions.margin.bottom\n ])\n .padding(0.05)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"x = {\n const xMax = d3.max(derivedData.map((d) => d.total)) * 1.02;\n\n return d3\n .scaleLinear()\n .domain([0, 1])\n .range([\n chartDimensions.margin.left,\n chartDimensions.width - chartDimensions.margin.right\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"xAxis = (svg) => {\n function formatTick(d) {\n const s = d.toLocaleString(\"de-CH\");\n return this.parentNode.nextSibling ? `\\xa0${s}` : `\\xa0${s}`;\n }\n\n const axisWidth = x.range()[1] - x.range()[0];\n const pixelsPerTick = 80;\n const numberOfTicksTarget = Math.max(\n 1,\n Math.floor(axisWidth / pixelsPerTick)\n );\n\n svg\n .append(\"g\")\n .attr(\n \"transform\",\n `translate(0,${chartDimensions.height - chartDimensions.margin.top})`\n )\n .call(\n d3\n .axisBottom(x)\n .tickSizeOuter(0)\n // .tickFormat(formatTick)\n // .ticks(numberOfTicksTarget, \"%\")\n .ticks(3, \"%\")\n )\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":641,"value":"yAxis = (svg) => {\n const axisHeight = chartDimensions.boundedHeight;\n const pixelsPerTick = 30;\n const numberOfTicksTarget = Math.max(\n 1,\n Math.floor(axisHeight / pixelsPerTick)\n );\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${chartDimensions.margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))\n .call((g) => g.select(\".domain\").remove());\n // Add axis title\n // .call((g) =>\n // g\n // .append(\"text\")\n // .attr(\"x\", -dimensions.margin.left)\n // .attr(\"y\", 10)\n // .attr(\"fill\", ZHColors.black[\"80\"])\n // .attr(\"text-anchor\", \"start\")\n // .text(einheit[0])\n // )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"// A function to format the value in the tooltip.\nformatValue = (x) => (isNaN(x) ? \"N/A\" : x.toLocaleString(\"de-CH\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"### Color & styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"color = d3\n .scaleOrdinal()\n .domain([\"Opfer und Täter/Täterin\", \"nur Opfer\"])\n .range([\"#06004f\", \"#9161f2\"])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"ZHColors = ({\n black: {\n 100: \"#000000\",\n 80: \"#333333\",\n 60: \"#666666\",\n 40: \"#949494\",\n 20: \"#cccccc\",\n 10: \"#f0f0f0\",\n 5: \"#f7f7f7\",\n 0: \"#FFFFFE\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":21,"value":"fetchedData = await d3.csv(dataPath, (d) => ({\n ...d,\n Ausgangsjahr: parseInt(d.Ausgangsjahr),\n Anzahl: parseInt(d.Anzahl),\n Gewaltkategorie:\n d.Gewaltkategorie == \"HG\" ? \"Häusliche Gewalt\" : \"Ausserhäusliche Gewalt\",\n Geschlecht: d.Geschlecht == \"M\" ? \"Männlich\" : \"Weiblich\",\n Qualifikation:\n d.Qualifikation === \"Opfer und Täter:in\"\n ? \"Opfer und Täter/Täterin\"\n : d.Qualifikation\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"yearExtent = d3.extent(fetchedData, (d) => d.Ausgangsjahr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"groups = [...new Set(fetchedData.map((d) => d.Gewaltkategorie))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"keys = {\n const qualification = [\n ...new Set(fetchedData.map((d) => d.Qualifikation).reverse())\n ];\n\n return [\"Opfer und Täter/Täterin\", \"nur Opfer\"];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"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":876,"value":"Daten nach Gewaltkategorie, Geschlecht und Qualifikation (Opfer/Täter:in) gruppieren","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1066,"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":186,"value":"groupedData = tidy(\n fetchedData,\n groupBy(\n [\"Gewaltkategorie\", \"Geschlecht\", \"Qualifikation\"],\n summarize({\n value: sum(\"Anzahl\")\n })\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"derivedData = tidy(\n groupedData,\n pivotWider({ namesFrom: \"Qualifikation\", valuesFrom: \"value\" }),\n mutate({\n total: (d) => d[keys[0]] + d[keys[1]],\n anteil_opfer: (d) => d[keys[1]] / d.total,\n anteil_ot: (d) => d[keys[0]] / d.total\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"series = d3.stack().keys(keys).offset(d3.stackOffsetExpand)(derivedData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"d3.index(\n groupedData.filter((d) => d.Gewaltkategorie == groups[1]),\n (d) => d.Geschlecht,\n (d) => d.Qualifikation\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"seriesHG = {\n const data = groupedData\n .sort((a, b) => sortByObject[a.Geschlecht] - sortByObject[b.Geschlecht])\n .filter((d) => d.Gewaltkategorie == groups[1]);\n return (\n d3\n .stack()\n .keys(keys)\n // .keys(d3.union(data.map((d) => d.Qualifikation))) // distinct seriesHG keys, in input order\n .offset(d3.stackOffsetExpand)\n .value(([, D], key) => D.get(key).value)(\n // get value for each seriesHG key and stack\n d3.index(\n data,\n (d) => d.Geschlecht,\n (d) => d.Qualifikation\n )\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"seriesGewalt = {\n const data = groupedData\n .sort((a, b) => sortByObject[a.Geschlecht] - sortByObject[b.Geschlecht])\n .filter((d) => d.Gewaltkategorie == groups[0]);\n return (\n d3\n .stack()\n .keys(keys)\n // .keys(d3.union(data.map((d) => d.Qualifikation))) // distinct seriesHG keys, in input order\n .offset(d3.stackOffsetExpand)\n .value(([, D], key) => D.get(key).value)(\n // get value for each seriesHG key and stack\n d3.index(\n data,\n (d) => d.Geschlecht,\n (d) => d.Qualifikation\n )\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"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":166,"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":23,"value":"### Imports & libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"import {\n tidy,\n select,\n filter,\n mutate,\n pivotWider,\n groupBy,\n summarize,\n median,\n leftJoin,\n sum,\n distinct,\n pivotLonger\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"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":363,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"---\n## Iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"### Iteration 1\n\n**Inspiration:**\n- https://observablehq.com/@eesur/capsule-bars?collection=@eesur/data-visuals\n- https://observablehq.com/@eesur/simple-barcode?collection=@eesur/data-visuals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"capsuleData = tidy(\n groupedData,\n pivotWider({ namesFrom: \"Qualifikation\", valuesFrom: \"value\" }),\n mutate({\n total: (d) => d[keys[0]] + d[keys[1]],\n anzahl_opfer: (d) => d[keys[1]] / 10,\n anzahl_ot: (d) => d[keys[0]] / 10,\n anteil_opfer: (d) => Math.round((d[keys[1]] / d.total) * 100),\n anteil_ot: (d) => Math.round((d[keys[0]] / d.total) * 100)\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof chart = capsuleBar(\n capsuleData, //.filter((d) => d.Gewaltkategorie == \"HG\"),\n {\n barCount: 100, // amount each capsule/bar should represent\n roundTo: 0, // number to round the capsule then\n label: \"Geschlecht\", // key for label\n facet: \"Gewaltkategorie\",\n value_one: \"anzahl_ot\", // keys to take data from that match the sets above\n value_two: \"anzahl_opfer\", // keys to take data from that match the sets above\n labelKey: \"Geschlecht\",\n facetKey: \"Gewaltkategorie\",\n pairFill: [\"#06004f\", \"#9161f2\"] // colours passed in as an array\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"---\n### Iteration 2: Circle Percentage\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"viewof range = Inputs.range(value, { label: \"Amount\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"value = [\n d3.min(capsuleData.map((d) => d.anteil_ot)),\n d3.max(capsuleData.map((d) => d.anteil_ot))\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"circlePct(range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"