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

${tooltipStyle}

Opfer von Gewalt im ausserhäuslichen und häuslichen Umfeld nach Geschlecht und Alter

Verhältnis der Opfer pro Altersjahr von ${yearExtent.join( " bis " )}, in Prozent (%)

${viewof chartLegend}

Häusliches Umfeld

${viewof chartHGTooltip} ${viewof chartHG}

Ausserhäusliches Umfeld

${viewof chartGewaltTooltip} ${viewof chartGewalt}

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

`, this ); }32:T65f,createChart = (data) => { const dimensions = chartDimensions; const svg = d3 .create("svg") .attr("viewBox", [0, 0, chartWidth, dimensions.height]) .attr("aria-hidden", "true") .style("display", "block"); svg.call(xAxis); // Append a group for each seriesHG, and a rect for each element in the seriesHG. const groups = svg .append("g") .selectAll() .data(data) .join("g") .attr("fill", (d) => colors(d.key)) .attr("fill-opacity", 1); groups .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])) .attr("height", barHeight) .attr("width", (d) => x(d[1]) - x(d[0])) .on("pointerenter", pointerenter) .on("pointermove", pointermove) .on("pointerleave", pointerleave) .selectAll("text"); groups .selectAll("text") .data((D) => D.map((d) => ((d.key = D.key), d))) .join("text") .attr("x", (d) => x(d[0])) .attr("y", (d) => y(d.data[0]) + barHeight / 2) .attr("dy", "0.3em") .attr("dx", 8) .attr("fill", ZHColors.black["0"]) .attr("pointer-events", "none") .attr("font-size", "12px") .text( (d) => (d.key === "Männlich" ? format(d[1] - d[0]) : format(d[1])) + " %" ); // .append("title") // .text( // (d) => // `${d.key}, ${d.data[0]} Jahre\nAnteil: ${ // d.key == "Männlich" ? format(d[1]) : format(1 - d[0]) // } %\n${formatValue(d.data[1].get(d.key).value)} Straftaten` // ); svg.call(yAxis); return Object.assign(svg.node(), { scales: { colors } }); }33:T5c0,xAxis = (svg) => { function formatTick(d) { const s = (d * 100).toFixed(0); return this.parentNode.nextSibling ? `\xa0${s} %` : `\xa0${s} %`; //`${format(s)} Tsd. t`; } const dimensions = chartDimensions; const axisWidth = x.range()[1] - x.range()[0]; const pixelsPerTick = 50; const numberOfTicksTarget = Math.max( 1, Math.floor(axisWidth / pixelsPerTick) ); svg .append("g") .attr( "transform", `translate(0,${dimensions.height - dimensions.margin.bottom})` ) .call( d3 .axisTop(x) .ticks(3) .tickSizeOuter(0) .tickSize( dimensions.height - dimensions.margin.bottom - dimensions.margin.top ) .tickFormat(formatTick) ) .call((g) => g .selectAll(".tick text") .attr("fill", ZHColors.black["60"]) .attr("y", 16) .style("font-size", responsiveValue("12px", "14px")) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.black["60"]); }) .call((g) => g .selectAll(".tick line") .attr("stroke-dasharray", "2,2") .attr("stroke", ZHColors.black["60"]) ) .call((g) => { g.selectAll(".domain").remove(); }); // .call((g) => // g // .append("text") // .attr("x", 0) // .attr("y", 10) // .attr("fill", ZHColors.black["60"]) // .attr("text-anchor", "start") // .text("Median") // ); }34:T574,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") // For tick values left of graph uncomment .attr("transform", `translate(${dimensions.margin.left}, 0)`) .call(d3.axisLeft(y).tickSize(8).ticks(numberOfTicksTarget)) // .call((g) => // g // .selectAll(".tick line") // .attr("stroke-dasharray", "2,2") // .attr("stroke", ZHColors.black["20"]) // ) .call((g) => g .selectAll(".tick text") // .attr("x", 0) // .attr("dy", -4) .attr("fill", ZHColors.black["60"]) .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")) ) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.black["20"]); }) .call((g) => { g.selectAll(".domain").remove(); }) .call((g) => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", ZHColors.black["60"]) .attr("text-anchor", "start") .text("Alter, in Jahren") .attr("font-family", ZHFonts.regular) .attr("font-size", responsiveValue("12px", "14px")) ); }35:[] 2f:{"id":"b39084d0274c0824","slug":null,"title":"PKS: Häusliche Gewalt - Opfer von Gewalt und häuslicher Gewalt nach Geschlecht und Altersklasse","thumbnail":"07655cfaf6a06b82f5a888041fe8df2a6e11f1886e9c1d02737df50e0c405ac8","access_level":"public","create_time":"$D2023-10-26T09:32:22.078Z","update_time":"$D2025-12-17T12:45:19.865Z","view_time":null,"first_public_time":"$D2024-03-01T12:38:07.628Z","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":1149,"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":3,"collection":null,"type":"notebook","body":{"title":"PKS: Häusliche Gewalt - Opfer von Gewalt und häuslicher Gewalt nach Geschlecht und Altersklasse","cells":[{"id":0,"value":"# PKS: Häusliche Gewalt - Opfer von Gewalt und häuslicher Gewalt nach Geschlecht und Altersklasse\n\nDieses gestapelte Balkendiagramm zeigt die Anzahl der Straftaten pro Altersjahr als Anteil nach Geschlecht differenziert nach Gewalt und häuslicher Gewalt. Diese Darstellungsform ermöglicht einen Vergleich der Geschlechterverteilungen, also der Betroffenheit der Geschlechter, über die Lebensphasen hinweg. Eine Beurteilung der Anzahl der Übergriffe und der Verteilung über die Altersgruppen ist daher nicht möglich.\n Daten: [PKS, Opfer und Täten von Gewalt und häuslicher Gewalt nach Geschlecht und Alter](${dataPath})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"viewof chartLegend = swatches(viewof chartHG.scales.colors, {\n columns: \"80px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"### Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":975,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"viewof chartGewalt = createChart(seriesGewalt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"viewof chartHG = createChart(seriesHG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"### Chart components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":883,"value":"chartsBreakpoint = breakpoints[2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"margin = ({\n top: 25,\n right: 30,\n bottom: 25,\n left: 55\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"height = responsiveValue(400, 400, 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"chartWidth = width >= chartsBreakpoint\n ? chartDimensions.width / 2\n : chartDimensions.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"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":133,"value":"barHeight = parseInt(y.bandwidth())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"x = d3\n .scaleLinear()\n .domain([0, d3.max(seriesHG, (d) => d3.max(d, (d) => d[1]))])\n .range([margin.left, chartWidth - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"y = d3\n .scaleBand()\n .domain([...new Set(groupedData.map((d) => d.Altersklasse))])\n .range([\n chartDimensions.margin.top,\n chartDimensions.height - chartDimensions.margin.bottom\n ])\n .padding(0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"### Tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1019,"value":"createChartTooltip = (chartCategory, root) => {\n const dimensions = chartDimensions;\n const { x, y, visible, category, dataPoints } = tooltipState;\n\n const xPosition =\n chartWidth / 2 > x ? `${x + 8}px` : `calc(-100% + ${x - 8}px)`;\n const yPosition = `calc(-100% + ${y}px)`;\n\n return createTooltip(\n {\n x: xPosition,\n y: yPosition,\n visible: visible && category === chartCategory,\n dataPoints: dataPoints ?? []\n },\n root\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"viewof chartGewaltTooltip = createChartTooltip(\"AUSG\", this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"viewof chartHGTooltip = createChartTooltip(\"HG\", this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"pointerenter = (e, d) => {\n const position = getPointerPosition(e, e.target.ownerSVGElement);\n\n setValue(\n {\n visible: true,\n x: position[0],\n y: position[1],\n category: d.data[1].get(d.key)[\"Gewaltkategorie\"],\n dataPoints: [\n ...Object.entries(d.data[1].get(d.key))\n .filter(([label]) => [\"Altersklasse\", \"Geschlecht\"].includes(label))\n .map(([label, value]) => ({\n label,\n value\n })),\n {\n label: \"Anteil\",\n value:\n (d.key === \"Männlich\" ? format(d[1] - d[0]) : format(d[1])) + \" %\"\n }\n ]\n },\n viewof tooltipState\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"pointermove = (e, d) => {\n const position = getPointerPosition(e, e.target.ownerSVGElement);\n setValue(\n {\n ...viewof tooltipState.value,\n x: position[0],\n y: position[1]\n },\n viewof tooltipState\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"pointerleave = () => {\n setValue(\n {\n ...viewof tooltipState.value,\n visible: false,\n category: null\n },\n viewof tooltipState\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"viewof tooltipState = Inputs.input({\n x: 0,\n y: 0,\n visible: false,\n dataPoints: [],\n category: null,\n})","pinned":false,"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":1107,"value":"// Defined sort order based on the order of the drive types\nsortByGender = keys.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":1130,"value":"// Defined sort order based on the order of the drive types\nsortByAge = ageClasses.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":8,"value":"fetchedData = d3.csv(dataPath)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"Inputs.table(fetchedData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Es geht um eine Unterscheidung der Anzahl Gewaltakte unterschieden nach Geschlecht und Altersklasse. Es werden Gewalt und häusliche Gewalt miteinander in Vergleich gesetzt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":651,"value":"yearExtent = d3.extent(fetchedData, (d) => d.Ausgangsjahr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"keys = {\n const sex = [...new Set(fetchedData.map((d) => d.Geschlecht))];\n\n return [\"Weiblich\", \"Männlich\"];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"Die Altersgruppen sind unterschiedlich gross, d.h. sie umfassen eine unterschiedliche Anzahl von Jahren. Um dieser Tatsache Rechnung zu tragen, werden die für jedes Geschlecht und jede Altersgruppe summierten Werte durch die Länge der Altersgruppe geteilt.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":589,"value":"ageClasses = [...new Set(fetchedData.map((d) => d.Altersklasse))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"ageLength = {\n const classes = ageClasses;\n return [\n { Altersklasse: classes[0], ak_length: 10 },\n { Altersklasse: classes[1], ak_length: 5 },\n { Altersklasse: classes[2], ak_length: 3 },\n { Altersklasse: classes[3], ak_length: 2 },\n { Altersklasse: classes[4], ak_length: 5 },\n { Altersklasse: classes[5], ak_length: 5 },\n { Altersklasse: classes[6], ak_length: 5 },\n { Altersklasse: classes[7], ak_length: 5 },\n { Altersklasse: classes[8], ak_length: 10 },\n { Altersklasse: classes[9], ak_length: 10 },\n { Altersklasse: classes[10], ak_length: 10 },\n { Altersklasse: classes[11], ak_length: 10 },\n { Altersklasse: classes[12], ak_length: 10 }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"groupedData = tidy(\n fetchedData,\n mutate({\n Geschlecht: (d) => (d.Geschlecht == \"M\" ? \"Männlich\" : \"Weiblich\")\n }),\n groupBy(\n [\"Gewaltkategorie\", \"Geschlecht\", \"Altersklasse\"],\n summarize({\n value: sum(\"Anzahl\")\n })\n ),\n leftJoin(ageLength, [\"Altersklasse\"]),\n mutate({value: d => d.value / d.ak_length}),\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"seriesHG = {\n const data = groupedData\n .sort((a, b) => sortByGender[a.Geschlecht] - sortByGender[b.Geschlecht])\n .sort((a, b) => sortByAge[a.Altersklasse] - sortByAge[b.Altersklasse])\n .filter((d) => d.Gewaltkategorie == \"HG\");\n return d3\n .stack()\n .keys(d3.union(data.map((d) => d.Geschlecht))) // 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.Altersklasse,\n (d) => d.Geschlecht\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"seriesGewalt = {\n const data = groupedData\n .sort((a, b) => sortByGender[a.Geschlecht] - sortByGender[b.Geschlecht])\n .sort((a, b) => sortByAge[a.Altersklasse] - sortByAge[b.Altersklasse])\n .filter((d) => d.Gewaltkategorie == \"AUSG\");\n return d3\n .stack()\n .keys(d3.union(data.map((d) => d.Geschlecht))) // 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.Altersklasse,\n (d) => d.Geschlecht\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"### Colors & styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"ZHSex = [ZHColors.chart.lightviolet, ZHColors.chart.aquamarine] //[\"#7F3DA7\", \"#65A73D\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"colors = d3.scaleOrdinal(keys, ZHSex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"formatValue = (x) => (isNaN(x) ? \"N/A\" : x.toLocaleString(\"de-CH\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"format = (x) => (isNaN(x) ? \"N/A\" : d3.format(\".0f\")(x * 100))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"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 <= width);\n\n return values[index];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"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":31,"value":"### Imports & libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1081,"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":33,"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":34,"value":"import {\n tidy,\n filter,\n groupBy,\n mutate,\n summarize,\n sum,\n median,\n mean,\n pivotWider,\n leftJoin,\n sort\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"import { createTooltip, tooltipStyle } from \"67f12d77e642b388\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"import { setValue, getPointerPosition } from \"@statistikzh/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"