34:null 35:["$","title",null,{"children":"[NOx] Relatie sectordepositie & afstand | Observable PZH | Observable"}] 3b:T763,map2 = { const container = html`

`; yield container; let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }); let map = new L.Map(container, { layers: [base], center: L.latLng(52, 4.5), zoom: 12, }); let hexagon_layer = L.geoJson(styled_hexagons, {style}) hexagon_layer.bindPopup(function (Layer) { console.log(Layer.feature.properties.hectares) let popUpStr = ` Code natuurgebied: ${Layer.feature.properties.n2k_id}
Hier ligt ${Layer.feature.properties.hectares} ha stikstofgevoelige natuur.
De KDW (gewogen gemiddelde) is ${Layer.feature.properties.kdw} mol/ha/ja.
De huidige depositie is ${Layer.feature.properties.dep_huidig} mol/ha/ja.
Geselecteerd scenario depositie is ${Layer.feature.properties.dep_corr} mol/ha/ja.
Verschil met KDW is ${Layer.feature.properties.delta_kdw} mol/ha/ja.
` return popUpStr; }); hexagon_layer.addTo(map); map.fitBounds(hexagon_layer.getBounds()); const mapLegend = legend({ color: d3.scaleThreshold( ['0', 75, 150, 225, 300, 375, 450, '+'], ['#78c679', '#ffffb2', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#b10026'] ), title: "Overschrijding van de KDW [mol/ha/jaar]", tickSize: 0 }) L.Control.Leg = L.Control.extend({ onAdd: function(map) { return mapLegend } }); L.control.legend = function(opts) { return new L.Control.Leg(opts); }; L.control.legend({ position: 'bottomleft' }).addTo(map); }3c:T442,f = { let t = stacked_data_filtered[stacked_data_filtered.length - 1] let s = stacked_data_filtered[a] return { indu: s.industrie, indu_max: t.industrie, indu_buiten: Math.round((t.industrie - s.industrie)*10)/10, hdob: s.h_d_o_b, hdob_max: t.h_d_o_b, hdob_buiten: Math.round((t.h_d_o_b - s.h_d_o_b)*10)/10, landbouw: s.landbouw, landbouw_max: t.landbouw, landbouw_buiten: Math.round((t.landbouw - s.landbouw)*10)/10, consumenten: s.consumenten, consumenten_max: t.consumenten, consumenten_buiten: Math.round((t.consumenten - s.consumenten)*10)/10, verkeer_overig: s.verkeer_overig, verkeer_overig_max: t.verkeer_overig, verkeer_overig_buiten: Math.round((t.verkeer_overig - s.verkeer_overig)*10)/10, scheepvaart: s['(zee)-scheepvaart'], scheepvaart_max: t['(zee)-scheepvaart'], scheepvaart_buiten: Math.round((t['(zee)-scheepvaart'] - s['(zee)-scheepvaart'])*10)/10, wegverkeer: s.wegverkeer, scheepvaart_max: t.wegverkeer, wegverkeer_buiten: Math.round((t.wegverkeer - s.wegverkeer)*10)/10 } }3d:Tfe2,txt = `

Sector dep% factor dep% factor ${a}km

Industrie

Landbouw

Wegverkeer

Consumenten

Handel/overheid

Overig verkeer

(Zee-)scheepvaart

Bronnen uit zee

Buitenland

${f.indu}%

${f.landbouw}%

${f.wegverkeer}%

${f.consumenten}%

${f.hdob}%

${f.verkeer_overig}%

${f.scheepvaart}%

${f.indu_buiten}%

${f.landbouw_buiten}%

${f.wegverkeer_buiten}%

${f.consumenten_buiten}%

${f.hdob_buiten}%

${f.verkeer_overig_buiten}%

${f.scheepvaart_buiten}%

--todo

`3e:[{"id":"c6edeb54d1defa7692884fe447cfd62256019ca729f2c9cee0cd4c50b4546b5802821476c95f0e4ec368e735c3ffafcd52d140aca1ed1ec9ec99a3c1c0588fbf","href":"https://static.observableusercontent.com/files/c6edeb54d1defa7692884fe447cfd62256019ca729f2c9cee0cd4c50b4546b5802821476c95f0e4ec368e735c3ffafcd52d140aca1ed1ec9ec99a3c1c0588fbf","name":"64hex_results.json","type":"application/json","lastModified":1618498007432.28,"size":549282},{"id":"41e9893ac3c5a3ff6911fa9b7789a9e3d40680711beadb52806495397568aa91680a16c0a1ecd5f7dd5335cc9e71aea3c7c5cb9772c242730475879456f84c16","href":"https://static.observableusercontent.com/files/41e9893ac3c5a3ff6911fa9b7789a9e3d40680711beadb52806495397568aa91680a16c0a1ecd5f7dd5335cc9e71aea3c7c5cb9772c242730475879456f84c16","name":"Depositieherkomst_totaal@2.csv","type":"text/csv","lastModified":1618498007432.28,"size":159715}] 39:{"id":"5d278b78ccb91747","slug":"nox-relatie-sectordepositie-afstand","title":"[NOx] Relatie sectordepositie & afstand","thumbnail":"76fbc1508dbba619c2625f30b81adda3fb27d7b93822f9693ec4abc0abbffdc4","access_level":"public","create_time":"$D2021-04-15T14:46:47.432Z","update_time":"$D2021-04-15T14:46:47.432Z","view_time":null,"first_public_time":"$D2021-04-15T14:46:53.050Z","has_unpublished_edits":null,"fork":{"id":"5891d07e7acba7ea","slug":"relatie-sectordepositie-afstand","title":"[NOx] Relatie sectordepositie & afstand","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":1823,"publish_version":1823,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"[NOx] Relatie sectordepositie & afstand","cells":[{"id":0,"value":"md`\n# [NOx] Relatie sectordepositie & afstand\nDe grafiek (type: 'stacked-area') geeft de cumulatieve sectordepositie als percentage van de totale depositie op een natuurgebied. \n\nData: [extract uit eigen analyse](geo.zuid-holland.nl/kaart/stikstof).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"viewof dd = {\n const _ = select({\n title: \"Selecteer een natuurgebied\",\n options: n2ks,\n value: 103\n });\n return _;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"viewof input_x = slider({\n min: 10, \n max: 400, \n step: 1, \n value: 100, \n title: \"bereik x-as (km)\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"chart_stacked = { \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n\n svg.append(\"defs\")\n .append(\"clipPath\")\n .attr(\"id\", \"mask\")\n .style(\"pointer-events\", \"none\")\n .append(\"rect\")\n .attr(\"x\", margin.left)\n .attr(\"y\", margin.top)\n .attr(\"width\", width - margin.left - margin.right)\n .attr(\"height\", height - margin.top - margin.bottom);\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(series)\n .join(\"path\")\n .attr(\"fill\", ({key}) => color(key))\n .attr(\"d\", area)\n .attr(\"clip-path\", \"url(#mask)\")\n .append(\"title\")\n .text(({key}) => key)\n \n \n // x leader line \n svg.append(\"line\")\n .attr(\"x1\", x(a))\n .attr(\"y1\", y(0))\n .attr(\"x2\", x(a))\n .attr(\"y2\", y(100))\n .style(\"stroke\", \"black\")\n .style(\"width\", \"0.4px\")\n .style(\"fill\", \"none\")\n .attr(\"clip-path\", \"url(#mask)\")\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"key = swatches({color, marginLeft: margin.left, columns: \"180px\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"{\n let v = stacked_data.filter(x => x.afstand === a && x.n2k === parseInt(dd))[0]\n let n2k = n2ks.filter(x => x.value === parseInt(dd)).map(x => x.label)\n \n return md`${n2k} @ ${a}km \nLandbouw: ${v.landbouw}% \nIndustrie: ${v.industrie}% \nWegverkeer: ${v.wegverkeer}% \n(Zee-)scheepvaart: ${v['(zee)-scheepvaart']}% \nVerkeer overig: ${v.verkeer_overig}% \nConsumenten (wonen): ${v.consumenten}% \nHandel, diensten, overheid: ${v.h_d_o_b}% \n`\n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`---\n# Reductiescenarios\nOp advies van Remkes, moet de landelijke stikstofuitstoot per 2030 worden gehalveerd. Deze halvering bekent helaas niet dat alle Zuid-Hollandse natuurgebieden ook daadwerkelijk vrij zijn van overbelasting. Naast de landelijke winst blijft er dus ook lokaal nog een opgave over. Onderstaande visualisatie helpt bij het verkennen van deze opgave.\n\n#### Leeswijzer:\nBinnen een afstand *x* van een natuurgebied, wordt een bepaald percentage van de depositie veroorzaakt. In onderstaande slider kan deze drempelafstand worden opgegeven. De tool berekent dan de procentuele overbelasting in het scenario dat alle emissies *buiten* deze drempelafstand met 50% worden gereduceerd. \nVervolgens kan per sector, per regio (binnen drempel | buiten drempel) de reductiefactor worden aangepast. Het effect van deze aanpassing wordt live weergegeven. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"viewof a = slider({\n min: 0, \n max: 399, \n step: 1, \n value: 399, \n title: \"Drempelafstand (km)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1710,"value":"md`#### Reductiefactoren tweaken:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"viewof stats = {\n const form = html`${txt}`;\n form.oninput = () => form.value = [\n form.i_bin.valueAsNumber, \n form.l_bin.valueAsNumber, \n form.w_bin.valueAsNumber,\n form.c_bin.valueAsNumber,\n form.h_bin.valueAsNumber,\n form.o_bin.valueAsNumber,\n form.s_bin.valueAsNumber,\n \n form.i_bui.valueAsNumber, \n form.l_bui.valueAsNumber, \n form.w_bui.valueAsNumber,\n form.c_bui.valueAsNumber,\n form.h_bui.valueAsNumber,\n form.o_bui.valueAsNumber,\n form.s_bui.valueAsNumber,\n form.z_bui.valueAsNumber,\n form.b_bui.valueAsNumber,\n ];\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"html`\n

${-factor_binnen}% + ${-factor_buiten}% = ${Math.round((-factor_totaal)*100)/100}%
Totaal opp: ~${hex_acres_stats.ha_tot}ha. Nu overbelast: ${hex_acres_stats.prc_nu}%, in scenario: ${hex_acres_stats.prc_corr}%

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"function style(feature) {\n return {\n fillColor: getColor(feature.properties.delta_kdw),\n weight: 1,\n opacity: 1,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"function getColor(d) {\n \n return d > 450 ? '#b10026' :\n d > 375 ? '#e31a1c' :\n d > 300 ? '#fc4e2a' :\n d > 225 ? '#fd8d3c' :\n d > 150 ? '#feb24c' :\n d > 75 ? '#fed976' :\n d > 0 ? '#ffffb2' :\n '#78c679';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md`---\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"md`### Stacked Area Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"stacked_data = Object.assign(d3.csvParse(await FileAttachment(\"Depositieherkomst_totaal@2.csv\").text(), d3.autoType), {y: \"%\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"stacked_data_filtered = {\n const {columns, y} = stacked_data\n \n const filterBy = parseInt(dd)\n let features = stacked_data.filter(d => d.n2k === filterBy)\n features.columns = columns\n features.y = y\n return features\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"series = d3.stack().keys(stacked_data_filtered.columns.slice(2))(stacked_data_filtered)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"md`### Leaflet & input panel`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"raw_hexagons = FileAttachment(\"64hex_results.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"filtered_hexagons = {\n let f = { ...raw_hexagons}\n f.features = []\n\n // Select gives us a string, so convert to int\n let ddint = parseInt(dd)\n\n Object.values(raw_hexagons.features).forEach(function(hex) {\n if (hex.properties.n2k_id === ddint) {\n f.features.push(hex)\n }\n });\n return f\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"styled_hexagons = {\n \n // bereken schaalfactor\n stats[0] \n \n let f = { ...filtered_hexagons}\n f.features = []\n \n Object.values(filtered_hexagons.features).forEach(function(hex) {\n let temp_hex = { ...hex}\n \n let dep = temp_hex.properties.dep_huidig\n let corr = dep * factor_totaal/100\n \n let kdw = temp_hex.properties.kdw\n \n \n temp_hex.properties.dep_huidig = Math.round(dep*100)/100\n temp_hex.properties.dep_corr = Math.round((dep - corr)*100)/100\n \n temp_hex.properties.delta_kdw = Math.round((temp_hex.properties.dep_corr - kdw)*100)/100\n \n f.features.push(temp_hex)\n });\n console.log(f)\n return f\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1245,"value":"hex_acres_stats = {\n \n let s = {\n ha_tot: 0,\n ha_ob: 0,\n ha_ob_corr: 0,\n }\n \n Object.values(styled_hexagons.features).forEach(function(hex) {\n s.ha_tot += hex.properties.hectares\n if (hex.properties.dep_huidig > hex.properties.kdw) {\n s.ha_ob += hex.properties.hectares\n }\n if (hex.properties.dep_corr > hex.properties.kdw) {\n s.ha_ob_corr += hex.properties.hectares\n } \n });\n \n s.prc_nu = Math.round(s.ha_ob / s.ha_tot * 1000)/10\n s.prc_corr = Math.round(s.ha_ob_corr / s.ha_tot * 1000)/10\n\n return s\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`## Size & Margins`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`## Axis & Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"y = d3.scaleLinear()\n .domain([0, 100]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(stacked_data_filtered.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1616,"value":"y_right = d3.scaleLinear()\n .domain([0, 100]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1619,"value":"yAxis_right = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisRight(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(stacked_data_filtered.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"x = d3.scaleLinear()\n .domain([0,input_x])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 50).tickSizeOuter(0))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"y\", -10)\n .attr(\"x\", -15)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"color\", \"white\")\n .text('km'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"area = d3.area()\n .x(d => x(d.data.afstand))\n .y0(d => y(d[0]))\n .y1(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"color = d3.scaleOrdinal()\n .domain(stacked_data_filtered.columns.slice(2))\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"mapcolor = d3.scaleSequential(d3.interpolateRdPu);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1765,"value":"n2ks = [\n { value: 88, label: \"Kennemerland-Zuid\" },\n { value: 96, label: \"Coepelduynen\" },\n { value: 97, label: \"Meijendel & Berkheide\" },\n { value: 98, label: \"Westduinpark & Wapendal\" },\n { value: 99, label: \"Solleveld & Kapittelduinen\" },\n { value: 100, label: \"Voornes Duin\" },\n { value: 101, label: \"Duinen Goeree & Kwade Hoek\" },\n { value: 103, label: \"Nieuwkoopse Plassen & De Haeck\" },\n { value: 112, label: \"Biesbosch\" },\n { value: 114, label: \"Krammer-Volkerak\" },\n { value: 115, label: \"Grevelingen\" },\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md`## HTML & Styling Form `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"factor_binnen = {\n let x = f.indu / 100 * stats[0] + \n f.landbouw / 100 * stats[1] + \n f.wegverkeer / 100 * stats[2] +\n f.consumenten / 100 * stats[3] +\n f.hdob / 100 * stats[4] +\n f.verkeer_overig / 100 * stats[5] + \n f.scheepvaart / 100 * stats[6]\n \n \n return Math.round(x * 100)/100\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"factor_buiten = {\n let x = f.indu_buiten / 100 * stats[7] + \n f.landbouw_buiten / 100 * stats[8] + \n f.wegverkeer_buiten / 100 * stats[9] +\n f.consumenten_buiten / 100 * stats[10] +\n f.hdob_buiten / 100 * stats[11] +\n f.verkeer_overig_buiten / 100 * stats[12] + \n f.scheepvaart_buiten / 100 * stats[13]\n \n \n return Math.round(x * 100)/100\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"factor_totaal = factor_binnen + factor_buiten","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Imports `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`### D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"L = {\n let L = await require(\"leaflet@1.6.0\").then(await require(\"proj4leaflet\"));\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1542,"value":"import {swatches, legend} from \"@d3/color-legend\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 3a:"$39:body"