2a:null 2b:["$","title",null,{"children":"M1 - Antriebsart bei Personenwagen - Fahrzeugbestand | Office for Statistics and Data of the Canton of Zurich | Observable"}] 30:T7cb,M1_wrapper = { return render( lit.html`

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

Gebiet ${viewof M1_radiosGebiet}

Dargestellter Wert ${viewof M1_radiosUnit}

Antriebsart ${viewof chartLegend}

${viewof M1_checkboxes}

${viewof plot}

Hinweis zu den Daten: 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 ); }31:Tfde,viewof 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(M1_radiosGebiet) // .title("↑ " + M1_radiosUnit) .axis({ format: M1_radiosUnit == units[1] ? "%" : null }) .scale({ domain: M1_radiosUnit == units[1] && M1_checkboxes.length == 1 ? [0, 0.25] : null }) .stack( M1_radiosUnit == units[1] && M1_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: "Gebiet", // 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 " + M1_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, titleFont: "HelveticaNowBlack,Arial Black,sans-serif", titleFontSize: 16, titleFontColor: "black" }, 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()32:[] 2e:{"id":"adad3d788574d450","slug":null,"title":"M1 - Antriebsart bei Personenwagen - Fahrzeugbestand","thumbnail":"5e77feec0870d23e44cc82295787be64ff9bb4acb704b23263b81478614d3106","access_level":"public","create_time":"$D2022-12-20T14:20:50.944Z","update_time":"$D2024-04-12T09:22:47.619Z","view_time":null,"first_public_time":"$D2023-07-06T12:35:23.121Z","fork":{"id":"c781cf17bf10c4a4","slug":null,"title":"M8 - Endenergieverbrauch fossiler Treibstoffe","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":1963,"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,"subscribed":null,"forks":3,"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":"M1 - Antriebsart bei Personenwagen - Fahrzeugbestand","cells":[{"id":0,"value":"# M1 - Antriebsart bei Personenwagen - Fahrzeugbestand\n\nDiagramm: Säulen gestapelt (absolut), Säulen gestapelt (100%)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1892,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1894,"value":"---\n## Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1896,"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"},{"id":1910,"value":"## Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1739,"value":"viewof M1_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"},{"id":1382,"value":"viewof M1_radiosUnit = Inputs.radio(units, {\n // label: \"Einheit wählen\",\n value: \"Personenwagen [%]\",\n sort: \"descending\",\n column: \"180px\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1915,"value":"viewof M1_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"},{"id":1918,"value":"## Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1923,"value":"filteredData = M1_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 == M1_radiosUnit &&\n d.Gebiet == M1_radiosGebiet\n )\n : data.filter(\n (d) =>\n d.Variable != \"Elektrofahrzeuge (ohne Hybrid)\" &&\n d.Einheit == M1_radiosUnit &&\n d.Gebiet == M1_radiosGebiet\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1920,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":757,"value":"---\n## Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":192,"value":"svgHeight = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":190,"value":"height = svgHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1662,"value":"color = d3\n .scaleOrdinal()\n .domain(antriebsart)\n .range([\n \"#96170f\",\n \"#d93c1a\",\n \"#dc7700\",\n \"#7a0049\",\n \"#b01657\",\n \"#54268e\",\n \"#9572d5\",\n \"#00407c\",\n \"#009ee0\",\n \"#1a7f1f\",\n \"#8a8c00\",\n \"#0fa693\",\n \"#666666\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"y_domain = d3.extent([\n 0,\n d3.max(\n data.filter((d) => d.Einheit == M1_radiosUnit),\n (d) => d.Wert\n ) * 1.1\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":713,"value":"colorAntriebsart = M1_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"},{"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"},{"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"},{"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"},{"id":764,"value":"---\n\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1875,"value":"dataPath = \"https://raw.githubusercontent.com/statistikZH/decarb_monitoring/main/output/M1_data.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1375,"value":"data = d3\n .csv(dataPath)\n // FileAttachment(\"M1_data@4.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 == \"Personenwagen [%]\"\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"},{"id":526,"value":"years = [...new Set(d3.map(data, (d) => d.Jahr))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1386,"value":"gebiet = [...new Set(d3.map(data, (d) => d.Gebiet))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1379,"value":"units = [...new Set(d3.map(data, (d) => d.Einheit))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":1360,"value":"Inputs.table(\n data.filter(\n (d) => d.Einheit == M1_radiosUnit && d.Variable == \"fossilfreier Treibstoff\"\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1580,"value":"dataWide = tidy(\n data,\n filter(\n (d) =>\n d.Variable == \"Elektrofahrzeuge (ohne Hybrid)\" &&\n d.Einheit == \"Personenwagen [%]\" \n ),\n pivotWider({\n namesFrom: \"Gebiet\",\n valuesFrom: \"Wert\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1588,"value":"Inputs.table(dataWide)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"---\n## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":1928,"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"},{"id":1930,"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"},{"id":166,"value":"// displayData = wrangleData(konkurse)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1932,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1934,"value":"breakpoints = [0, 640, 768]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1936,"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"},{"id":1938,"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"},{"id":1940,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"---\n## Imports & dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":42,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1943,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1946,"value":"lit = import(`https://esm.run/lit-html@3`)\n// lit = import(\"lit-html@2.8.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"d3 = require(\"d3@6\", \"d3-array@^3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1576,"value":"import {\n tidy,\n mutate,\n filter,\n select,\n pivotWider,\n pivotLonger,\n rename\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"