2b:null 2c:["$","title",null,{"children":"Restvolumen zu Einbauvolumen nach Deponietypen im Kanton Zürich [horizontal] - wird ersetzt | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T5fd,wrapper = { return render( lit.html`

Restvolumen zu Einbauvolumen nach Deponietypen im Kanton Zürich

In Tausend Kubikmeter (Tsd. m\u00B3)

${viewof chartLegend}

${ types[0] }

${viewof chartViewTypB}

${ types[1] }

${viewof chartViewTypC}

${ types[2] }

${viewof chartViewTypD}

${ types[3] }

${viewof chartViewTypE}

Datenquelle: Amt für Abfall, Wasser, Energie und Luft des Kantons Zürich, Daten zur Grafik runterladen

`, this ); }32:T584,yAxis = (svg) => { function formatTick(d) { const s = (d / 1e3).toLocaleString("de-CH"); return this.parentNode.nextSibling ? `\xa0${s}` : `\xa0${s}`; //`${s} Tsd. t`; } const dimensions = chartDimensions; const numOfTicks = y.domain()[1]; const axisHeight = dimensions.boundedHeight; const pixelsPerTick = 30; const numberOfTicksTarget = Math.max( 1, Math.floor(axisHeight / pixelsPerTick) ); svg .append("g") // For tick values left of graph uncomment .attr("transform", `translate(${dimensions.margin.left}, 0)`) .call( d3 .axisLeft(y) .tickSize( dimensions.margin.left - dimensions.width - dimensions.margin.right ) .tickFormat(formatTick) .ticks(numberOfTicksTarget) ) .call((g) => g .selectAll(".tick:not(:first-of-type) line") // .attr("stroke-dasharray", "2,2") .attr("stroke", ZHColors.black["20"]) ) .call((g) => g.selectAll(".tick text").attr("fill", ZHColors.black["60"])) .call((g) => { g.selectAll(".tick line").attr("stroke", ZHColors.black["20"]); }) .call((g) => { g.selectAll(".domain").remove(); }) .call((g) => g .append("text") .attr("x", 0) .attr("y", 10) .attr("fill", ZHColors.black["60"]) .attr("text-anchor", "end") .text("Tsd. m\u00B3") ); }33:T440,createBarChart = ({ getData, dimensions }) => { const svg = d3 .create("svg") .attr("viewBox", [0, 0, dimensions.width, dimensions.height]) .attr("aria-hidden", "true") .style("display", "block"); svg.append("g").call(yAxis); svg .append("g") .selectAll("rect") .data(getData) .join("rect") .attr("fill", (d) => ZHGreens[d.Wert < 0 ? 0 : 1]) .attr("fill-opacity", 0.8) .attr("x", barXPosition) .attr("width", barWidth) .attr("y", (d) => y(Math.max(d.Wert, 0))) .attr("height", (d) => Math.abs(y(d.Wert) - y(0))); svg.append("g").call(xAxis); svg .append("line") .attr("x1", dimensions.margin.left) .attr("x2", dimensions.width) .attr("y1", y(0)) .attr("y2", y(0)) .style("stroke", ZHColors.black["100"]) .style("stroke-opacity", 1) .style("stroke-width", 1); svg .selectAll("text") .attr("font-family", "HelveticaNowRegular, Helvetica, Arial, sans-serif") .attr("font-size", responsiveValue("12px", "14px")); return Object.assign(svg.node(), { scales: { colors } }); }34:[] 2f:{"id":"317b94cddc559fe4","slug":null,"title":"Restvolumen zu Einbauvolumen nach Deponietypen im Kanton Zürich [horizontal] - wird ersetzt","thumbnail":"146c221d52222b1c585123dd0c44673c761d32b9088b90ec0c19267db2b7cd56","access_level":"public","create_time":"$D2023-10-13T13:50:14.869Z","update_time":"$D2025-04-01T05:54:16.004Z","view_time":null,"first_public_time":"$D2024-01-25T16:03:14.461Z","has_unpublished_edits":null,"fork":{"id":"4cde2cce3dd4dd3a","slug":"bar-chart-with-time-scale","title":"Bar Chart with Time Scale","owner":{"id":"d1485b4e59b7f657","login":"philippkoytek","name":""}},"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":1139,"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":"599a66ffbdbfa657","slug":"awel-deponiestatistik","title":"AWEL - Deponiestatistik","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Restvolumen zu Einbauvolumen nach Deponietypen im Kanton Zürich [horizontal] - wird ersetzt","cells":[{"id":0,"value":"# Restvolumen zu Einbauvolumen nach Deponietypen im Kanton Zürich [horizontal] - wird ersetzt\n\nDas baurechtlich bewilligte Restvolumen zeigt die unmittelbaren Deponiereserven im Kanton Zürich auf. Zusätzliches Deponievolumen kommt hinzu, wenn eine neue Deponie eröffnet werden kann.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":752,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":773,"value":"viewof chartLegend = swatches(viewof chartViewTypB.scales.colors, {\n columns: \"120px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"### Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"viewof chartViewTypB = {\n const node = createBarChart({\n dimensions: chartDimensions,\n getData: fetchedData.filter((d) => d.Deponietyp == types[0])\n });\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"viewof chartViewTypC = {\n const node = createBarChart({\n dimensions: chartDimensions,\n getData: fetchedData.filter((d) => d.Deponietyp == types[1])\n });\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"viewof chartViewTypD = {\n const node = createBarChart({\n dimensions: chartDimensions,\n getData: fetchedData.filter((d) => d.Deponietyp == types[2])\n });\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"viewof chartViewTypE = {\n const node = createBarChart({\n dimensions: chartDimensions,\n getData: fetchedData.filter((d) => d.Deponietyp == types[3])\n });\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"### Chart components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"margin = ({ top: 25, right: 20, bottom: 30, left: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"height = {\n const height = 350;\n // const aspectRatio = chartWidth / height;\n return width >= breakpoints[1]\n ? 325\n : Math.max(100, Math.floor(chartWidth / 1.5));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"chartWidth = parseInt(width / 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"chartDimensions = {\n return {\n width: chartWidth,\n height: height,\n margin: margin,\n boundedWidth: width - margin.left - margin.right,\n boundedHeight: height - margin.top - margin.bottom\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"// dynamically calculate width of bar\n// add a multiplactor to space the bars slightly apart\nbarWidth = parseInt(xBand.bandwidth() * 0.9)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"// position each bar so it's centered on the tick mark (which is the center of the bar)\nbarXPosition = (d) => xTime(d.Jahr) - barWidth / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"// A time-based scale that allows for a dynamic number of tick labels depending on the available width\nxTime = d3\n .scaleUtc()\n .domain(paddedExtent)\n .range([\n chartDimensions.margin.left,\n chartDimensions.width - chartDimensions.margin.right\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"// A scale band for positioning the bars on the x-axis\nxBand = d3\n .scaleBand()\n .domain(d3.timeYear.range(...xTime.domain()))\n .range([\n chartDimensions.margin.left,\n chartDimensions.width - chartDimensions.margin.right\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"y = d3\n .scaleLinear()\n .domain([\n Math.floor(d3.min(filteredData, (d) => d.Wert) / 1e5) * 1e5,\n Math.round(d3.max(filteredData, (d) => d.Wert) / 1e6) * 1e6\n ])\n .range([\n chartDimensions.height - chartDimensions.margin.bottom,\n chartDimensions.margin.top\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"xAxis = (svg) => {\n const dimensions = chartDimensions;\n const axisWidth = xBand.range()[1] - xBand.range()[0];\n const pixelsPerTick = 50;\n const numberOfTicksTarget = Math.max(\n 1,\n Math.floor(axisWidth / pixelsPerTick)\n );\n\n svg\n .append(\"g\")\n .attr(\n \"transform\",\n `translate(0,${dimensions.height - dimensions.margin.bottom})`\n )\n .call(\n d3\n .axisBottom(xTime)\n .ticks(numberOfTicksTarget)\n .tickSizeOuter(0)\n .tickSize(8)\n .tickFormat((d) =>\n d.getFullYear() % 1 === 0 ? d3.timeFormat(\"%Y\")(d) : null\n )\n )\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"fill\", ZHColors.black[\"60\"])\n .attr(\"y\", 16)\n .style(\"font-size\", responsiveValue(\"12px\", \"14px\"))\n )\n .call((g) => {\n g.selectAll(\".tick line\").attr(\"stroke\", ZHColors.black[\"60\"]);\n })\n .call((g) => {\n g.selectAll(\".domain\").remove();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"### Colors & styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"ZHGreens = [\"#00797B\", \"#0FA693\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"ZHColors = ({\n black: {\n 100: \"#000000\",\n 80: \"#333333\",\n 60: \"#666666\",\n 40: \"#949494\",\n 20: \"#cccccc\",\n 10: \"#f0f0f0\",\n 5: \"#f7f7f7\",\n 0: \"#FFFFFE\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"colors = d3\n .scaleOrdinal([\"Einbauvolumen\", \"Restvolumen\"], ZHGreens)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"dataPath = \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00002442_00004885.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"fetchedData = await d3.csv(dataPath, (d) => ({\n ...d,\n // Jahr: +d.Jahr,\n Jahr: new Date(d.Jahr),\n Deponietyp: d.Deponietyp,\n Kategorie: d.Kategorie,\n Wert: d.Wert === \"NA\" ? Number.parseInt(0) : Number.parseInt(d.Wert),\n Einheit: d.Einheit\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"filteredData = fetchedData.filter((d) => d.Deponietyp == types[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"years = Object.keys(\n fetchedData.reduce((acc, d) => {\n acc[d.Jahr] = true;\n return acc;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"types = Object.keys(\n fetchedData.reduce((acc, d) => {\n acc[d.Deponietyp] = true;\n return acc;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"kategorien = Object.keys(\n fetchedData.reduce((acc, d) => {\n acc[d.Kategorie] = true;\n return acc;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"einheit = Object.keys(\n fetchedData.reduce((acc, d) => {\n acc[d.Einheit] = true;\n return acc;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"xExtent = d3.extent(filteredData.map((d) => new Date(d.Jahr)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"// add one time unit of padding to make sure bars don't overlap with y-axis\npaddedExtent = [\n d3.min(filteredData.map((d) => d3.timeYear.offset(d.Jahr, -1))),\n d3.max(filteredData.map((d) => d.Jahr)) //d3.max(filteredData.map((d) => d3.timeYear.offset(d.Jahr, 1)))\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"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 <= window.innerWidth);\n\n return values[index];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"render = function (\n template,\n element = document.createElement(\"span\"),\n options\n) {\n lit.render(template, element, options);\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"### Imports & libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"lit = import(`https://esm.run/lit-html@3`) // import(\"lit-html@3.2.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"