2d:null 2e:["$","title",null,{"children":"Verkehrsunfallstatistik, seit 2011 | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T5ad,md`# Verkehrsunfallstatistik, seit 2011 Die Verkehrsunfallstatistik des Kantons Zürich (VUSTA) enthält die durch die Kantonspolizei Zürich, die Dienstabteilung Verkehr von Zürich sowie die Stadtpolizei Winterthur erhobenen Unfallzahlen. Die Zahlen für das Jahr 2020 werden anlässlich einer Medienkonferenz am 10. März 2021 der Öffentlichkeit vorgestellt. Der Bericht zur [Verkehrsunfallstatistik ist auf der Seite des Kantons Zürich](https://www.zh.ch/de/sicherheit-justiz/sicher-unterwegs/verkehrsunfallstatistiken.html) verfügbar sowie die [offenen Behördendaten](https://datenkatalog.statistik.zh.ch/datasets/718@kantonspolizei-kanton-zuerich). Die offenen Behördendaten (OGD) auf opendata.swiss: https://opendata.swiss/de/dataset/polizeilich-registrierte-verkehrsunfalle-im-kanton-zurich Dieser Datensatz liefert die polizeilich registrierten Strassenverkehrsunfälle mit Personen- und Sachschäden im Kanton Zürich seit 2011. Zu jedem Strassenverkehrsunfall sind der Unfallort, das Jahr, der Monat, der Wochentag, die Unfallstunde, die Strassenart, der Unfalltyp, die Unfallbeteiligung und die Unfallschwerekategorie verfügbar. Die Strassenverkehrsunfallorte von Unfällen mit Personenschäden sind auch für die ganze Schweiz (https://data.geo.admin.ch/ch.astra.unfaelle-personenschaeden_alle) und das Stadtgebiet Zürich (https://data.stadt-zuerich.ch/dataset/sid_dav_strassenverkehrsunfallorte) als Open Data erhältlich. `34:T115b,stackedBarchart = { const margin = { top: 30, right: 20, bottom: 20, left: 30 }; const height = 350; const data = (function () { if (category === "Unfallschwerekategorie") { return seriesSeverityCategory; } if (category === "Unfalltyp") { return seriesAccidentType; } if (category === "Unfallbeteiligung") { return seriesInvolving; } else { return html`

Ein Fehler ist aufgetreten.

`; } })(); const x = d3 .scaleBand() .domain(yearKeys) .range([margin.left, widthNow - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d3.max(d, (d) => d[1]))]) .range([height - margin.bottom, margin.top]) .nice(); const xAxis = (g) => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) //.ticks(5) // number of how many ticks to show //.tickFormat((interval, i) => {return i % 2 !== 0 ? " " : interval;}) //only show every other value .tickSizeOuter(0) ); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(widthNow / 80) .tickSize(-widthNow + margin.left + margin.right) .tickFormat((d) => d.toLocaleString("de-CH", { thousands: "'" })) ) .call((g) => g.selectAll(".domain").remove()) .call((g) => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") ) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -margin.left) .attr("y", -margin.top + 10) .attr("text-anchor", "start") .text(`↑ Anzahl Unfälle`) ); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, height]) .style("background-color", "white"); svg.append("g").call(yAxis); const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .text(""); // Show the bars const bars = svg .append("g") .selectAll("g") // Enter in the stack data = loop key per key = group per group .data(data.sort((a, b) => d3.ascending(a.key, b.key))) .enter() .append("g") .attr("fill", (d) => color(d.key)) //.attr("stroke", "white") //.attr("stroke-width", 1) .selectAll("rect") // enter a second time = loop subgroup per subgroup to add all rectangles .data((d) => d) .enter() .append("rect") .attr("class", "bars") .attr("x", (d) => x(d.data.year)) .attr("y", (d) => y(d[1])) .attr("height", (d) => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()); function onMouseOut(d) { tooltip.text(""); d3.select(this).attr("stroke", null); return tooltip.style("visibility", "hidden"); } mutable yearSelect = 2011; function onMouseOver(d) { tooltip.text(this.dataset.tooltip); d3.select(this) .attr("stroke", (d) => color(d.key)) .attr("stroke-width", 2); // console.log("mouseover area"); console.log(d3.select(this).datum()); console.log(d); let yearSelect = d.data.year; console.log(yearSelect); mutable yearSelect = yearSelect; return tooltip .style("visibility", "visible") .attr("opacity", 1) .html( `

${d.data.year}

${d.key}: ${formatValue(d[1] - d[0])}

` ); } function onMouseMove(d) { return ( tooltip //.style("display", "inline") .style("left", d3.event.pageX - 70 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") ); //.style("top", d3.event.pageY + "px") // on mobile tooltip above touch point //.style("left", d3.event.pageX + "px"); // d3.select(this).attr("dx") + "px" } bars .on("mouseover", onMouseOver) .on("mousemove", onMouseMove) .on("mouseout", onMouseOut); svg .selectAll("text") .style("font-family", ZHFonts.regular) .attr("font-size", "0.55rem"); svg.append("g").call(xAxis); return svg.node(); }35:Te04,chartAnnualSplit = { const margin = { top: 30, right: 20, bottom: 20, left: 30 }; const data = (function () { if (category === "Unfallschwerekategorie") { return rawdataYear.filter( (d) => d.bezirk == district && d.indicator == category && d.year == yearSelect ); } if (category === "Unfalltyp") { return rawdataYear.filter( (d) => d.bezirk == district && d.indicator == category && d.year == yearSelect ); } if (category === "Unfallbeteiligung") { return rawdataYear.filter( (d) => d.bezirk == district && d.indicator == category && d.year == yearSelect ); } else { return html`

Ein Fehler ist aufgetreten.

`; } })(); data.sort(function (x, y) { return d3.ascending(x.count, y.count); }); const height = Math.ceil((data.length + 0.3) * 20) + margin.top + margin.bottom; const svg = d3.create("svg").attr("viewBox", [0, 0, widthNow, height]); const x = d3 .scaleLinear() .domain([0, d3.max(data, (d) => +d.count)]) .nice() .range([margin.left, widthNow - margin.right]); const y = d3 .scaleBand() .domain(d3.range(data.length)) .rangeRound([height - margin.bottom, margin.top]) // reversing the order of the bars .padding(0.1); const xAxis = (g) => g .attr("transform", `translate(0,${margin.top})`) .call( d3 .axisTop(x) .ticks(widthNow / 80) .tickFormat((d) => d.toLocaleString("de-CH", { thousands: "'" })) ) .call((g) => g.select(".domain").remove()); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) //.tickFormat(i => data[i].key) .tickFormat(() => "") // without tick labels .tickSize(0) //.tickSizeOuter(0) ) .call( (g) => g .select(".tick:last-of-type text") .clone() .attr( "transform", "translate(" + (-margin.left + 20) + "," + (height / 2 - margin.top / 2) + ")rotate(-90)" ) .attr("text-anchor", "start") .attr("font-weight", 400) .text(`Verteilung ` + yearSelect) // ); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("fill", (d) => color(d.category)) .attr("width", (d) => x(d.count) - x(0)) .attr("height", y.bandwidth()); svg .append("g") .attr("fill", "#332921") // #332921 (darker), #382D24 (lighter) .attr("text-anchor", "end") .selectAll("text") .data(data) .join("text") .attr("x", (d) => x(d.count)) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text( (d) => d.category + ": " + d.count.toLocaleString("de-CH", { thousands: "'" }) ) .call((text) => text .filter((d) => x(d.count) - x(0) < 250) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start") ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .selectAll("text") .style("font-family", ZHFonts.regular) .attr("font-size", "0.55rem"); return svg.node(); }36:T6fe,function swatches({ color, columns = null, format = (x) => x, swatchSize = 16, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color .domain() .map((value) => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color .domain() .map( (value) => html`${document.createTextNode(format(value))}` )}

`; }37:T511,function radio(config = {}) { let { value: formValue, title, description, submit, options, disabled } = Array.isArray(config) ? { options: config } : config; options = options.map((o) => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "radio", title, description, submit, getValue: (input) => { if (input.checked) return input.value; const checked = Array.prototype.find.call( input, (radio) => radio.checked ); return checked ? checked.value : undefined; }, form: html` ` }); form.output.remove(); return form; }38:T4df,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map((o) => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, getValue: (input) => { const selected = Array.prototype.filter .call(input.options, (i) => i.selected) .map((i) => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }39:Ta2d,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html`

` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = (e) => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3a:[] 31:{"id":"1469f88431915c11","slug":"verkehrsunfallstatistik-seit-2011","title":"Verkehrsunfallstatistik, seit 2011","thumbnail":"9e77d89dea26d55cfc0f96eefa8fa555a1fdc68d995a713811972e050b4ec509","access_level":"public","create_time":"$D2021-03-08T15:44:38.367Z","update_time":"$D2025-11-04T07:05:08.357Z","view_time":null,"first_public_time":"$D2021-03-08T15:44:57.993Z","has_unpublished_edits":null,"fork":true,"stars":1,"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":2878,"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":"Verkehrsunfallstatistik, seit 2011","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2386,"value":"mutable yearSelect = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2007,"value":"viewof district = select({\n title: \"Bezirk wählen:\",\n //description: \"Bitte einen Bezirk wählen.\",\n options: districtKeys,\n value: \"Kanton Zürich\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2639,"value":"viewof space1 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1974,"value":"viewof category = radio({\n title: 'Entwicklung der Anzahl Unfälle nach:',\n // description: 'Wählen Sie einen Filter, um die Grafik zu aktualisieren.',\n options: [\n { label: \"Unfallschwerekategorie\", value: \"Unfallschwerekategorie\" },\n { label: \"Unfalltyp\", value: \"Unfalltyp\" },\n { label: \"Unfallbeteiligung\", value: \"Unfallbeteiligung\" }\n ],\n value: \"Unfallschwerekategorie\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2641,"value":"viewof space2 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof legend = (function() {\n if (category === \"Unfallschwerekategorie\") {\n return swatches({\n color: d3\n .scaleOrdinal()\n .domain(severityKeys)\n .range(statColors2),\n marginLeft: 30,\n columns: \"180px\"\n });\n }\n if (category === \"Unfalltyp\") {\n return swatches({\n color: d3\n .scaleOrdinal()\n .domain(accidentTypeKeys)\n .range(statColors),\n marginLeft: 30,\n columns: \"225px\"\n });\n }\n if (category === \"Unfallbeteiligung\") {\n return swatches({\n color: d3\n .scaleOrdinal()\n .domain(involvingKeys)\n .range(statColors),\n marginLeft: 30,\n columns: \"180px\"\n });\n } else {\n return html`

Ein Fehler ist aufgetreten.

`;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2645,"value":"viewof space3 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2122,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1968,"value":"md`## Shared chart parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2588,"value":"widthNow = d3.min([750, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1971,"value":"color = (function () {\n if (category === \"Unfallschwerekategorie\") {\n return d3.scaleOrdinal().domain(severityKeys).range(statColors2);\n }\n if (category === \"Unfalltyp\") {\n return d3.scaleOrdinal().domain(accidentTypeKeys).range(statColors);\n }\n if (category === \"Unfallbeteiligung\") {\n return d3.scaleOrdinal().domain(involvingKeys).range(statColors);\n } else {\n return html`

Ein Fehler ist aufgetreten.

`;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1981,"value":"statColors = [\n \"#3f8ab4\",\n \"#9FCBE5\",\n \"#65A96A\",\n \"#B4DEB8\",\n \"#CEBE5B\",\n \"#F3EBAE\",\n \"#D27F46\",\n \"#F7C5A1\",\n \"#CD4B4E\",\n \"#F3A5A7\",\n \"#9479A4\",\n \"#D2C1DA\",\n \"#1B252B\",\n \"#767C7F\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2512,"value":"statColors2 = [\"#9FCBE5\", \"#3f8ab4\", \"#F3A5A7\", \"#CD4B4E\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1984,"value":"swatches({\n color: d3.scaleOrdinal(\n [\n \"1: #3F8AB4\",\n \"2: #9FCBE5\",\n \"3: #65A96A\",\n \"4: #B4DEB8\",\n \"5: #CEBE5B\",\n \"6: #F3EBAE\",\n \"7: #D27F46\",\n \"8: #F7C5A1\",\n \"9: #CD4B4E\",\n \"10: #F3A5A7\",\n \"11: #9479A4\",\n \"12: #D2C1DA\",\n \"13: #1B252B\",\n \"14: #767C7F\"\n ],\n statColors\n ),\n column: 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1961,"value":"md`## CSS Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1965,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1948,"value":"md`## Helper`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1951,"value":"formatTime = d3.timeFormat(\"%Y\") // format number to string","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1954,"value":"parseTime = d3.timeParse(\"%Y\") // format string to date (year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1957,"value":"function formatValue(value) {\n return value.toLocaleString(\"de-CH\", {\n thousands: \"'\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`## Data\n\n### Raw data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2782,"value":"rawdata = d3.csv(\n \"https://www.web.statistik.zh.ch/cms_vis/sicherheit_kapo/verkehrsunfallstatistik/kapo_vusta_wide_format.csv\"\n)\n// FileAttachment(\"kapo_vusta_wide_format_2022.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2814,"value":"rawdataLong = d3.csv(\n \"https://www.web.statistik.zh.ch/cms_vis/sicherheit_kapo/verkehrsunfallstatistik/kapo_vusta_long_format.csv\",\n { typed: true }\n)\n// FileAttachment(\"kapo_vusta_long_format_2022.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2158,"value":"rawdataYear = tidy(\n rawdataLong,\n mutate({\n year: (d) => d.year,\n bezirk: (d) => d.bezirk_name,\n indicator: (d) => d.indicator,\n category: (d) =>\n d.category === \"Velo\" ? \"Velo (inkl. E-Bikes)\" : d.category,\n count: (d) => +d.count,\n index: (d) => +d.index\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"md`### Jahre`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1895,"value":"yearKeys = d3.map(rawdata, (d) => d.year).keys() // Array.from(d3.group(rawdata, d => d.year).keys())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1878,"value":"md`### Bezirke\n Zuordnung zu einem Bezirk erfolgt gemäss der Gemeindenummer (*MunicipalityCode*) in der sich der Unfallort befindet. Zusätzlich der Bezirk *'Kanton Zürich'*, welcher das Total über die Jahre zeigt.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1879,"value":"districtKeys = d3.map(rawdata, d => d.bezirk_name).keys()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"md`### Unfallschwerekatagorie\n\n*AccidentSeverityCategory* Einteilung in Unfälle nach der Schwere des Schadens.\n\n**Heinweis zu den Daten:** Seit dem 1.7.2015 gilt eine andere Definition was als Sachschaden ans ASTRA gemeldet wird. Ab diesem Zeitpunkt wurden auch polizeilich registrierte «Bagatellunfälle» als Sachschaden gezählt. Dies erklärt den starken Zuwachs der Anzahl Unfälle in dieser Kategorie ab diesem Zeitpunkt.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"seriesSeverityCategory = d3\n .stack()\n .keys(severityKeys)(\n rawdata.filter(\n (d) =>\n d.indicator == \"Unfallschwerekategorie\" && d.bezirk_name == district\n )\n )\n .map((d) => (d.forEach((v) => (v.key = d.key)), d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1987,"value":"severityKeys = [\n ...new Set(\n rawdataYear\n .filter(\n (d) =>\n d.indicator == \"Unfallschwerekategorie\" && d.bezirk_name == district\n )\n .map((d) => d.category)\n )\n]\n\n// rawdata.columns.slice(18)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1920,"value":"md`### Unfalltyp\n\n*AccidentType_de* Der Unfalltyp bezeichnet den Verkehrsvorgang bzw. die Konfliktsituation, welche massgebend für die Entstehung des Unfalls ist.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1923,"value":"seriesAccidentType = d3\n .stack()\n .keys(accidentTypeKeys)(\n rawdata.filter(\n (d) => d.indicator == \"Unfalltyp\" && d.bezirk_name == district\n )\n )\n .map((d) => (d.forEach((v) => (v.key = d.key)), d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1993,"value":"accidentTypeKeys = [\n ...new Set(\n rawdataYear\n .filter((d) => d.indicator == \"Unfalltyp\" && d.bezirk_name == district)\n .map((d) => d.category)\n )\n]\n// rawdata.columns.slice(7, 18)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"md`### Unfallbeteiligung\n\nUnterteilt nach Beteiligung mit Füssgänger, Velo und Motorrad.\n\n*AccidentInvolvingPedestrian* Unfall mit Fussgängerbeteiligung: Strassenverkehrsunfall mit Personenschaden und Beteiligung mindestens eines Fussgängers.\n\n*AccidentInvolvingBicycle* Unfall mit Fahrradbeteiligung: Strassenverkehrsunfall mit Personenschaden und Beteiligung mindestens eines Fahrrads **(inkl. E-Bike)**. \n\n*AccidentInvolvingMotorcycle* Unfall mit Motorradbeteiligung: Strassenverkehrsunfall mit Personenschaden und Beteiligung mindestens eines Motorrads.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1931,"value":"seriesInvolving = d3\n .stack()\n .keys(involvingKeys)(\n rawdata.filter(\n (d) => d.indicator == \"Unfallbeteiligung\" && d.bezirk_name == district\n )\n )\n .map((d) => (d.forEach((v) => (v.key = d.key)), d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1997,"value":"involvingKeys = [\n ...new Set(\n rawdataYear\n .filter(\n (d) => d.indicator == \"Unfallbeteiligung\" && d.bezirk_name == district\n )\n .map((d) => d.category)\n )\n] // rawdata.columns.slice(4, 7)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1942,"value":"/*\nimport {\n slider,\n button,\n select,\n text,\n radio,\n checkbox,\n number\n} from \"@jashkenas/inputs\"\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"/*\nimport {swatches} from \"@d3/color-legend\"\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2673,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2676,"value":"entity = function(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2618,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2609,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2610,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2613,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2808,"value":"import { tidy, mutate, filter } from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2858,"value":"import { fonts as ZHFonts } from \"@statistikzh/common-styles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2317,"value":"md`## References\n\n- https://observablehq.com/@mkfreeman/d3-chart-updates-in-observable\n- https://observablehq.com/@d3/stacked-to-grouped-bars`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"