2b:null 2c:["$","title",null,{"children":"M2 - Antriebsart bei Gütertransportfahrzeugen - Fahrzeugbestand | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T82b,M2_wrapper = { return render( lit.html`

${ [...new Set(data.map((d) => d.Indikator_Name))] + ", " + gebiet[1] + " und " + gebiet[0] }

Gebiet ${viewof M2_radiosGebiet}

Dargestellter Wert ${viewof M2_radiosUnit}

Antriebsart ${viewof chartLegend}

${viewof M2_checkboxes}

${viewof M2_plot}

Hinweis zu den Daten: Die Kategorie «Lastwagen» umfasst «Lastwagen, Sattelschlepper und Sattelmotorfahrzeuge». Benzin ist bis und mit 2020 inkl. Fahrzeuge ohne Angaben zum Treibstoff. Ab 2021 werden Fahrzeuge ohne Angaben zum Treibstoff der Kategorie «Andere» zugewiesen.

Datenquelle: ${[ ...new Set(data.map((d) => d.Datenquelle)) ]}, Daten zur Grafik herunterladen

`, this ); }32:Tf61,viewof M2_plot = vl .markBar({ // yOffset: 0, // height: 25, stroke: "white", strokeWidth: 0.5 }) .data(filteredData) .transform( vl .calculate( "indexof([ 'Gas', 'Wasserstoff', 'Hybrid', 'PlugIn-Hybrid', 'Elektrisch', 'Andere'], datum.Variable)" ) .as("stackSortOrder") ) .encode( vl .y() .fieldQ("Wert") .title(null) // .title("↑ " + M2_radiosUnit) .axis({ format: M2_radiosUnit == units[1] ? "%" : null }) .scale({ domain: M2_radiosUnit == units[1] && M2_checkboxes.length == 1 ? [0, 0.25] : null }) .stack( M2_radiosUnit == units[1] && M2_checkboxes.length == 0 ? "normalize" : "zero" ), vl .x() .field("Jahr") .axis({ grid: false, domain: true, labelPadding: 8, zindex: 1 }) .title(null), vl .color({ title: "Antriebsart" }) .field("Variable") .scale(colorAntriebsart), vl.order("stackSortOrder"), vl.tooltip([ { field: "Jahr", title: "Jahr" }, { field: "Variable", title: "Antriebsart" }, { field: "Wert_txt", title: "Bestand" } ]), vl.facet({ field: "Gruppe", type: "nominal", columns: 1, spacing: 50, title: null }) ) .resolve({ scale: { y: "independent" }, axis: { x: "independent" } }) .width(plotWidth(1)) // specifying responsive width .height(350) // .title({ // text: // [...new Set(data.map((d) => d.Indikator_Name))] + // ", " + // gebiet[1] + // " und " + // gebiet[0], // subtitle: "In " + M2_radiosUnit // }) .autosize({ resize: true, type: "fit" }) .config({ view: { stroke: null }, locale: { number: localeNumber, time: localeTime }, scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.2, stroke: 2 }, background: "#ffffff", axis: { labelFont: "HelveticaNowRegular,Helvetica,sans-serif", labelFontSize: 14, labelColor: "black", titleFont: "HelveticaNowRegular,Helvetica,sans-serif", titleFontSize: 14, titleFontColor: "black" }, axisX: { tickCount: Math.ceil(width / 120), grid: false, domainColor: "lightgrey", tickColor: "lightgrey", labelAngle: 0, zindex: 1 }, axisY: { labelPadding: 10, titleAlign: "left", titleAngle: 0, titleX: 0, titleY: -20, tickCount: Math.ceil(height / 120), ticks: true, tickSize: 10, tickColor: "lightgrey", domain: false, domainColor: "lightgrey", gridColor: "lightgrey", labelLimit: 300 }, title: { font: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", fontSize: 20, offset: 15, anchor: "start", lineHeight: 5, padding: 40, subtitleFont: "HelveticaNowRegular,Helvetica,sans-serif", subtitleFontSize: 18 }, header: { labelOrient: "top", labelPadding: 40, lineHeight: 5, labelFontSize: 16, labelFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", labelColor: "black", labelAnchor: "start", titleFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", titleAnchor: "start", titleColor: "black", titleFontSize: 16 }, legend: { disable: true, orient: "top", symbolSize: 250, titleFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", titleFontSize: 14, labelFont: "HelveticaNowRegular,Helvetica,sans-serif", labelFontSize: 14, labelColor: "black", labelLimit: 300, columns: nCol, // responsive legend width padding: 10 }, text: { font: "HelveticaNowRegular,Helvetica,sans-serif", fontSize: 14, color: "black" } }) .render()33:[{"id":"b9dacc56f83282d1afcc952385247071811eb47c7addd5976dfa6d4b348a3addb32bd67951ab0a9c985071aa7b805f6ee84581f679d3e18f34ca6d2328f3a0e8","href":"https://static.observableusercontent.com/files/b9dacc56f83282d1afcc952385247071811eb47c7addd5976dfa6d4b348a3addb32bd67951ab0a9c985071aa7b805f6ee84581f679d3e18f34ca6d2328f3a0e8","name":"m2_new.csv","type":"text/csv","lastModified":1712643029930.693,"size":286690}] 2f:{"id":"fbf44bb8c0f6d6d2","slug":null,"title":"M2 - Antriebsart bei Gütertransportfahrzeugen - Fahrzeugbestand","thumbnail":"0d4e1afcffee25234c8d77436260168b44cbd4c13b5962cb76543c8f9d6651dc","access_level":"public","create_time":"$D2023-04-20T07:25:02.886Z","update_time":"$D2024-04-12T09:22:58.486Z","view_time":null,"first_public_time":"$D2023-07-06T12:35:36.501Z","has_unpublished_edits":null,"fork":{"id":"adad3d788574d450","slug":null,"title":"M1 - Antriebsart bei Personenwagen - Fahrzeugbestand","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":1811,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"5e3d875f95e398da","slug":"decarb-monitoring-awel","title":"AWEL - Decarb-Monitoring","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"M2 - Antriebsart bei Gütertransportfahrzeugen - Fahrzeugbestand","cells":[{"id":0,"value":"# M2 - Antriebsart bei Gütertransportfahrzeugen - Fahrzeugbestand\n\nDiagramm: Säulen gestapelt (absolut), Säulen gestapelt (100%)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1675,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1715,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1717,"value":"viewof chartLegend = swatches(\n d3.scaleOrdinal(colorAntriebsart.domain, colorAntriebsart.range),\n // {\n // columns: \"120px\"\n // }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"### Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1550,"value":"viewof M2_checkboxes = Inputs.checkbox(\n [\"Nur alternative Antriebsarten anzeigen\"],\n {\n label: null,\n value: [null]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"viewof M2_radiosUnit = Inputs.radio(units, {\n // label: \"Einheit wählen\",\n value: \"Prozent (%)\",\n sort: \"descending\",\n column: \"180px\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1647,"value":"viewof M2_radiosGebiet = Inputs.radio(gebiet, {\n // label: \"Einheit wählen\",\n value: \"Kanton Zürich\",\n sort: \"ascending\",\n column: \"180px\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1656,"value":"filteredData = M2_checkboxes.length > 0\n ? data.filter(\n (d) =>\n d.Variable != \"Benzin, Diesel\" &&\n d.Variable != \"Andere\" &&\n d.Variable != \"Elektrofahrzeuge (ohne Hybrid)\" &&\n d.Einheit == M2_radiosUnit &&\n d.Gebiet == M2_radiosGebiet\n )\n : data.filter(\n (d) =>\n d.Variable != \"Elektrofahrzeuge (ohne Hybrid)\" &&\n d.Einheit == M2_radiosUnit &&\n d.Gebiet == M2_radiosGebiet\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"d3.extent(filteredData, (d) => d.Wert)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1514,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"---\n## Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"margin = ({\n top: 30,\n right: 10,\n bottom: 30,\n left: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"svgHeight = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"plotWidth = function (nPlots) {\n if (nPlots == 1) {\n // Entspricht Mobile\n if (width < 415) {\n return width * 0.88;\n } else if (width >= 415 && width < 768) {\n return width * 0.855;\n // Entspricht Tablets\n } else if (width >= 768 && width <= 1248) {\n return width * 0.877;\n // Entspricht Laptops & Desktops\n } else {\n return 1128 * 0.9275;\n }\n } else {\n // Entspricht Mobile\n if (width < 768) {\n return (width * 1.4) / nPlots;\n // Entspricht Tablets\n } else if (width >= 768 && width <= 1248) {\n return (width * 1.6) / nPlots;\n // Entspricht Laptops & Desktops\n } else {\n return (1128 * 0.92) / nPlots;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"height = svgHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"y_domain = d3.extent([\n 0,\n d3.max(\n data.filter(\n (d) => d.Einheit == M2_radiosUnit && d.Variable == \"fossilfreier Treibstoff\"\n ),\n (d) => d.Wert\n ) * 1.1\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"colorAntriebsart = M2_checkboxes.length > 0\n ? {\n domain: [\"Gas\", \"Wasserstoff\", \"Hybrid\", \"PlugIn-Hybrid\", \"Elektrisch\"],\n range: [\"#7F3DA7\", \"#9572D5\", \"#00797B\", \"#0FA693\", \"#8A8C00\"]\n // range: [\"#dc7700\", \"#D93C1A\", \"#9572d5\", \"#009ee0\", \"#1a7f1f\", \"#cccccc\"]\n }\n : {\n domain: [\n \"Benzin, Diesel\",\n \"Gas\",\n \"Wasserstoff\",\n \"Hybrid\",\n \"PlugIn-Hybrid\",\n \"Elektrisch\",\n \"Andere\"\n ],\n range: [\n \"#666666\",\n \"#7F3DA7\",\n \"#9572D5\",\n \"#00797B\",\n \"#0FA693\",\n \"#8A8C00\",\n \"#cccccc\"\n ]\n // range: [\n // \"#96170f\",\n // \"#dc7700\",\n // \"#D93C1A\",\n // \"#9572d5\",\n // \"#009ee0\",\n // \"#1a7f1f\",\n // \"#cccccc\"\n // ]\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// Sets the locale for Vega-Lite axis, but not for text in tooltip (CMS does not recognise)\nlocaleNumber = await d3.json(\n \"https://cdn.jsdelivr.net/npm/d3-format@3/locale/de-CH.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"localeTime = ({\n dateTime: \"%A, der %e. %B %Y, %X\",\n date: \"%d.%m.%Y\",\n time: \"%H:%M:%S\",\n periods: [\"AM\", \"PM\"],\n days: [\"Sonntag\", \"Montag\", \"Dienstag\", \"Mittwoch\", \"Donnerstag\", \"Freitag\", \"Samstag\"],\n shortDays: [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"],\n months: [\"Januar\", \"Februar\", \"März\", \"April\", \"Mai\", \"Juni\", \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\"],\n shortMonths: [\"Jan\", \"Feb\", \"Mrz\", \"Apr\", \"Mai\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Okt\", \"Nov\", \"Dez\"]\n})\n// await d3.json(\n// \"https://raw.githubusercontent.com/d3/d3-time-format/main/locale/de-CH.json\"\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"nCol = {\n if (width >= 1100) {\n return 7;\n } else if (width < 1100 && width >= 750) {\n return 3;\n } else {\n return 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"---\n\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1620,"value":"dataPath = \"https://raw.githubusercontent.com/statistikZH/decarb_monitoring/main/output/M2_data.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"data = d3\n .csv(dataPath)\n // FileAttachment(\"m2_new.csv\")\n // .csv()\n .then(function (data) {\n data.forEach(function (d) {\n d.xTime = d3.timeParse(\"%Y\")(d.Jahr); // xTime is time used for x scale so different year's data can share the x scale\n d.Wert = +d.Wert; // Values to numeric\n d.Wert_txt =\n d.Einheit == \"Prozent (%)\"\n ? d.Wert.toLocaleString(undefined, {\n style: \"percent\",\n minimumFractionDigits: 1,\n maximumFractionDigits: 1\n })\n : d.Wert.toLocaleString(\"de-CH\");\n });\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"years = [...new Set(d3.map(data, (d) => d.Jahr))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"gebiet = [...new Set(d3.map(data, (d) => d.Gebiet))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"units = [...new Set(d3.map(data, (d) => d.Einheit))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"antriebsart = [\n ...new Set(\n d3.map(\n data.filter((d) => d.Variable != \"Elektrofahrzeuge (ohne Hybrid)\"),\n (d) => d.Variable\n )\n )\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"Inputs.table(\n data.filter(\n (d) => d.Einheit == M2_radiosUnit && d.Variable == \"fossilfreier Treibstoff\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"---\n## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"function wrangleData(data) {\n const groupedByYear = Array.from(\n d3.rollup(\n data,\n (v) => {\n if (v.length === 1) {\n return v[0];\n } else {\n return Object.assign({}, v[0], {\n value: d3.sum(v, (d) => d.value),\n location: \"CH\"\n });\n }\n },\n (d) => d.year,\n (d) => d.date\n ),\n ([key, values]) => ({\n key,\n values: Array.from(values.values())\n })\n );\n groupedByYear.forEach((d) =>\n d.values.forEach((e, i) => {\n if (i === 0) {\n e.total = e.value;\n } else {\n e.total = e.value + d.values[i - 1].total;\n }\n })\n );\n return groupedByYear;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1677,"value":"render = function (\n template,\n element = document.createElement(\"span\"),\n options\n) {\n lit.render(template, element, options);\n return element;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"// displayData = wrangleData(konkurse)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1681,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1694,"value":"breakpoints = [0, 640, 768]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"viewsWidth = width >= breakpoints[1]\n ? Math.max(Math.min(width * 0.5, 480), 320)\n : width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"// makeCl = (prefix) => {\n// const registry = {};\n\n// const cl = (name) => {\n// const identifier = `zhstat-${prefix}-${name}`;\n// if (typeof registry[identifier] === \"undefined\") {\n// registry[identifier] = DOM.uid(identifier);\n// }\n\n// return registry[identifier].id;\n// };\n\n// return cl;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"elIds = ({\n inputContainer: DOM.uid(\"zhstat-input-container\"),\n visuallyHidden: DOM.uid(\"zhstat-visually-hidden\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"// cl = makeCl(\"button-group\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1683,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"---\n## Imports & dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"lit = import(`https://esm.run/lit-html@3`)\n// lit = import(\"lit-html@2.8.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"d3 = require(\"d3@6\", \"d3-array@^3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"