2b:null 2c:["$","title",null,{"children":"G3 - Energiebedarf für Raumwärme und Warmwasser bei reinen Wohnbauten im Kanton Zürich nach Gebäudealtersklassen | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T1082,viewof G3_plot = { const domainOrder = [ "Bauperiode bis 1920", "Bauperiode 1920 bis 1960", "Bauperiode 1961 bis 1980", "Bauperiode 1981 bis 1990", "Bauperiode 1991 bis 2000", "Bauperiode 2001 bis 2010", "Bauperiode ab 2011" ]; const colorRange = [ "#0076BD", "#0076BD", "#0076BD", "#0076BD", "#0076BD", "#0076BD", "#0076BD" ]; const plotTop = vl .markBar() .data(data) .encode( vl.x().fieldN("Jahr").title(null), vl.y().fieldQ("Wert").title(null), vl .facet() .fieldN("Variable") .align("all") .columns(nCol) .title(null) .sort(domainOrder), vl .color() .fieldO("Variable") .scale({ domain: domainOrder, range: colorRange }) .legend(null), vl.fillOpacity({ value: 0.8, condition: [{ selection: "hover", value: 1 }] }), vl.tooltip([ { field: "Jahr", title: "Jahr" }, { field: "Variable", title: "Bauperiode" }, { field: "Wert", title: "Energiebedarf (kWh/m²)" } ]) ) .select({ hover: { type: "single", empty: false, on: "mouseover" } }) .resolve({ scale: { x: "independent" } }); return ( vl .vconcat(plotTop) .spacing(50) .autosize({ type: "fit", resize: true }) // .title({ // // text: "Energiebedarf bei reinen Wohnbauten nach Bauperiode, " + gebiet[0], // text: [...new Set(data.map((d) => d.Indikator_Name))] + ", " + gebiet[0], // subtitle: "In " + units[0] // }) .config({ locale: { number: localeNumber }, view: { stroke: null, width: plotWidth(3), height: 250 }, facet: { spacing: 35, tickCount: { signal: Math.ceil(plotWidth(3) / 80) } }, scale: { bandPaddingInner: 0.2, bandPaddingOuter: 0.2 }, background: "#ffffff", axis: { labelFont: "HelveticaNowRegular,Helvetica,sans-serif", labelFontSize: 14, labelColor: "black", titleFont: "HelveticaNowRegular,Helvetica,sans-serif", titleFontSize: 16, 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(chartHeight / 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, subtitleLineHeight: 15 }, 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, padding: 15 }, 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 }, text: { font: "HelveticaNowRegular,Helvetica,sans-serif", fontSize: 14, color: "black" } }) .render() ); }32:[] 2f:{"id":"1f6b4f3dd62509cf","slug":null,"title":"G3 - Energiebedarf für Raumwärme und Warmwasser bei reinen Wohnbauten im Kanton Zürich nach Gebäudealtersklassen","thumbnail":"5f7e43b95f960114a1c67a06812c2d52094abebaa71b13a5af016e8fbccd48eb","access_level":"public","create_time":"$D2023-04-19T13:12:01.996Z","update_time":"$D2023-07-12T05:40:34.976Z","view_time":null,"first_public_time":"$D2023-07-05T12:49:33.471Z","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":1836,"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":1,"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":"G3 - Energiebedarf für Raumwärme und Warmwasser bei reinen Wohnbauten im Kanton Zürich nach Gebäudealtersklassen","cells":[{"id":0,"value":"# G3 - Energiebedarf für Raumwärme und Warmwasser bei reinen Wohnbauten im Kanton Zürich nach Gebäudealtersklassen\n\nDiagramm: Säulen gruppiert pro Bauperiode nach Bedarfsjahr","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1709,"value":"G3_title = htl.html`\n

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

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

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

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

`","pinned":true,"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":1824,"value":"dataPath = \"https://raw.githubusercontent.com/statistikZH/decarb_monitoring/main/output/G3_data.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"data = d3\n .csv(dataPath)\n // FileAttachment(\"G3_data@2.csv\")\n // .csv({ typed: true })\n .then(function (data) {\n data.forEach(function (d) {\n d.year = new Date(d.Jahr, 0, 1);\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.Einheit == \"Mwh [%]\" ? +d.Wert / 100 : +d.Wert; // Values to numeric and percentage\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":1529,"value":"bauperiode = [...new Set(d3.map(data, (d) => d.Variable))]","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":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":1589,"value":"chartHeight = years.length * (barHeight * years.length + 10) // Anzahl Jahr * Balkenhöhe + Margin","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":1535,"value":"colorBauperiode = ({\n domain: bauperiode,\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 ]\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":1539,"value":"nCol = {\n if (width >= 1100) {\n return 3;\n } else if (width > 768 && width < 1100) {\n return 2;\n } else {\n return 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1674,"value":"nCol_Legend = {\n if (width >= 1100) {\n return 6;\n } else if (width < 1100 && width >= 750) {\n return 3;\n } else {\n return 2;\n }\n}","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\"","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":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"