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

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

Gebiet ${viewof M4_radiosGebiet}

Dargestellter Wert ${viewof M4_radiosUnit}

Antriebsart ${viewof chartLegend}

${viewof M4_checkboxes}

${viewof M4_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:T1146,viewof M4_plot = vl .markBar({ // yOffset: 0, // height: 25, stroke: "white", strokeWidth: 0.5 }) .data( M4_checkboxes.length > 0 ? data.filter( (d) => d.Variable != "Benzin, Diesel" && d.Variable != "Andere" && d.Variable != "Elektrofahrzeuge (ohne Hybrid)" && d.Einheit == M4_radiosUnit && d.Gebiet == M4_radiosGebiet ) : data.filter( (d) => d.Variable != "Elektrofahrzeuge (ohne Hybrid)" && d.Einheit == M4_radiosUnit && d.Gebiet == M4_radiosGebiet ) ) .transform( vl .calculate( "indexof([ 'Gas', 'Wasserstoff', 'Hybrid', 'PlugIn-Hybrid', 'Elektrisch', 'Andere'], datum.Variable)" ) .as("stackSortOrder") ) .encode( vl .y() .fieldQ("Wert") .title(null) // .title("↑ " + M4_radiosUnit) .axis({ format: M4_radiosUnit == units[1] ? "%" : null }) .scale({ domain: M4_radiosUnit == units[1] && M4_checkboxes.length == 1 ? [0, 0.25] : null }) .stack( M4_radiosUnit == units[1] && M4_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: "Neuzulassungen" } ]), 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 " + M4_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:[] 2f:{"id":"79fca6d1b3eb6c9e","slug":null,"title":"M4 - Antriebsart bei Gütertransportfahrzeugen - Neuzulassungen","thumbnail":"6b20bb9bf5f9bddcbaeadbd8dc3c35fbed7cdbd5c86e94349a384de96b050149","access_level":"public","create_time":"$D2023-04-20T08:11:43.742Z","update_time":"$D2024-05-07T05:07:54.461Z","view_time":null,"first_public_time":"$D2023-07-06T12:36:10.814Z","has_unpublished_edits":null,"fork":{"id":"80efbd58a498706e","slug":null,"title":"M3 - Antriebsart bei Personenwagen - Neuzulassungen","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":1782,"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":0,"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":"M4 - Antriebsart bei Gütertransportfahrzeugen - Neuzulassungen","cells":[{"id":0,"value":"# M4 - Antriebsart bei Gütertransportfahrzeugen - Neuzulassungen\n\nDiagramm: Säulen gestapelt (absolut), Säulen gestapelt (100%)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1659,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"## Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1590,"value":"viewof M4_checkboxes = Inputs.checkbox(\n [\"Nur alternative Antriebsarten anzeigen\"],\n {\n label: null,\n value: [null]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"viewof M4_radiosUnit = Inputs.radio(units, {\n // label: \"Einheit wählen\",\n value: units[1], //\"Prozent (%)\",\n sort: \"descending\",\n column: \"180px\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"viewof M4_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":1665,"value":"## Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1663,"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":1710,"value":"## Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1531,"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 == M4_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 = M4_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 = 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":7,"value":"dataPath = \"https://raw.githubusercontent.com/statistikZH/decarb_monitoring/main/output/M4_data.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"dataPathFallback = \"https://raw.githubusercontent.com/statistikZH/decarb_monitoring/27-m2-m4-neue-dimension/output/M4_data.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1765,"value":"csvURL = fetch(dataPath).then((response) => {\n if (response.ok) return dataPath;\n return dataPathFallback;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"data = d3\n .csv(csvURL)\n\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":true,"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(data.filter((d) => d.Einheit == M4_radiosUnit))","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":166,"value":"// displayData = wrangleData(konkurse)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"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":1681,"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":1683,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1685,"value":"breakpoints = [0, 640, 768]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1687,"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":1689,"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":1691,"value":"css = html``","pinned":true,"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":1693,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1695,"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"