2d:null 2e:["$","title",null,{"children":"OJugA | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:Tbbe,viewof delikte = { //const canvas = DOM.context2d(width, height); const svgAllNo = d3 .create("svg") .attr("viewBox", [0, 0, width, height + margin.bottom + margin.top]) .attr("id", "delikte"); var svgP = svgAllNo.node(); var pt = svgP.createSVGPoint(); // Get point in global SVG space function cursorPoint(evt) { pt.x = evt.clientX; pt.y = evt.clientY; return pt.matrixTransform(svgP.getScreenCTM().inverse()); } let closeYear = 0; const svgAll = svgAllNo .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const svg = svgAll.append("g").attr("id", "svg"); const legendeGr = svg .append("g") .attr("id", "legendeGr") .attr("transform", "translate(0," + height + ")"); const mouseGr = svgAll.append("g").attr("id", "mouseGr"); const areaGr = svg.append("g").attr("id", "areaGr"); //.select("#labelT_" + i) legende(colorScale, width, legendeGr); svg .append("g") .attr("class", "y axis") .call(yAxis) .attr("transform", "translate(" + 0 + "," + 0 + ")"); svg.append("g").attr("class", "x axis").call(xAxis); areaGr .selectAll("path.area") .data(dataOrderKey) .join("path") .attr("class", "area") .attr("id", (d) => d[0].key) .attr("fill", (d) => colorScale(d[0].key)) .attr("d", area) .attr("opacity", 0.9) .attr("class", "area"); var group = ""; svg.selectAll(".area").on("mousemove", function (event, d) { let deltaX = 0; if ( document.getElementsByClassName("mdl-application__wrapper").length > 0 ) { const wrapper = document.getElementsByClassName( "mdl-application__wrapper" )["0"]; var style = wrapper.currentStyle || window.getComputedStyle(wrapper); deltaX = style.marginLeft.replace("px", ""); console.log(deltaX); } var loc = cursorPoint(event); console.log("loc"); const pointX = loc.x; console.log(pointX); console.log("pointer"); console.log(d3.pointer(event, svgAllNo.node())[0]); console.log(d); //var mouseX = d3.pointer(event, svgAllNo.node())[0]; var mouseX = d3.pointer(event)[0]; //var mouseX = event.layerX - margin.left; console.log("calculated"); console.log(pointX - margin.left + deltaX); var closeYearN = formatTime( d3.timeMonth.offset(xScale.invert(pointX - margin.left + deltaX), 6) ); console.log(closeYearN); var groupN = d3.select(this).attr("id"); if (closeYear != closeYearN || groupN != group) { closeYear = closeYearN; console.log(closeYear); group = groupN; yearLine(closeYear, "Leib und Leben", mouseGr); mouseOver(closeYear, d, d3.select(this), mouseX, width, mouseGr); } }); return Object.assign(svgAllNo.node(), { value: null, onmousemove: (event) => { event.currentTarget.value = { value: "none" }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }34:T867,mouseOver = function (closeYear, data, that, mouseX, width, container) { d3.select("#thisGr").remove(); console.log(data); d3.selectAll(".area").attr("opacity", 0.5).attr("stroke", "none"); that.attr("opacity", 1).attr("stroke", "dimgrey"); var dataY = data.filter((arr) => arr.Jahr == closeYear); console.log(dataY); var thisGr = container .append("g") .attr("id", "thisGr") .attr("pointer-events", "none"); thisGr .append("line") .attr("x1", xScale(parseTime(dataY[0].Jahr))) .attr("x2", xScale(parseTime(dataY[0].Jahr))) .attr("y1", yScale(dataY[0].value[0])) .attr("y2", yScale(dataY[0].value[1])) .attr("stroke-width", 3) .attr("stroke", "dimgrey"); thisGr .append("circle") .attr("cx", xScale(parseTime(dataY[0].Jahr))) .attr("cy", yScale(dataY[0].value[0])) .attr("r", 4) .attr("stroke", "dimgrey") .attr("fill", "white"); thisGr .append("circle") .attr("cx", xScale(parseTime(dataY[0].Jahr))) .attr("cy", yScale(dataY[0].value[1])) .attr("r", 4) .attr("stroke", "dimgrey") .attr("fill", "white"); var tippGr = thisGr .append("g") .attr( "transform", "translate(" + xScale(parseTime(dataY[0].Jahr)) + "," + yScale( dataY[0].value[0] + (dataY[0].value[1] - dataY[0].value[0]) / 2 ) + ")" ); var polyGr = tippGr.append("g"); polyGr .append("polygon") .attr("points", points) .attr("fill", "white") .attr("fill-opacity", 0.8) .attr("stroke", "dimgrey"); var textGr = tippGr.append("g"); textGr .append("text") .attr("dy", "0.35em") .attr("dx", 12) .text( dataY[0].key .replace(/_/g, " ") .replace("oe", "ö") .replace("ae", "ä") .replace("ueb", "üb") + ": " ); textGr .append("text") .attr("dy", "0.35em") .attr("dx", 175) .attr("text-anchor", "end") .text(d3.format(",")(dataY[0].value[1] - dataY[0].value[0])); if (mouseX >= width / 2) { polyGr.attr("transform", "scale(-1,-1)"); textGr.attr("transform", "translate(-188,0)"); } }35:T956,legende = function (color, width, legendeGr) { var legendItemGr = legendeGr.selectAll("g").data(colorScale.domain()); var legendItem = legendItemGr .enter() .append("g") .attr("pointer-events", "none") .attr("id", function (d, i) { return "item_" + i; }) .attr("transform", function (d, i) { return "translate(" + (i * widthNow) / colorScale.domain().length + ",0)"; }); var legendRect = legendItem .append("rect") .attr("pointer-events", "all") .attr("x", 0) .attr("y", 45) .attr("id", function (d, i) { return "labelR_" + i; }) .attr("height", 20); legendItem .append("circle") .attr("cy", 50) .attr("cx", 0) .attr("r", 5) .attr("fill", (d) => colorScale(d)); legendItem .append("text") .attr("y", 50) .attr("x", 0) .attr("dx", 10) .attr("dy", "0.4em") .attr("id", function (d, i) { return "labelT_" + i; }) .text((d) => d .replace(/_/g, " ") .replace("oe", "ö") .replace("ae", "ä") .replace("ueb", "üb") ); var bBoxMax = 50; /*d3.max(colorScale.domain(), function (d, i) { return d3 .select("#labelT_" + i) .node() .getBBox().width; }); */ var widthPerL = bBoxMax + 20; legendRect .attr("width", bBoxMax) .attr("fill", "white") .append("svg:title") .text(function (d, i) { return metaTexte[ d .replace(/_/g, " ") .replace("oe", "ö") .replace("ae", "ä") .replace("ueb", "üb") ]; }); var totalWidth = 0, counterY = 0, counterX = 0; for (let i = 0; i < colorScale.domain().length; i++) { if (totalWidth + widthPerL <= widthNow) { d3.select("#item_" + i).attr("transform", function (d, i) { return "translate(" + totalWidth + "," + counterY * 25 + ")"; }); margin.bottom = 70 + counterY * 25; totalWidth += widthPerL; counterX += 1; } else { counterX = 0; counterY += 1; totalWidth = 0; d3.select("#item_" + i).attr("transform", function (d, i) { return "translate(" + counterX * widthPerL + "," + counterY * 25 + ")"; }); margin.bottom = 70 + counterY * 25; totalWidth = widthPerL; } } d3.select("#svgAllNo").attr("height", height + margin.top + margin.bottom); }36:T5cb,yearLine = function (jahr, gruppe,container) { d3.select("#" + gruppe); d3.select("#lineGr").remove(); var lineGr = container.append("g").attr("id", "lineGr"); var thisYearD = []; var lineData = [jahr]; for (let i = 0; i < dataOrderKey.length; i++) { var jahrData = dataOrderKey[i].filter((arr) => arr.Jahr == jahr); thisYearD.push(jahrData); } var line = lineGr.selectAll(".sliderLine").data(thisYearD); line .enter() .append("line") .attr("class", "sliderLine") .attr("x1", xScale(parseTime(jahr))) .attr("x2", xScale(parseTime(jahr))) .attr("y1", (d) => yScale(d[0].value[0])) .attr("y2", (d) => yScale(d[0].value[1])) .style("stroke", "dimgrey"); line .attr("x1", xScale(parseTime(jahr))) .attr("x2", xScale(parseTime(jahr))) .attr("y1", (d) => yScale(d[0].value[0])) .attr("y2", (d) => yScale(d[0].value[1])) .attr("stroke", "dimgrey"); var circles = lineGr.selectAll(".mouseCircleG").data(thisYearD); var cGroup = circles.enter().append("g").attr("class", "cGroup"); cGroup .append("circle") .attr("cx", xScale(parseTime(jahr))) .attr("cy", (d) => yScale(d[0].value[0])) .attr("r", 2) .attr("stroke", "dimgrey") .attr("fill", "white"); cGroup .append("circle") .attr("cx", xScale(parseTime(jahr))) .attr("cy", (d) => yScale(d[0].value[1])) .attr("r", 2) .attr("stroke", "dimgrey") .attr("fill", "white"); cGroup.exit().remove(); }37:T476,38:[] 31:{"id":"0dc58fc39658ee8a","slug":"ojuga","title":"OJugA","thumbnail":"7ad841cc23596640ae540613165a22419a33a8180a057963b186408cfadeee35","access_level":"public","create_time":"$D2022-04-21T07:55:12.653Z","update_time":"$D2022-04-22T11:19:29.709Z","view_time":null,"first_public_time":"$D2022-04-21T09:40:25.005Z","has_unpublished_edits":null,"fork":{"id":"7c8f0b4ac81ee591","slug":"template","title":"Template","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"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":1580,"publish_version":1580,"role":null,"authored":false,"authors":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null}],"members":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"OJugA","cells":[{"id":0,"value":"# OJugA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"logo","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"Visualisierungen für die Oberjugendanwaltschaft","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"Statistik der Jugendstrafrechtspflege des Kantons Zürich:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"dataDownload(\n \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00000544_00001029.csv\",\n \"https://www.zh.ch/de/politik-staat/statistik-daten/datenkatalog.html#/datasets/544@oberjugendanwaltschaft-kanton-zuerich\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"margin = ({ top: 15, right: 65, bottom: 80, left: 65 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"widthNow = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"metaTexte = ({\"Vermögen\":\"Bsp. (geringfügiger) Diebstahl, Sachbeschädigung, Raub\",\n\t\"andere Vorschriften\":\"Bsp. Verstösse gegen das Personenbeförderungsgesetz, Verstösse gegen das Waffengesetz\",\n\t\"BetmG\":\"Verstösse gegen das Betäubungsmittelgesetz\",\n\t\"SVG\":\"Bsp. Verletzung der Verkehrsregeln, Entwendung eines Motorfahrzeugs zum Gebrauch\",\n\t\"Freiheit\":\"Bsp. Hausfriedensbruch, Drohung, Nötigung\",\n\t\"Leib und Leben\":\"Bsp. Tätlichkeiten, einfache und schwere Körperverletzung, Angriff\",\n\t\"übrige StGB\":\"Bsp. Urkundenfälschung, Gewalt und Drohung gegen Beamte, Hinderung einer Amtshandlung\",\n\t\"Sexuelle Integrität\":\"Bsp. sexuelle Belästigung, sexuelle Nötigung, Vergewaltigung\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"ch_DE = ({\n decimal: \".\",\n thousands: \"'\",\n grouping: [3],\n currency: [\"CHF\", \" \"],\n dateTime: \"%a %b %e %X %Y\",\n date: \"%d.%m.%Y\",\n time: \"%H:%M:%S\",\n periods: [\"AM\", \"PM\"],\n days: [\n \"Sonntag\",\n \"Montag\",\n \"Dienstag\",\n \"Mittwoch\",\n \"Donnerstag\",\n \"Freitag\",\n \"Samstag\"\n ],\n shortDays: [\"So\", \"Mo\", \"Di\", \"M\", \"Do\", \"Fr\", \"Sa\"],\n months: [\n \"Januar\",\n \"Februar\",\n \"März\",\n \"April\",\n \"Mai\",\n \"Juni\",\n \"Juli\",\n \"August\",\n \"September\",\n \"Oktober\",\n \"November\",\n \"Dezember\"\n ],\n shortMonths: [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"d3.formatDefaultLocale(ch_DE)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"sszVisColors = [\n \"#5182B3\",\n \"#B8CFE6\",\n \"#60BF97\",\n \"#B8E6D2\",\n \"#94BF69\",\n \"#CFE6B8\",\n \"#E6CF73\",\n \"#FAEBAF\",\n \"#E67D73\",\n \"#F2CEC2\",\n \"#CC6788\",\n \"#E6B7C7\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"colorScale = d3.scaleOrdinal().range(sszVisColors).domain(values)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"category = \"Jahr\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"parseTime = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"formatTime = d3.timeFormat(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"xScale = d3.scaleTime().range([0, widthNow]).domain(yearExt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"xAxis = d3\n .axisBottom()\n .scale(xScale)\n .tickSize(height + 5)\n .ticks(widthNow / 80)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"yScale = d3.scaleLinear().range([height, 0]).domain([0, xMax])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"yAxis = d3.axisLeft().scale(yScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"points = [\n [4, 0],\n [8, -4],\n [8, -12],\n [180, -12],\n [180, 12],\n [8, 12],\n [8, 4],\n [4, 0]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"area = d3\n .area()\n .x((d) => xScale(parseTime(d.Jahr)))\n .y0((d) => yScale(+d.value[0]))\n .y1((d) => yScale(+d.value[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"function mouseEvent(event, myCan) {\n console.log(\"mouseEvent\");\n const mouse = {};\n var bounds = myCan.getBoundingClientRect();\n // get the mouse coordinates, subtract the canvas top left and any scrolling\n mouse.x = event.pageX - bounds.left - scrollX;\n mouse.y = event.pageY - bounds.top - scrollY;\n console.log(mouse);\n\n // first normalize the mouse coordinates from 0 to 1 (0,0) top left\n // off canvas and (1,1) bottom right by dividing by the bounds width and height\n mouse.x /= bounds.width;\n mouse.y /= bounds.height;\n console.log(\"2\");\n console.log(mouse);\n // then scale to canvas coordinates by multiplying the normalized coords with the canvas resolution\n\n mouse.x *= widthNow;\n mouse.y *= height;\n\n console.log(\"3\");\n console.log(mouse);\n\n return mouse;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"data = d3.csv(\n \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00000544_00001029.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"dataOrder = (function () {\n let arr = [];\n for (let i = 0; i < data.length; i++) {\n let jahrObj = {};\n jahrObj.Jahr = data[i].Jahr;\n jahrObj.data = [];\n for (let j = 1; j < data.columns.length; j++) {\n let jahrObjObj = {};\n jahrObjObj.key = data.columns[j];\n jahrObjObj.Jahr = data[i].Jahr;\n jahrObjObj.value = +data[i][data.columns[j]];\n\n jahrObj.data.push(jahrObjObj);\n }\n jahrObj.data.sort((a, b) =>\n a.value > b.value ? 1 : b.value > a.value ? -1 : 0\n );\n var y1 = 0;\n var y2 = 0;\n for (let j = 0; j < jahrObj.data.length; j++) {\n y2 += jahrObj.data[j].value;\n jahrObj.data[j].y = [y1, y2];\n y1 = y2;\n }\n arr.push(jahrObj);\n }\n return arr;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"dataOrderKey = (function () {\n let arr = [];\n for (let j = 1; j < data.columns.length; j++) {\n var dataObj = {};\n dataObj.key = data.columns[j];\n dataObj.values = [];\n var valuesA = [];\n for (let i = 0; i < dataOrder.length; i++) {\n var dataObjValuesObj = {};\n for (let k = 0; k < dataOrder[i].data.length; k++) {\n if (dataOrder[i].data[k].key == data.columns[j]) {\n dataObjValuesObj.key = data.columns[j];\n dataObjValuesObj.Jahr = dataOrder[i].Jahr;\n // console.log(data0.columns[j]);\n // console.log(dataOrder[i].data[k]);\n dataObjValuesObj.value = dataOrder[i].data[k].y;\n valuesA.push(dataObjValuesObj);\n dataObj.values.push(dataObjValuesObj);\n }\n }\n }\n //dataOrderKey.push(dataObj);\n arr.push(valuesA);\n }\n return arr;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"series = d3\n .stack()\n .keys(data.columns.slice(1))\n .order(d3.stackOrderDescending)(data)\n .sort((a, b) => (a.index > b.index ? 1 : b.index > a.index ? -1 : 0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"values = series.map((a) => a.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"xMax = d3.max(data, function (d) {\n let x = 0;\n for (let i = 0; i < values.length; i++) {\n x = x + +d[values[i]];\n }\n return x;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"yearExt = d3.extent(data, function (d) {\n return parseTime(d[category]);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"md`## Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"stil","database":"$undefined"},{"id":5,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"import { style, dataDownload, logo } from \"@statistikzh/shared-imports\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"