34:null 35:["$","title",null,{"children":"Sector depositie per natuurgebied per jaar (% van totale depositie) | Observable PZH | Observable"}] 3b:T868,donut = { const radius = Math.min(width, height) / 2; const arc = d3.arc() .innerRadius(radius * 0.6) .outerRadius(radius * 0.9); const pie = d3.pie() .padAngle(0.005) .sort(null) .value(d => d.value); const arcs = pie(data); const svg = d3.create('svg') .attr('viewBox', [-width / 6 - 75, -height / 2, width, height]); const colors_ = [ "#fd7f6f", "#7eb0d5", "#b2e061", "#bd7ebe", "#ffb55a", "#ffee65", "#beb9db", "#fdcce5", "lightgrey" ]; const colors = ["#1553B6", "#EB7E30", "#049587", "#F8C753", "#EB648B", "#A93790", "#8B572A", "#A0A0A0", ] const sectorNames = ["scheepvaart", "landbouw", "industrie", "buitenland", "wegverkeer", "vervoer en overig verkeer", "ammoniak van zee", "overige sectoren"] const color2 = d3.scaleOrdinal() .domain(sectorNames)//data.map(d => d.sector)) .range(colors) svg.selectAll('path') .data(arcs) .join('path') .attr('fill', d => color2(d.data.sector)) .attr('d', arc) .append('title') .text(d => `${d.data.sector}: ${d.data.value}`); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.02).append("tspan") .attr("x", 0) .attr("y", "0") .attr("font-weight", "bold") .attr("stroke-opacity", 1) .attr("stroke", "#FFF") .attr("stroke-width", "1.2px") .text(d => Math.round(d.data.value*100) + '%')) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.02).append("tspan") .attr("x", 0) .attr("y", "0em") .attr("font-weight", "bold") .text(d => Math.round(d.data.value*100) + '%')); const legend = svg .append('g') .attr('transform', `translate(170,${-(23*8)/1.45})`) .append(() => ordinalLegend(sectorNames, colors)) return svg.node(); }3c:T804,function multiAutoSelect(config = {}) { const { value, title, description, disabled, autocomplete = "off", placeholder, size, options, list = "options" } = Array.isArray(config) ? { options: config } : config; const optionsSet = new Set(options); const form = input({ type: "text", title, description, attributes: { disabled }, action: fm => { const addSelectedOption = d => { const ele = html` ${d} ❌ `; ele.querySelector("button").addEventListener("click", b => { fm.value.splice(fm.value.indexOf(d), 1); renderSelection(); fm.dispatchEvent(new CustomEvent("input")); fm.input.focus(); }); return ele; }; function renderSelection() { fm.output.innerHTML = ""; for (let o of fm.value) { fm.output.appendChild(addSelectedOption(o)); } } fm.input.value = ""; fm.value = value || []; fm.onsubmit = e => e.preventDefault(); fm.input.oninput = function(e) { e.stopPropagation(); if ( optionsSet.has(fm.input.value) && fm.value.indexOf(fm.input.value) === -1 ) { fm.value.push(fm.input.value); renderSelection(); fm.dispatchEvent(new CustomEvent("input")); fm.input.value = ""; } }; renderSelection(); }, form: html` ` }); form.output.style["margin-left"] = "0px"; return form; }3d:[{"id":"183e41c3acf855bc36d9a5e3032bddf34c2e8d541006135181802f5ffb86621f9b6fbafd6da7bb752685921971fcdea5c89f40984e5f12816e4440c0880720e8","href":"https://static.observableusercontent.com/files/183e41c3acf855bc36d9a5e3032bddf34c2e8d541006135181802f5ffb86621f9b6fbafd6da7bb752685921971fcdea5c89f40984e5f12816e4440c0880720e8","name":"deposities_per_natuurgebied_all.csv","type":"text/csv","lastModified":1610369999803.976,"size":44755},{"id":"9a348d3b59f4f011a14f314d683181eb25806e5614471bb0ddc6529947ea8342b742a92c865247a224040e283474dd324d0f239b2f5298fecfd5f581355f2a0a","href":"https://static.observableusercontent.com/files/9a348d3b59f4f011a14f314d683181eb25806e5614471bb0ddc6529947ea8342b742a92c865247a224040e283474dd324d0f239b2f5298fecfd5f581355f2a0a","name":"PZH-logo-Liggend-RGB-1.0.png","type":"image/png","lastModified":1620213630132.734,"size":64680}] 39:{"id":"83518404974946ab","slug":"depositievracht-mol-jaar-per-sector-per-natuurgebied","title":"Sector depositie per natuurgebied per jaar (% van totale depositie)","thumbnail":"6d1d152a07def3af2a16de2cba81f59f641ddcae7c91aa24cbd57ec5471c89a8","access_level":"public","create_time":"$D2021-01-11T12:59:59.803Z","update_time":"$D2021-05-31T12:37:32.218Z","view_time":null,"first_public_time":"$D2021-01-11T13:00:05.397Z","has_unpublished_edits":null,"fork":{"id":"923a6408745d2ccc","slug":"stikstofdepositie-per-sector-per-natuurgebied","title":"[NOx] Depositie per natuurgebied per jaar (% van totaal)","owner":{"id":"d19a230dabb035d0","login":"thijsschouten","name":"T.E. Schouten"}},"stars":0,"starred":false,"owner":{"type":"team","id":"84dc6f44d7823163","login":"provinciezuidholland","name":"Observable PZH","avatar_url":"https://avatars-next.observableusercontent.com/85be86670a014f1755d908690e0dbdfafb97cc71e8f08cbc96bf38616da5e9f1","tier":"starter_2024","bio":"","following":false},"version":777,"publish_version":777,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4d56c07235543a3","login":"provinciezuidholland","name":"Observable PZH","avatar_url":"https://avatars-next.observableusercontent.com/85be86670a014f1755d908690e0dbdfafb97cc71e8f08cbc96bf38616da5e9f1","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d4d56c07235543a3","login":"provinciezuidholland","name":"Observable PZH","avatar_url":"https://avatars-next.observableusercontent.com/85be86670a014f1755d908690e0dbdfafb97cc71e8f08cbc96bf38616da5e9f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sector depositie per natuurgebied per jaar (% van totale depositie)","cells":[{"id":0,"value":"title = html`

Sector depositie per natuurgebied per jaar (% van totale depositie)

`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"viewof ch1 = multiAutoSelect({\n options: columns,\n placeholder: \"Selecteer natuurgebied...\",\n autocomplete: \"on\",\n value: [\"Biesbosch\"],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`\n---\nOverige info (komt niet in LLS viewer)\n#### Cijfers ${ch1.join(', ')}\nDepositievracht in mol/jaar op de geselecteerde natuurgebieden.\n\n${str}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"footer = md`----\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"raw_data = FileAttachment(\"deposities_per_natuurgebied_all.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"data = {\n let r = {}\n \n // return dummy data if none selected\n if(1 > ch1.length) {\n return [{sector: \"dummy\", value: 1}]\n }\n \n Object.values(raw_data).forEach(x => {\n if (ch1.includes(x.natura2001)) {\n if (r[x.sectorgroep] == undefined){\n r[x.sectorgroep] = parseInt(x['depositie_2018.sum'])\n } else {\n r[x.sectorgroep] += parseInt(x['depositie_2018.sum'])\n }\n }\n })\n \n \n let r2 = []\n \n let max = 0\n Object.entries(r).forEach(x => {\n max += x[1]\n })\n \n Object.entries(r).forEach(x => {\n r2.push({sector: x[0], value: Math.round(x[1]/max*100,2)/100})\n })\n \n return r2\n \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"str = {\n let r = {}\n Object.values(raw_data).forEach(x => {\n if (ch1.includes(x.natura2001)) {\n if (r[x.sectorgroep] == undefined){\n r[x.sectorgroep] = parseInt(x['depositie_2018.sum'])\n } else {\n r[x.sectorgroep] += parseInt(x['depositie_2018.sum'])\n }\n }\n })\n \n let r2 = \"\"\n Object.entries(r).forEach(x => {\n x[0] = x[0].charAt(0).toUpperCase() + x[0].slice(1)\n r2 = r2.concat(x[0], \": \", x[1], \"
\")\n //r2.push({sector: x[0], value: x[1]})\n })\n \n return r2\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"columns = {\n return raw_data.map(item => item.natura2001)\n .filter((value, index, self) => self.indexOf(value) === index).sort()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"mutable selection = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// Piechart object aanroepen\npie = {\n return d3.pie()\n .padAngle(0.005)\n .sort(null)\n .value(d => d.quantity)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"arc = {\n const radius = Math.min(width, height) / 2;\n return d3.arc()\n .innerRadius(radius * 0.67)\n .outerRadius(radius - 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {input, checkbox, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@v6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"ordinalLegend = (classes, colorScheme) => {\n \n const boxHeight = 23\n const h = classes.length*boxHeight\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", 140)\n .attr(\"height\", h)\n \n const y = d3.scaleBand()\n .domain(classes)\n .range([0, h])\n .padding(0.4) \n \n svg.selectAll(\"rect\")\n .data(classes)\n .join(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", d => y(d))\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", y.bandwidth())\n .style(\"fill\", (d,i) => colorScheme[i])\n \n svg.selectAll(\"text\")\n .data(classes)\n .join(\"text\")\n .attr(\"x\", 5 + y.bandwidth())\n .attr(\"y\", d => y(d) + y.bandwidth()/2)\n .attr(\"dy\", 5) \n .text(d=>d.charAt(0).toUpperCase() + d.slice(1))\n .style(\"font\", \"10px sans-serif\");\n\n return svg.node()\n \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 3a:"$39:body"