2b:null 2c:["$","title",null,{"children":"M5 - Durchschnittliche CO₂-Emissionen der Personenwagen | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T20de,viewof M5_plot = { const annotationAreaNEFZ = vl .markArea({ fill: "#3333331A", // https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 interpolate: "step-before" }) .data(annotation_data.filter((d) => d.Jahr <= "2020")) .encode( vl.x().fieldT("year").timeUnit("year"), vl.y().fieldQ("Zielwert").scale({ domain: y_domain }) ); const annotationAreaWLTP2020 = vl .markArea({ fill: "#1A7F1F1A", //"#8A8C001A", // https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 interpolate: "step-before" }) .data(annotation_data.filter((d) => d.Jahr >= "2020" && d.Jahr <= "2024")) .encode( vl.x().fieldT("year").timeUnit("year"), vl.y().fieldQ("Zielwert").scale({ domain: y_domain }) ); const annotationAreaWLTP2025 = vl .markArea({ fill: "#8A8C001A", // https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 interpolate: "step-before" }) .data(annotation_data.filter((d) => d.Jahr >= "2024")) .encode( vl.x().fieldT("year").timeUnit("year"), vl.y().fieldQ("Zielwert").scale({ domain: y_domain }) ); const annotationRule = vl .markRule({ stroke: "#000000" }) .data({ values: [ { x: "2020-01-01T23:00Z", y: y_domain[1] } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }) ); const annotationRule2025 = vl .markRule({ stroke: "#000000" }) .data({ values: [ { x: "2024-01-01T23:00Z", y: y_domain[1] } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }) ); const annotationText2025 = vl .markText({ align: "left", fill: "black", dx: 10 }) .data({ values: [ { x: "2023-12-31T23:00Z", y: 75, label: " WLTP-Messverfahren →" } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }), vl.text().fieldN("label") ); const annotationText2025_line2 = vl .markText({ align: "left", fill: "black", dx: 10 }) .data({ values: [ { x: "2023-12-31T23:00Z", y: 65, label: "(Grenzwert: 93.6g CO₂/km)" } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }), vl.text().fieldN("label") ); const annotationText2020 = vl .markText({ align: "left", fill: "black", dx: 10 }) .data({ values: [ { x: "2019-12-31T23:00Z", y: 75, label: " WLTP-Messverfahren →" } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }), vl.text().fieldN("label") ); const annotationText2020_line2 = vl .markText({ align: "left", fill: "black", dx: 10 }) .data({ values: [ { x: "2019-12-31T23:00Z", y: 65, label: "(Grenzwert: 118g CO₂/km" } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }), vl.text().fieldN("label") ); const annotationText2020_line3 = vl .markText({ align: "left", fill: "black", dx: 10 }) .data({ values: [ { x: "2019-12-31T23:00Z", y: 55, label: "gültig bis und mit 2024)" } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }), vl.text().fieldN("label") ); const annotationTextLeft = vl .markText({ align: "right", fill: "black", dx: -10 }) .data({ values: [ { x: "2019-12-31T23:00Z", y: 75, label: "← NEFZ-Messverfahren " } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }), vl.text().fieldN("label") ); const annotationTextLeft2 = vl .markText({ align: "right", fill: "black", dx: -10 }) .data({ values: [ { x: "2019-12-31T23:00Z", y: 65, label: "(gültig bis und mit 2020)" } ] }) .encode( vl.x().fieldT("x").timeUnit("year"), vl.y().fieldQ("y").scale({ domain: y_domain }), vl.text().fieldN("label") ); const line = vl.markLine().encode( vl.x().fieldT("year").timeUnit("year").title(null), vl.y().fieldQ("Wert").scale({ domain: y_domain }).title("↑ g CO₂/km"), vl .color() .fieldN("Gebiet") .scale({ domain: ["Kanton Zürich", "Schweiz"], range: ["#0076BD", "#DC0018"] }) .title(null), vl .shape() .fieldN("Gebiet") .scale({ domain: ["Kanton Zürich", "Schweiz"], range: ["circle", "triangle"] }), vl.strokeDash().fieldN("Gebiet").title(null).legend(null), vl.markPoint({ size: 60, filled: true }) ); const lineLabels = vl .markText({ // dy: -15, fill: { expr: "datum.Gebiet == 'Schweiz' ? '#DC0018' : '#0076BD'" }, dy: { expr: "datum.Gebiet == 'Schweiz' ? -15 : 15" } }) .encode( vl.x().fieldT("year").timeUnit("year").title(null), vl.y().fieldQ("Wert").scale({ domain: y_domain }), vl.text().field("Wert_txt") ); return vl .data(data) .layer( annotationAreaNEFZ, annotationAreaWLTP2020, annotationRule, annotationText2020, annotationText2020_line2, annotationText2020_line3, annotationTextLeft, annotationTextLeft2, annotationAreaWLTP2025, annotationRule2025, annotationText2025, annotationText2025_line2, line, lineLabels ) .width(plotWidth(1)) // specifying responsive width .height(400) .autosize({ resize: true, type: "fit" }) .config({ locale: { number: localeNumber }, view: { stroke: null }, 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", 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: 5, lineHeight: 3, labelFontSize: 14, labelFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", labelColor: "#0076bd", labelAnchor: "start", titleFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", titleAnchor: "start", titleColor: "black", titleFontSize: 16 }, legend: { orient: "top", layout: { top: { anchor: "middle" } }, symbolSize: 250, titleFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", titleFontSize: 14, labelFont: "HelveticaNowRegular,Helvetica,sans-serif", labelFontSize: 14, labelColor: "black", labelLimit: 300, padding: 10 }, text: { font: "HelveticaNowRegular,Helvetica,sans-serif", fontSize: 14, color: "black" } }) .render(); }32:T486,data = d3 .csv(dataPath) // FileAttachment("M5_data@2.csv") // .csv({ typed: true }) .then(function (data) { data.forEach(function (d) { d.year = new Date(new Date(d.Jahr, 0, 1).getFullYear(), 0, 1); // Korrekte Datumsstellung d.xTime = d3.timeParse("%Y")(d.Jahr); // xTime is time used for x scale so different year's data can share the x scale d.Wert = +d.Wert; //d.Einheit == "Mwh [%]" ? +d.Wert / 100 : +d.Wert; // Values to numeric and percentage // Formatierung des Wertes mit Komma als Dezimaltrennzeichen d.Wert_txt = d.Wert.toLocaleString(undefined, { decimalSeparators: { integer: ",", fraction: "" }, minimumFractionDigits: 1, maximumFractionDigits: 1 }); // Logik für Zielwerte if (d.Jahr < 2020) { d.Zielwert = 130; d.Zielwert_txt = "130g CO₂/km"; } else if (d.Jahr >= 2020 && d.Jahr <= 2024) { d.Zielwert = 118; d.Zielwert_txt = "118g CO₂/km"; } else { // ab 2024 d.Zielwert = 93.6; d.Zielwert_txt = "93.6g CO₂/km"; } }); return data; })33:[] 2f:{"id":"1efc84ef1393b225","slug":null,"title":"M5 - Durchschnittliche CO₂-Emissionen der Personenwagen","thumbnail":"2d7902378e2186896e69927ca0b5ca357388825bbd9b0816ce176e1a719de773","access_level":"public","create_time":"$D2023-04-20T08:14:42.603Z","update_time":"$D2026-03-04T07:27:09.376Z","view_time":null,"first_public_time":"$D2023-07-06T12:36:25.418Z","has_unpublished_edits":null,"fork":{"id":"8ad0de32ba543e8f","slug":null,"title":"G2 - Anteil erneuerbar erzeugte Wärme an Gesamtverbrauch Wärme","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":2016,"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":"M5 - Durchschnittliche CO₂-Emissionen der Personenwagen","cells":[{"id":0,"value":"# M5 - Durchschnittliche CO₂-Emissionen der Personenwagen\n\nDiagramm: Punkt bzw Liniendiagramm\n\n**Issues:**\n1. ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1622,"value":"M5_title = htl.html`\n

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

${\"In \" + units[0]}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"M5_caption = html`

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

`","pinned":false,"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":1637,"value":"// In annotation_data the values and labels for the annotations are defined.\nannotation_data = tidy(\n data,\n distinct([\"Jahr\", \"Zielwert\", \"zielwert_txt\"]),\n mutate({\n Zielwert: (d) =>\n d.Jahr > \"2020\" && d.Jahr <= \"2025\" ? d.Zielwert : y_domain[1],\n Gebiet: (d) => (d.Jahr > \"2020\" ? \"WLTP-Grenzwert\" : \"NEFZ-Zielwert\"),\n Fill: (d) => (d.Jahr > \"2020\" ? \"#3333331A\" : \"#54268E1A\")\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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([0, d3.max(data, (d) => d.Wert) * 1.1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"color = d3.scaleOrdinal(gebiet, [\"#009EE0\", \"#D40053\"])","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":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/M5_data.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"$32","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":1551,"value":"dataWide = tidy(\n data,\n pivotWider({\n namesFrom: \"Gebiet\",\n valuesFrom: \"Wert\"\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":166,"value":"// displayData = wrangleData(data)","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":289,"value":"d3 = require(\"d3@6\", \"d3-array@^3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"import {\n tidy,\n mutate,\n filter,\n select,\n pivotWider,\n pivotLonger,\n rename,\n distinct\n} from \"@pbeshai/tidyjs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"