31:Tcfa,viewof KG3_plot = vl .data(data) .encode( vl.x().fieldT("year").timeUnit("year").title(null), vl .y() .fieldQ("Wert") .title(null) // .title("↑ " + units[0]) .title(null), vl .color() .fieldN("Gebiet") .title(null) .legend(null) .scale({ domain: ["Schweiz"], range: ["#DC0018"] }), vl .shape() .fieldN("Gebiet") .scale({ domain: ["Schweiz"], range: ["triangle"] }) ) .layer( vl.markLine(), vl.markPoint({ stroke: "white", size: 100, filled: true }), vl .markText({ fill: "black", // align: { expr: "datum.Gebiet == 'Schweiz' ? 'right' : 'left'" }, dy: { expr: "datum.Gebiet == 'Schweiz' ? -15 : 15" } }) .data(labelTxt) .encode(vl.text().field("Wert_txt")) ) .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 " + units[0] // }) .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: 14, titleFontColor: "black" }, axisX: { tickCount: Math.ceil(width / 120), grid: false, domainColor: "lightgrey", tickColor: "lightgrey", labelAngle: 0 }, axisY: { format: "%", labelPadding: 10, titleAlign: "left", titleAngle: 0, titleX: 0, titleY: -20, tickCount: { signal: 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: "HelveticaNowRegular,Helvetica,sans-serif", labelColor: "#0076bd", labelAnchor: "start", titleFont: "HelveticaNowRegular,Helvetica,sans-serif", titleAnchor: "start", titleColor: "black", titleFontSize: 16 }, legend: { orient: "top", layout: { top: { anchor: "middle" } }, symbolSize: 250, clipHeight: 40, titleFont: "HelveticaNowBlack,Arial Black,Helvetica,sans-serif", titleFontSize: 14, labelFont: "HelveticaNowRegular,Helvetica,sans-serif", labelFontSize: 14, labelColor: "black", labelLimit: 300, // padding: 25, columnPadding: 25 }, text: { font: "HelveticaNowRegular,Helvetica,sans-serif", fontSize: 14, color: "black" } }) .render()32:[] 2f:{"title":"KG3 - Kreislauf-Mineralnutzungsquote Schweiz","cells":[{"id":0,"value":"# KG3 - Kreislauf-Mineralnutzungsquote Schweiz\n\nDiagramm: Punkt bzw Liniendiagramm","pinned":false,"hidden":false,"mode":"md"},{"id":1559,"value":"KG3_title = htl.html`\n

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

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

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"KG3_caption = html`

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"---\n## Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"margin = ({\n top: 30,\n right: 10,\n bottom: 30,\n left: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"svgHeight = 450","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":190,"value":"height = svgHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"color = d3.scaleOrdinal([\"Kanton Zürich\", \"Schweiz\"], [\"#009EE0\", \"#D93C1A\"])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":764,"value":"---\n\n## Data","pinned":false,"hidden":false,"mode":"md"},{"id":1652,"value":"dataPath = \"https://raw.githubusercontent.com/statistikZH/decarb_monitoring/main/output/KG3_data.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"data = d3\n .csv(dataPath)\n // FileAttachment(\"KG3_data.csv\")\n // .csv()\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.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: 2\n }) //.toLocaleString(\"de-CH\")\n : d.Wert.toLocaleString(undefined, {\n decimal: \",\",\n minimumFractionDigits: 1,\n maximumFractionDigits: 1\n });\n });\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"years = [...new Set(d3.map(data, (d) => d.Jahr))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"gebiet = [...new Set(d3.map(data, (d) => d.Gebiet))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"units = [...new Set(d3.map(data, (d) => d.Einheit))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1623,"value":"labelTxt = // (d, i) => { // (d) => d.Gebiet, // data.filter((d) => d.Einheit == KV1_radiosUnit), // d3.group(\n// return i % 3 == 2; // i starts with 0 and i%5 == 2 is every fifth element starting with the 2nd in the array\n// }\n// )\ndata.filter((d, i) => {\n return i % 4 == 2; // i starts with 0 and i%5 == 2 is every fifth element starting with the 2nd in the array\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n## Imports & dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"d3 = require(\"d3@6\", \"d3-array@^3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}