2d:null 2e:["$","title",null,{"children":"Verkehrsunfallstatistik - V2 | Matthias Mazenauer | Observable"}] 33:T49f,md`# Verkehrsunfallstatistik - V2 STATZH interne Ablage: *L: > STAT > 08_DS> 06_Diffusion > OGD >Datenproduzenten_ZH > KAPO* Datensatz auf opendata.swiss: dataset/verkehrsunfallstatistik-des-kantons-zuerich 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. **Hinweis zur Unfallschwerekategorie:** 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.`34:T11b9,stackedBarchart = { const margin = { top: 30, right: 20, bottom: 40, left: 40 }; const height = 550; 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, width - 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) .tickSize(-width + 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") .attr("font-weight", "bold") .text(`↑ Anzahl Unfälle`) ); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .text(""); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const source = "Quelle: Verkehrsunfallstatistik, Kantonspolizei Zürich"; // Adding source svg .append('text') .attr('y', height - 20) .attr('dy', '1.2em') .attr('x', width - margin.right) .text(source) .attr('font-size', '11px') .attr('text-anchor', 'end') .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style('fill', '#333'); // 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(b.value, a.value))) .enter() .append("g") .attr("fill", d => color(d.key)) .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; 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); return svg.node(); }35:Td4e,chartAnnualSplit = { 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.2) * 30) + margin.top + margin.bottom; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const x = d3 .scaleLinear() .domain([0, d3.max(data, d => +d.count)]) .nice() .range([margin.left, width - 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(width / 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", "bold") .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", "black") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .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) < 200) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start") ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }36:[{"id":"0d7107b10a0a8529171492832cb03502d2c669ccae387461c82516ced0f93c2bc3e47eda0790754d6e45fc82838f58de454070f2488b4e385688fd214383ad28","href":"https://static.observableusercontent.com/files/0d7107b10a0a8529171492832cb03502d2c669ccae387461c82516ced0f93c2bc3e47eda0790754d6e45fc82838f58de454070f2488b4e385688fd214383ad28","name":"verkehrsunfallstatistik.csv","type":"text/csv","lastModified":1614672115136.983,"size":140929},{"id":"e8904fdcfc79c0fb1b80b71564a3ad8c846dc1e144248ea096d7f71764d47c0d8ee8b06a9a3cd24f0b21dbe596713220c2930a28c61329ff6b4c59df407a14f1","href":"https://static.observableusercontent.com/files/e8904fdcfc79c0fb1b80b71564a3ad8c846dc1e144248ea096d7f71764d47c0d8ee8b06a9a3cd24f0b21dbe596713220c2930a28c61329ff6b4c59df407a14f1","name":"verkehrsunfallstatistik_wider.csv","type":"text/csv","lastModified":1614672115136.983,"size":36393}] 31:{"id":"81a0c47ae1ec188e","slug":"verkehrsunfallstatistik-v2","title":"Verkehrsunfallstatistik - V2","thumbnail":"3723c3579f28d825ac0e3418cb388f74b2829a8b27f44ca935a8f3e733980abe","access_level":"public","create_time":"$D2021-03-02T08:01:55.136Z","update_time":"$D2021-03-02T08:01:55.136Z","view_time":null,"first_public_time":"$D2021-03-02T08:07:14.426Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a8029a35a2e0d70a","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":"starter_2024"},"version":2401,"publish_version":2401,"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":0,"collection":null,"type":"notebook","body":{"title":"Verkehrsunfallstatistik - V2","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":1974,"value":"viewof category = radio({\n title: 'Entwicklung der Anzahl Unfälle nach:',\n description: 'Bitte einen Filter wählen',\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":99,"value":"viewof legend = (function() {\n if (category === \"Unfallschwerekategorie\") {\n return swatches({\n color: d3\n .scaleOrdinal()\n .domain(severityKeys)\n .range(statColors),\n marginLeft: margin.left,\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: margin.left,\n columns: \"180px\"\n });\n }\n if (category === \"Unfallbeteiligung\") {\n return swatches({\n color: d3\n .scaleOrdinal()\n .domain(involvingKeys)\n .range(statColors),\n marginLeft: margin.left,\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":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":2041,"value":"margin = ({ top: 40, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2053,"value":"height = 550","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\n .scaleOrdinal()\n .domain(severityKeys)\n .range(statColors);\n }\n if (category === \"Unfalltyp\") {\n return d3\n .scaleOrdinal()\n .domain(accidentTypeKeys)\n .range(statColors);\n }\n if (category === \"Unfallbeteiligung\") {\n return d3\n .scaleOrdinal()\n .domain(involvingKeys)\n .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":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":1873,"value":"rawdata = d3.csvParse(\n await FileAttachment(\"verkehrsunfallstatistik_wider.csv\").text(),\n d3.autoType()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2158,"value":"rawdataYear = d3.csvParse(\n await FileAttachment(\"verkehrsunfallstatistik.csv\").text(),\n d => (\n d3.autoType(d),\n {\n year: d.year,\n bezirk: d.bezirk_name,\n indicator: d.indicator,\n category: d.category,\n count: +d.count\n }\n )\n)","pinned":false,"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(rawdata.columns.slice(18))(\n rawdata.filter(\n d => d.indicator == \"Unfallschwerekategorie\" && d.bezirk_name == district\n )\n )\n .map(d => (d.forEach(v => (v.key = d.key)), d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1987,"value":"severityKeys = rawdata.columns.slice(18)","pinned":false,"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(rawdata.columns.slice(7, 18))(\n rawdata.filter(d => d.indicator == \"Unfalltyp\" && d.bezirk_name == district)\n )\n .map(d => (d.forEach(v => (v.key = d.key)), d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1993,"value":"accidentTypeKeys = rawdata.columns.slice(7, 18)","pinned":false,"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(rawdata.columns.slice(4, 7))(\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1997,"value":"involvingKeys = rawdata.columns.slice(4, 7)","pinned":false,"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":"import {\n slider,\n button,\n select,\n text,\n radio,\n checkbox,\n number\n} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"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":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"