2b:null 2c:["$","title",null,{"children":"G1 - Heizsysteme in Gebäuden | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:Tdae,viewof G1_plot = vl .markBar({ yOffset: 0, height: barHeight, stroke: "white", strokeWidth: 1 }) .data( data.filter((d) => d.Variable != "Fossil" && d.Einheit == G1_radiosUnit) ) .transform( vl .calculate( "indexof(['Heizöl', 'Gas', 'Elektrizität', 'Fernwärme', 'Wärmepumpe', 'Holz', 'Sonne', 'Andere'], datum.Variable)" ) .as("stackSortOrder") ) .encode( vl .x() .fieldQ("Wert") .title(G1_radiosUnit + " →") .stack(G1_radiosUnit == units[1] ? "normalize" : "zero"), vl.y().field("Jahr").axis({ grid: false, domain: false, ticks: false, labelAlign: "right", labelBaseline: "middle", labelPadding: 8 }), vl.color({ title: "Heizsystem" }).field("Variable").scale(colorHeizsystem), vl.order("stackSortOrder"), vl.tooltip([ { field: "Jahr", title: "Jahr" }, { field: "Variable", title: "Heizsystem" }, { field: "Wert_txt", title: G1_radiosUnit } ]), vl.facet({ field: "Gebiet", type: "nominal", columns: 1, spacing: 40, title: null }) ) .resolve({ scale: { x: "independent" } }) .width(plotWidth(1)) // specifying responsive width .height(chartHeight) // .title({ // text: // [...new Set(data.map((d) => d.Indikator_Name))] + // ", " + // gebiet[1] + // " und " + // gebiet[0], // subtitle: "In " + G1_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: { labelPadding: 10, titleAlign: "left", titleAngle: 0, titleX: 0, titleY: 40, format: G1_radiosUnit == units[1] ? "%" : null, tickCount: plotWidth(1) / 120 }, axisY: { labelFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", labelPadding: 10, title: null, ticks: false, 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: "black", labelAnchor: "start", titleFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", titleAnchor: "start", titleColor: "black", titleFontSize: 16 }, legend: { 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:Tc67,viewof G1_anteilFossil = vl .data(data.filter((d) => d.Variable == "Fossil" && d.Einheit == units[1])) .layer( vl.markBar().encode( vl .y() .fieldQ("Wert") .scale({ zero: true, domain: [0, 1] }) .axis({ domain: false, ticks: false, offset: -10, labelAlign: -20, labelBaseline: "line-bottom" }), vl .x() .fieldN("Gebiet") .scale({ padding: 0.2 }) .axis({ bandPosition: 0.5, grid: false, labelAngle: 0, zindex: 1 }) .title(null), vl .color() .fieldN("Gebiet") .scale({ domain: ["Kanton Zürich", "Schweiz"], range: ["#0076BD", "#DC0018"] }) .legend(null) .title(null) ), vl.markText({ fill: "black", dy: -10 }).encode( vl.y().fieldQ("Wert"), vl.x().fieldO("Gebiet").axis({ bandPosition: 0.5, grid: false, labelAngle: 0 }), vl.text().field("Wert_txt") ) ) .width(plotWidth(1)) // specifying responsive width .height(450) // .title({ // text: "Anteil fossiler Heizsysteme in Gebäuden, " + years[0], // subtitle: "In Prozent" // }) .autosize({ resize: true, type: "fit" }) .config({ locale: { number: localeNumber }, view: { stroke: null }, scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.1, zero: true }, background: "#ffffff", axis: { labelFont: "HelveticaNowRegular,Helvetica,sans-serif", labelFontSize: 14, labelColor: "black", titleFont: "HelveticaNowRegular,Helvetica,sans-serif", titleFontSize: 16, titleFontColor: "black" }, axisX: { tickCount: plotWidth(1) / 120, labelFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif" }, axisY: { format: ".0%", labelFont: "Arial", labelPadding: 10, title: null, labelLimit: 300, tickCount: 3 }, 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: "bottom", 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 rowPadding: 5 }, text: { font: "HelveticaNowRegular,Helvetica,sans-serif", fontSize: 14, color: "black" } }) .render()33:[] 2f:{"id":"f39ea2f5567dda28","slug":null,"title":"G1 - Heizsysteme in Gebäuden","thumbnail":"bb537578405d458fe5828b92dee840633d4ecce9ec1a131b6da845dbd5abfe36","access_level":"public","create_time":"$D2023-01-03T10:51:14.912Z","update_time":"$D2023-07-11T09:52:54.569Z","view_time":null,"first_public_time":"$D2023-07-05T12:47:46.760Z","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":1775,"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":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":"G1 - Heizsysteme in Gebäuden","cells":[{"id":0,"value":"# G1 - Heizsysteme in Gebäuden\n\nDiagramm: Säulen gestapelt (absolut), Säulen gestapelt (100%)\n\n**Issues:**\n1. ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1382,"value":"viewof G1_radiosUnit = Inputs.radio(units, {\n // label: html`Einheit wechseln`,\n value: \"Prozent (%)\",\n sort: \"descending\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"G1_title = htl.html`\n

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

${viewof G1_radiosUnit}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"G1_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":1698,"value":"G1_title2 = htl.html`\n

${\n \"Anteil fossiler Heizsysteme in Gebäuden, \" + years[0]\n}

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"G1_caption2 = html`

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

`","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":192,"value":"barHeight = 35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1648,"value":"chartHeight = years.length * (barHeight * years.length + 10) // Anzahl Jahr * Balkenhöhe + Margin\n","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":174,"value":"y_domain = d3.extent([\n 0,\n d3.max(\n data.filter((d) => d.Variable != \"Fossil\" && d.Einheit == G1_radiosUnit),\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":"colorHeizsystem = ({\n domain: [\n \"Heizöl\",\n \"Gas\",\n \"Elektrizität\",\n \"Fernwärme\",\n \"Wärmepumpe\",\n \"Holz\",\n \"Sonne\",\n \"Andere\"\n ],\n range: [\n // \"#666666\", // Heizöl\n \"#96170F\", // Heizöl\n // \"#7f3da7\", // Gas\n \"#D93C1A\", // Gas\n // \"#7a0049\", // Elektrizität\n \"#DC7700\", // Elektrizität\n // \"#dc7700\", // Fernwärme\n \"#00797B\", // Fernwärme\n // \"#b01657\", // Wärmepumpe\n \"#0FA693\", // Wärmepumpe\n // \"#54268e\", // Holz\n \"#1A7F1F\", // Holz\n // \"#9572d5\", // Sonne\n \"#8A8C00\", //Sonne\n \"#cccccc\" // Andere\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":1526,"value":"nCol = {\n if (width >= 1100) {\n return 8;\n } else if (width < 1100 && width >= 750) {\n return 4;\n } else {\n return 2;\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":1764,"value":"dataPath = \"https://raw.githubusercontent.com/statistikZH/decarb_monitoring/main/output/G1_data.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"data = d3\n .csv(\n dataPath\n )\n // FileAttachment(\"G1_data@3.csv\")\n // .csv({ typed: true })\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 }) //.toLocaleString(\"de-CH\")\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":1521,"value":"heizsystem = [\n ...new Set(\n d3.map(\n data.filter((d) => d.Variable != \"Fossil\"),\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 == G1_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(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"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"