2b:null 2c:["$","title",null,{"children":"Eingebautes Material nach Deponietypen im Kanton Zürich [Bar] - wird ersetzt | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T5d6,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 = yScale.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(yScale) .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("x", 0) // .attr("dy", -4) .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. t") ); }32:[] 2f:{"id":"5684f2c5a5e396bf","slug":null,"title":"Eingebautes Material nach Deponietypen im Kanton Zürich [Bar] - wird ersetzt","thumbnail":"d48f01321c49f21a0f3091b4fc6c766269a96ac2d84271594a7f595322311ff0","access_level":"public","create_time":"$D2023-09-28T13:32:08.019Z","update_time":"$D2025-04-01T05:54:03.230Z","view_time":null,"first_public_time":"$D2024-01-25T16:03:26.328Z","has_unpublished_edits":null,"fork":false,"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":1221,"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":2,"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":"Eingebautes Material nach Deponietypen im Kanton Zürich [Bar] - wird ersetzt","cells":[{"id":0,"value":"# Eingebautes Material nach Deponietypen im Kanton Zürich [Bar] - wird ersetzt\n\nIn den vergangenen Jahren gab es im Kanton Zürich eine Zunahme der insgesamt deponierten Mengen. Bei der gesamten Einbaumenge über alle Kompartimente Typ B, C, D und E handelt es sich um verschieden stark belastete Materialien. Grundsätzlich setzen sich die eingebauten Mengen aus Altlastenmaterialien, Asbest, Bauabfall, Kehrichtschlacke, Sandfangmaterial und übrige Deponiematerialien zusammen. Zusätzlich bei den Kompartimenten C, D und E kommen folgende eingelagerte Materialien hinzu: Rückstände der Industrie, Strassensammler und Strassenwischgut.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":918,"value":"wrapper = {\n return render(\n lit.html`\n

Eingebautes Material nach Deponietypen im Kanton Zürich

In Tausend ${einheit}

\n \n

\n ${viewof chartLegend}\n

\n ${viewof chart}\n

\n \n

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

\n `,\n this\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"### Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"viewof chart = {\n const dimensions = chartDimensions;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, dimensions.width, dimensions.height])\n .attr(\"aria-hidden\", \"true\")\n .style(\"display\", \"block\");\n\n svg.call(yAxis);\n // Append a group for each series, and a rect for each element in the series.\n svg\n .append(\"g\")\n .selectAll()\n .data(stack)\n .join(\"g\")\n .attr(\"fill\", (d) => colors(d.key))\n // .attr(\"stroke\", \"white\")\n .selectAll(\"rect\")\n .data(stack)\n .data((D) => D.map((d) => ((d.key = D.key), d)))\n .join(\"rect\")\n .attr(\"x\", barXPosition) // Entspricht dem Jahr\n .attr(\"y\", (d) => yScale(d[1]))\n .attr(\"width\", barWidth)\n .attr(\"height\", (d) => yScale(d[0]) - yScale(d[1]));\n svg.call(xAxis);\n svg\n .selectAll(\"text\")\n .attr(\"font-family\", \"HelveticaNowRegular, Arial, sans-serif\")\n .attr(\"font-size\", responsiveValue(\"12px\", \"14px\"));\n\n return Object.assign(svg.node(), { scales: { colors } });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"viewof chartLegend = swatches(viewof chart.scales.colors, {\n columns: \"150px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":924,"value":"dataPath = \"https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00002442_00004883.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"fetchedData = await d3.csv(dataPath, (d) => ({\n ...d,\n Jahr: new Date(d.Jahr),\n Deponietyp: d.Deponietyp,\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":462,"value":"data = fetchedData\n .filter((d) => d.Deponietyp != \"Total\")\n // .sort((a, b) => d3.ascending(a.Jahr, b.Jahr))\n // .sort((a, b) => d3.ascending(a.Deponietyp, b.Deponietyp))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"years = Object.keys(\n data.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":781,"value":"typen = Object.keys(\n data.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":931,"value":"einheit = Object.keys(\n data.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":667,"value":"// Range of years\nxExtent = d3.extent(data.map((d) => d.Jahr))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"// add one time unit of padding to make sure bars don't overlap with y-axis\npaddedExtent = [\n d3.min(data.map((d) => d3.timeYear.offset(d.Jahr, -1))),\n d3.max(data.map((d) => d.Jahr)) //d3.max(data.map((d) => d3.timeYear.offset(d.Jahr, 1)))\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// Stack generator: outputs an array of four arrays. Each array is a layer of the stack (= Deponietyp).\n// Each layer contains 35 arrays corresponding to the number of years on that layer.\nstack = d3\n .stack()\n .keys(typen)\n // .keys(d3.union(data.map((d) => d.Deponietyp))) // distinct series keys, in input order\n .value(([, D], key) => D.get(key).Wert)(\n // get value for each series key and stack\n d3.index(\n data,\n (d) => d.Jahr,\n (d) => d.Deponietyp\n )\n) // group by stack then series key","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"d3.index(\n data,\n (d) => d.Jahr,\n (d) => d.Deponietyp\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"### Chart components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"margin = ({ top: 20, right: 15, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"height = {\n const height = 500; \n const aspectRatio = width / height;\n return width >= breakpoints[1] ? 500 : Math.max(300, Math.floor(width / 1.5));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"chartDimensions = {\n return {\n width,\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":662,"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":678,"value":"// position each bar so it's centered on the tick mark (which is the center of the bar)\nbarXPosition = (d) => xTime(d.data[0]) - barWidth / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"// A time-based scale that allows for a dynamic number of tick labels depending on the available width\nxTime = d3\n .scaleTime()\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":1202,"value":"paddedExtent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"d3.timeYear.range(...xTime.domain())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"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() % 5 === 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":32,"value":"yScale = d3\n .scaleLinear()\n .domain([0, d3.max(stack, (d) => d3.max(d, (d) => d[1]))])\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":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"### Color & styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"zhBlues = [\"#c3d7ea\", \"#81b6e5\", \"#3a93d9\", \"#0070b4\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"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":17,"value":"colors = {\n return d3.scaleOrdinal(\n d3.union(data.map((d) => d.Deponietyp)),\n zhBlues\n //d3.schemeGnBu[9].slice(3)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"breakpoints = [0, 640, 768]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"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":928,"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":747,"value":"### Imports & libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"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":618,"value":"import { Swatches as swatches } from \"d4a818dd9bd3a1cf\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"