2b:null 2c:["$","title",null,{"children":"PKS: Beschuldigte nach Altersgruppen | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T1327,plot1 = { // select a point for which to provide details-on-demand const hover = vl5 .selectPoint("hover") .encodings("x") // limit selection to x-axis value .on("mousemove") // select on mouseover events .toggle(false) // disable toggle on shift-hover .nearest(true); // select data point nearest the cursor // predicate to test if a point is hover-selected // return false if the selection is empty const isHovered = hover.empty(false); // define our base area chart const area = vl5 .markArea({ stroke: "white" }) .encode( vl5 .color() // .legend(null) .fieldN("Altersgruppe") .scale({ domain: ["Erwachsene", "Minderjährige"], range: ["#949494", "#333333"], // "#7F3DA7" reverse: false }) ); // shared base for new layers, filtered to hover selection const base = area.transform(vl5.filter(isHovered)); // mark properties for text label layers const label = { align: "left", baseline: "middle", dx: 5, dy: -5 }; const white = { stroke: "white", strokeWidth: 3 }; return ( vl5 .data(dataByAgeGroup) .transform( vl5 .calculate( "indexof(['Minderjährige', 'Erwachsene'], datum.Altersgruppe)" ) .as("stackSortOrder") ) .encode( vl5.x().fieldT("date").timeUnit("year"), vl5.y().fieldQ("Total_Straftaten").title("Beschuldigte"), vl5.order("stackSortOrder") ) .layer( area, // add a rule mark to serve as a guide line vl5 .markRule({ color: "#ffffff", strokeWidth: 2 }) .transform(vl5.filter(isHovered)) .encode( vl5.x().fieldT("date").timeUnit("year"), vl5.y({ aggregate: "sum", field: "Total_Straftaten", type: "quantitative", stack: "zero" }), vl5.order("stackSortOrder") ), // add circle marks for selected time points, hide unselected points area .markCircle({ stroke: "white", strokeWidth: 1.5, size: 60 }) .params(hover) // use as anchor points for selection .encode( vl5.y({ aggregate: "sum", field: "Total_Straftaten", type: "quantitative", stack: "zero" }), vl5.opacity().if(isHovered, vl5.value(1)).value(0), vl5.order("stackSortOrder") ), // add white stroked text to provide a legible background for labels base.markText(label, white).encode( vl5.y({ aggregate: "sum", field: "Total_Straftaten", type: "quantitative", stack: "zero" }), vl5.text().field("text"), vl5.order("stackSortOrder") ), // add text labels for stock prices base.markText(label).encode( vl5.y({ aggregate: "sum", field: "Total_Straftaten", type: "quantitative", stack: "zero" }), vl5.text().field("text"), vl5.order("stackSortOrder") ) ) .width(plotWidth(1)) // specifying responsive width .height(450) .autosize({ resize: true, type: "fit" }) // .title({ // text: "StGB: Beschuldigte nach Altersgruppe" // // , // // subtitle: "Beschuldigte, Kanton Zürich" // }) .config({ locale: { number: locale }, view: { stroke: null }, background: "#ffffff", padding: { top: 5, bottom: 5, left: 0, right: 0 }, axis: { labelFontSize: 13, labelColor: "black" }, axisX: { labelFont: ZHFonts.black, labelFontSize: 12, tickCount: { signal: Math.ceil(plotWidth(1) / 80) }, grid: true, ticks: true, title: null }, axisY: { titleAlign: "left", titleAngle: 270, titleX: -50, labelFont: ZHFonts.regular, labelFontSize: 12, titleFont: ZHFonts.regular, titleFontSize: 12, tickCount: { signal: Math.ceil(450 / 40) }, grid: false }, title: { font: ZHFonts.black, fontSize: 16, offset: 15, anchor: "start", lineHeight: 1.5, subtitleFont: ZHFonts.regular, subtitleFontSize: 14 }, legend: { orient: "top", labelFontSize: 14, labelFont: ZHFonts.regular, labelColor: "black", labelLimit: 300, columns: 1, rowPadding: 5, title: null }, text: { font: ZHFonts.regular, fontSize: 14, color: "black" } }) .render() ); }32:T11f4,plot2_smallMultiples = { const domainOrder = [ "gegen sexuelle Integrität", "gegen Leib und Leben", "gegen die Freiheit", "gegen das Vermögen", "übrige Titel StGB" ]; const colorRange = ["#00407c", "#0070b4", "#009ee0", "#7ab6e2", "#cccccc"]; const plotTop = vl .markBar() .data(dataByAgeHaupttitel.filter((d) => d.Altersgruppe == "Minderjährige")) .encode( vl.x().fieldN("date").timeUnit("year"), vl.y().fieldQ("Straftaten").title("Beschuldigte"), vl .facet() .fieldN("Haupttitel") .align("all") .columns(nCol) .title(null) .sort(domainOrder), vl .color() .fieldO("Haupttitel") .scale({ domain: domainOrder, range: colorRange }) .legend(null), vl.fillOpacity({ value: 0.8, condition: [{ selection: "hover", value: 1 }] }), vl.tooltip([ { field: "Ausgangsjahr", title: "Jahr" }, { field: "Haupttitel", title: "Haupttitel" }, { field: "Wert", title: "Beschuldigte" } ]) ) .select({ hover: { type: "single", empty: false, on: "mouseover" } }) .resolve({ scale: { x: "independent" } }) .title({ text: "Minderjährige", anchor: "start", fontSize: 14 }); const plotBottom = vl .markBar() .data(dataByAgeHaupttitel.filter((d) => d.Altersgruppe == "Erwachsene")) .encode( vl.x().fieldN("date").timeUnit("year"), vl.y().fieldQ("Straftaten").title("Beschuldigte"), // vl.column().field("Haupttitel"), vl .facet() .fieldN("Haupttitel") .align("all") .columns(nCol) .title(null) .sort(domainOrder), vl .color() .fieldO("Haupttitel") .scale({ domain: domainOrder, range: colorRange }) .legend(null), vl.fillOpacity({ value: 0.8, condition: [{ selection: "hover", value: 1 }] }), vl.tooltip([ { field: "Ausgangsjahr", title: "Jahr" }, { field: "Haupttitel", title: "Haupttitel" }, { field: "Wert", title: "Beschuldigte" } ]) ) .select({ hover: { type: "single", empty: false, on: "mouseover" } }) .resolve({ scale: { x: "independent" } }) .title({ text: "Erwachsene", anchor: "start", fontSize: 14 }); return ( vl .vconcat(plotTop, plotBottom) .spacing(50) .autosize({ type: "fit", resize: true }) // .title({ // text: "StGB: Beschuldigte nach Altersgruppe und Haupttitel" // // , // // subtitle: "Anzahl Beschuldigte, Kanton Zürich" // }) .config({ locale: { number: locale }, view: { stroke: null, width: plotWidth(3), height: 250 }, facet: { spacing: 20, tickCount: { signal: Math.ceil(plotWidth(3) / 80) } }, scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.2 }, background: "#ffffff", axis: { labelFontSize: 12, labelFont: ZHFonts.regular, labelColor: "black", titleFontSize: 12, titleColor: "black", titleFont: ZHFonts.regular }, axisX: { labelAngle: 0, labelPadding: 10, title: null, ticks: true, grid: false, labelFont: ZHFonts.regular, labelFontSize: 12, tickCount: { signal: Math.ceil(plotWidth(3) / 80) } }, axisY: { titleAlign: "left", titleAngle: 270, titleX: -50, labelFont: ZHFonts.regular, labelFontSize: 12, titleFont: ZHFonts.regular, titleFontSize: 12, tickCount: { signal: Math.ceil(250 / 40) }, grid: true }, title: { font: ZHFonts.black, fontSize: 16, offset: 15, anchor: "start", lineHeight: 1.5, subtitleFont: ZHFonts.regular, subtitleFontSize: 14 }, header: { labelOrient: "top", labelPadding: 6, labelFontSize: 12, labelFont: ZHFonts.black, labelColor: "#666666" }, legend: { orient: "top", labelFontSize: 14, labelFont: ZHFonts.regular, labelColor: "black", labelLimit: 300, columns: nCol_Legend, rowPadding: 5, title: null }, text: { font: ZHFonts.regular, fontSize: 14, color: "black" } }) .render() ); }33:T48f,shareByAgeHaupttitel = tidy( data, filter((d) => d.Ausgangsjahr >= lastYear - 9 && d.Haupttitel != "Total StGB"), // rename({ Minderjaehrige: "Minderjährige" }), rename({ Minderjährige_Total: "Minderjährige", Erwachsene_Total: "Erwachsene" }), select(["Ausgangsjahr", "Haupttitel", "Minderjährige", "Erwachsene"]), pivotLonger({ cols: ["Minderjährige", "Erwachsene"], namesTo: "Altersgruppe", valuesTo: "Straftaten" }), mutate({ Haupttitel: (d) => d.Haupttitel.split("Total ").pop(), Straftaten: (d) => +d.Straftaten }), pivotWider({ namesFrom: "Haupttitel", valuesFrom: "Straftaten" }), mutate({ total: (d) => d["gegen sexuelle Integrität"] + d["gegen Leib und Leben"] + d["gegen die Freiheit"] + d["gegen das Vermögen"] + d["übrige Titel StGB"], pct_sexInt: (d) => d["gegen sexuelle Integrität"] / d.total, pct_LeibLeben: (d) => d["gegen Leib und Leben"] / d.total, pct_Freiheit: (d) => d["gegen die Freiheit"] / d.total, pct_Vermögen: (d) => d["gegen das Vermögen"] / d.total, pct_übrige: (d) => d["übrige Titel StGB"] / d.total }) )34:[] 2f:{"id":"9d182700639be7d7","slug":null,"title":"PKS: Beschuldigte nach Altersgruppen","thumbnail":"e56afd7d33fb10342e9fd0bb05ce3e361768bb6c7a6b68f233740e2521eafd0b","access_level":"public","create_time":"$D2022-03-01T17:06:48.252Z","update_time":"$D2024-11-27T10:05:42.463Z","view_time":null,"first_public_time":"$D2022-10-26T05:57:31.357Z","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":1551,"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":2,"collection":null,"type":"notebook","body":{"title":"PKS: Beschuldigte nach Altersgruppen","cells":[{"id":0,"value":"# PKS: Beschuldigte nach Altersgruppen\n\nDatenbasis: [OGD-Ressource 'Anzahl beschuldigte Personen nach Tatbestandsgruppe im ganzen Kanton' (CSV)](https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00001202_00002319.csv)\n\nAnzahl beschuldigte Personen nach Tatbestandsgruppe (Haupttitel) des StGB seit 2009. Es wird in juristische und natürliche Personen und letztere in die Alterskategorien Minderjährig (<18) und Erwachsene unterteilt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":856,"value":"Inputs.table(dataByAgeGroup)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"Inputs.table(data.filter((d) => d.Ausgangsjahr == 2020))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"beschuldigte_titel = htl.html`\n

StGB: Beschuldigte nach Altersgruppen

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1481,"value":"plot2_titel = htl.html`\n

StGB: Beschuldigte nach Altersgruppen und Haupttitel

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"----\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"data = //updatedData\nd3.csv(\n \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00001202_00002319.csv\",\n { typed: true }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"dataByAgeGroup = tidy(\n data,\n filter((d) => d.Ausgangsjahr >= lastYear - 9 && d.Haupttitel == \"Total StGB\"),\n // rename({ Minderjaehrige: \"Minderjährige\" }),\n rename({\n Minderjährige_Total: \"Minderjährige\",\n Erwachsene_Total: \"Erwachsene\"\n }),\n select([\"Ausgangsjahr\", \"Haupttitel\", \"Minderjährige\", \"Erwachsene\"]),\n pivotLonger({\n cols: [\"Minderjährige\", \"Erwachsene\"],\n namesTo: \"Altersgruppe\",\n valuesTo: \"Straftaten\"\n }),\n groupBy(\n [\"Ausgangsjahr\", \"Altersgruppe\"],\n [summarize({ Total_Straftaten: sum(\"Straftaten\") })]\n ),\n mutate({\n date: (d) => parseTime(d.Ausgangsjahr),\n Wert: (d) => d.Total_Straftaten.toLocaleString(\"de-CH\"),\n text: (d) => d.Altersgruppe + \": \" + d.Wert\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"dataByAgeHaupttitel = tidy(\n data,\n filter((d) => d.Ausgangsjahr >= lastYear - 9 && d.Haupttitel != \"Total StGB\"),\n // rename({ Minderjaehrige: \"Minderjährige\" }),\n rename({\n Minderjährige_Total: \"Minderjährige\",\n Erwachsene_Total: \"Erwachsene\"\n }),\n select([\"Ausgangsjahr\", \"Haupttitel\", \"Minderjährige\", \"Erwachsene\"]),\n pivotLonger({\n cols: [\"Minderjährige\", \"Erwachsene\"],\n namesTo: \"Altersgruppe\",\n valuesTo: \"Straftaten\"\n }),\n mutate({\n date: (d) => parseTime(d.Ausgangsjahr),\n Haupttitel: (d) => d.Haupttitel.split(\"Total \").pop(),\n Straftaten: (d) => +d.Straftaten,\n Wert: (d) => d.Straftaten.toLocaleString(\"de-CH\")\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"dataByAgeHaupttitelWider = tidy(\n dataByAgeHaupttitel,\n select([\"Ausgangsjahr\", \"date\", \"Haupttitel\", \"Altersgruppe\", \"Straftaten\"]),\n pivotWider({\n namesFrom: \"Haupttitel\",\n valuesFrom: \"Straftaten\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"lastYear = d3.max(data, (d) => d.Ausgangsjahr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"### Code for Formatting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1043,"value":"// Sets the locale for Vega-Lite axis, but not for text in tooltip (CMS does not recognise)\nlocale = await d3.json(\n \"https://cdn.jsdelivr.net/npm/d3-format@3/locale/de-CH.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"parseTime = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"// set up our color scale\ncolor = ({\n domain: [\n \"gegen sexuelle Integrität\",\n \"gegen Leib und Leben\",\n \"gegen die Freiheit\",\n \"gegen das Vermögen\",\n \"übrige Titel StGB\"\n ],\n range: [\"#f2cc8f\", \"#81b29a\", \"#3d405b\", \"#e07a5f\", \"#f4f1de\"]\n // ,\n // legend: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"tip = (d) => `${d.Ausgangsjahr}: ${d.Gesetz_Abk}\\n${d.total} Delikte`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"plotWidth = function (nPlots) {\n if (nPlots == 1) {\n // Entspricht Mobile\n if (width < 415) {\n return width * 0.88;\n } else if (width >= 415 && width < 768) {\n return width * 0.855;\n // Entspricht Tablets\n } else if (width >= 768 && width <= 1248) {\n return width * 0.877;\n // Entspricht Laptops & Desktops\n } else {\n return 1128 * 0.9275;\n }\n } else {\n // Entspricht Mobile\n if (width < 768) {\n return (width * 1.4) / nPlots;\n // Entspricht Tablets\n } else if (width >= 768 && width <= 1248) {\n return (width * 1.6) / nPlots;\n // Entspricht Laptops & Desktops\n } else {\n return (1128 * 0.92) / nPlots;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"nCol = {\n if (width >= 1100) {\n return 3;\n } else if (width > 768 && width < 1100) {\n return 2;\n } else {\n return 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"nCol_Legend = {\n if (width >= 1100) {\n return 6;\n } else if (width < 1100 && width >= 750) {\n return 3;\n } else {\n return 2;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1544,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import {\n tidy,\n groupBy,\n select,\n mutate,\n filter,\n pivotLonger,\n summarize,\n sum,\n rename,\n pivotWider\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"import { vl as vl5 } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1302,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"