31:T85f,# Green roof cost/benefit calculator. ## Quick insights into the costs and benefits of sustainable roofing. Welcome to the interactive visualization for green roofs in the Liesbosch.
This page provides the following insights: - An overview of how expensive it would be to implement green roofs over an entire area and what the impacts would be. - The cost and benefits of converting a single roof. There are five types of green roofs according to the data from matrixian: - **Green garden**: An intensive green roof which supports trees as if it were a normal park - **Solar roof with sedum**: An extensive green roof which supports sedum and solar panels - **Sedum roof**: An extensive green roof which supports sedum - **Solar**: A roof which supports solar panels - **Unsuitable space**: A roof which doesn't support any of the above ## Data source We utilized data from [the Matrixian Group's - Duurzame Daken Kansenkaart](https://www.matrixiangroup.com/producten/duurzame-daken-kansenkaart/).
More info on this can be found on [data.overheid.nl](https://data.overheid.nl/en/community/application/duurzame-daken-kansenkaart). ### Considerations and data quality The roof area that Matrixian provides doesn't seem to coincide with the physical roof area. Before implementation we should inquire why their roof areas are smaller than the physical roof area. This might be due to them removing areas which would be unsuitable (e.g. ceiling windows, etc) however no information was provided about how they calculated their numbers. On the map this is shown when hovering over a building by showing the "corrected area" (from Matrixian's data) and the "actual area" (from the physical size). In **all** calculations we utilize the provided area. ## How to interact with the visual? The entire page is interactive, modify the inputs below to see a change in the table, graph and map below. You can also hover over buildings on the map to see information about them. The cost for extensive green roofs with solar panels is calculated based on the cost of solar plus the cost of an extensive green roof.32:T51f,## Costs of a full implementation The table below shows costs/benefits if we would convert all buildings ${enableLiesboschArea ? "within Liesbosch" : ""} ${minimumRoofSize > 0 ? `with a roof larger than ${minimumRoofSize}m²` : ''} ${ Inputs.table(graphData, { columns: [ '#', 'roofType', 'total_provided_area', 'total_actual_area', 'cost', 'cost_m2', 'buildings', 'water_retention_gain', 'energy_gain', 'bio_gain' ], layout: "auto", format: { cost: (d) => `€${nFormatter(d, 2)}`, cost_m2: (d) => `€${nFormatter(d, 2)}`, water_retention_gain: (d) => `${nFormatter(d, 0)} liters`, bio_gain: (d) => `${nFormatter(d, 0)} kg`, energy_gain: (d) => `${nFormatter(d, 0)} kWh`, total_provided_area: (d) => nAreaFormatter(d, 0), total_actual_area: (d) => nAreaFormatter(d, 0), }, sort: "#", reverse: true, header: { roofType: 'Type of roof', cost: 'Cost', cost_m2: 'Cost/m²', buildings: 'Buildings', total_provided_area: 'Corrected area (matrixian)', total_actual_area: 'Actual area', water_retention_gain: 'Annual water retention increase', energy_gain: 'Annual energy increase', bio_gain: 'Biomass increase', } }) }33:T487,viewof mapContainer = { const featureIDs = new Set(); const geoJson = { type: "FeatureCollection", features: [] }; // const container = html`

`; const container = html`

`; yield container; const map = new mapboxgl.Map({ container, center: [5.12, 52.05], zoom: 13.5, style: "mapbox://styles/selenecodes/ckvgs50no1yw214pkrjm4dy05", attributionControl: false }).addControl( new mapboxgl.AttributionControl({ customAttribution: "© Matrixian" }) ); const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on("load", () => addLayers(data, map)); Object.keys(roofTypes).forEach((roofType) => { map.on("mouseenter", roofType, (e) => { map.getCanvas().style.cursor = "pointer"; const selectedFeature = e.features[0]; popup .setLngLat(e.lngLat) .setHTML(generatePopupHtml(selectedFeature)) .addTo(map); }); map.on("mouseleave", roofType, () => { map.getCanvas().style.cursor = ""; popup.remove(); }); }); }34:T737,roofTypes = ({ GardenRoofWithExtraWaterCapacity: { importance: 5, type: "Intensive green roof", cost: 175, description: "As a very rough indication, in the United Kingdom one can expect to pay around £150 per meter squared for the intensive variety. These figures will vary, however, and green roof installation companies will be able to give you a clearer figure based on your site’s specifications. Converting this to euro results in ~175 euro per square meter", source: "https://www.renewableenergyhub.co.uk/main/green-roof-information/the-cost-of-green-roofs/", color: "#afcbff" }, RoofWithSmallPlants: { importance: 3, type: "Extensive green roof", cost: 120, description: "As a very rough indication, in the United Kingdom one can expect to pay around £100 per meter squared of extensive green roof. Converting this to euro is ~120 euro per square meter", source: "https://www.renewableenergyhub.co.uk/main/green-roof-information/the-cost-of-green-roofs/", color: "#bffcc6" }, RoofWithSmallPlantsAndSolarPanels: { importance: 4, type: "Extensive green roof + solar", description: "An extensive green roof with solar. The cost is the combined cost of an extensive green roof plus the cost of solar", color: "#f3ffe3" }, SolarPanels: { importance: 2, type: "Solar roof", cost: 65, description: "A solar panel cost could range from $40 to $110 per square meter; this translates to $2 to $3 per Watt before tax. Converting a $75 average cost per square meter to euros is ~65 euro per square meter", source: "https://www.solarpowerfam.com/cost-of-solar-panels-per-square-meter/", color: "#ffff9e" }, UnsuitableSpace: { importance: 1, type: "Unsuitable area", color: "#606060" } })35:T4f2,graphData = data.map((geoJson) => { const features = geoJson.features; const roofType = roofTypes[geoJson.roofType]; const totalProvidedArea = _.sumBy( features, (feature) => feature.properties.flat_area ); const costPerM2 = costInputs[geoJson.roofType]; const cost = costPerM2 * totalProvidedArea; const totalEnergyGain = _.sumBy( features, (feature) => feature.properties.impact_energy_kWh ); const totalWaterRetainment = _.sumBy( features, (feature) => feature.properties.impact_water_retainment_l ); const totalBioDiversityKg = _.sumBy( features, (feature) => feature.properties.impact_biodiversity_kg ); // Calculate the actual geographical area using Turf. const totalActualArea = _.sumBy(geoJson.features, (feature) => turf.area(turf.polygon(feature.geometry.coordinates)) ); return { "#": roofType.importance, buildings: geoJson.features.length, cost: cost, cost_m2: costPerM2, roofTypeId: geoJson.roofType, roofType: roofType.type, energy_gain: totalEnergyGain, bio_gain: totalBioDiversityKg, water_retention_gain: totalWaterRetainment, total_provided_area: totalProvidedArea, total_actual_area: Math.round(totalActualArea.toFixed()) }; })36:Td26,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/bar-chart function BarChart( data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = (d) => d, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text marginTop = 20, // the top margin, in pixels marginRight = 0, // the right margin, in pixels marginBottom = 30, // the bottom margin, in pixels marginLeft = 40, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height = 400, // the outer height of the chart, in pixels xDomain, // an array of (ordinal) x-values xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // y-scale type yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] xPadding = 0.1, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis color = (d) => d // bar fill color } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Color = d3.map(data, color); // Compute default domains, and unique the x-domain. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; xDomain = new d3.InternSet(xDomain); // Omit any data not present in the x-domain. const I = d3.range(X.length).filter((i) => xDomain.has(X[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = (i) => `${X[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, (d) => d); const T = title; title = (i) => T(O[i], i, data); } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr( "style", "max-width: 100%; height: auto; height: intrinsic;background-color:#404040" ); svg .append("g") .attr("class", "axisWhite") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.25) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("text-anchor", "start") .text(yLabel) ); const bar = svg .append("g") .selectAll("rect") .data(I) .join("rect") .attr("fill", (i) => Color[i]) .attr("x", (i) => xScale(X[i])) .attr("y", (i) => yScale(Y[i])) .attr("height", (i) => yScale(0) - yScale(Y[i])) .attr("width", xScale.bandwidth()); if (title) bar.append("title").text(title); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .attr("class", "axisWhite") .call(xAxis); return svg.node(); }37:[{"id":"d6c559e156ab65f631845174273330c9063adfc7e6ae3b1fe1e14c9589052e99deaa658ca4c312faa0ef00a2fd92f0e9df3ccad1ee1583d09cb9b04d9293332d","href":"https://static.observableusercontent.com/files/d6c559e156ab65f631845174273330c9063adfc7e6ae3b1fe1e14c9589052e99deaa658ca4c312faa0ef00a2fd92f0e9df3ccad1ee1583d09cb9b04d9293332d","name":"data.json","type":"application/json","lastModified":1636237055188.937,"size":948},{"id":"7cebccf737f13e1d5aade175c0f0dde8b4188706ab98e4a538902969b7083a3883bdd4064bdcc3b825c9c53989f55672843340f5b0936b9fe9bff9f685157e1f","href":"https://static.observableusercontent.com/files/7cebccf737f13e1d5aade175c0f0dde8b4188706ab98e4a538902969b7083a3883bdd4064bdcc3b825c9c53989f55672843340f5b0936b9fe9bff9f685157e1f","name":"data@4.json","type":"application/json","lastModified":1636319045600.403,"size":1654390}] 2f:{"title":"Green roof cost/benefit calculator.","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1420,"value":"

Area settings:

","pinned":false,"hidden":false,"mode":"html"},{"id":1383,"value":"

Current query: All buildings ${enableLiesboschArea ? \"within Liesbosch\" : \"\"} ${minimumRoofSize > 0 ? `with a roof larger than ${minimumRoofSize}m²` : ''}

","pinned":false,"hidden":false,"mode":"html"},{"id":98,"value":"viewof minimumRoofSize = number({\n min: 0,\n max: maxRoofSize,\n value: 2000,\n description: `The minimum area for a roof to be within our selection`,\n title: `Minimum roof m²:`,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"viewof enableLiesboschArea = Inputs.toggle({\n label: \"Only show buildings within Liesbosch\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"

Cost settings:

The costs per square meter could be retrieved by asking a quote from a construction company. That quote can be put into the inputs below.

","pinned":false,"hidden":false,"mode":"html"},{"id":1141,"value":"viewof costSquareMeterIntensive = generateCostInput(\n \"GardenRoofWithExtraWaterCapacity\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"extensiveIntensive = number({\n value: costInputs[\"RoofWithSmallPlantsAndSolarPanels\"],\n description: `The cost of an ${roofTypes[\n \"RoofWithSmallPlantsAndSolarPanels\"\n ].type.toLowerCase()} per square meter`,\n title: `${roofTypes[\"RoofWithSmallPlantsAndSolarPanels\"].type} cost/m²:`,\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"viewof costSquareMeterExtensive = generateCostInput(\"RoofWithSmallPlants\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"viewof costSquareMeterSolar = generateCostInput(\"SolarPanels\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1444,"value":"### Available area in square meters\nBelow we can see the available area in square meters per type of green roof.","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"chart = BarChart(data, {\n x: (d) => roofTypes[d.roofType].type,\n y: (d) => _.sumBy(d.features, (feature) => feature.properties.flat_area),\n xDomain: data.map((d) => roofTypes[d.roofType].type),\n yDomain: [0, highestTotalSquareArea + 20000],\n yFormat: \"s\",\n yLabel: \"Total available m² in area\",\n width,\n height,\n color: (d) => roofTypes[d.roofType].color\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1448,"value":"## Costs of individual implementations\nBelow you can see which buildings are currently within our selection.\nIf you hover over a building you can see information about the cost of converting that building and what benefits converting that building would bring.","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"## How did we arrive at our default costs?\nBelow you can see how we arrived at our default costs.\n\n${Object.entries(roofTypes).map(([roofTypeId, roofType]) => md`\n

\n**Type:** ${roofType.type}
\n**Cost:** ${roofTypeId == \"RoofWithSmallPlantsAndSolarPanels\" ? (roofTypes[\"RoofWithSmallPlants\"].cost + roofTypes[\"SolarPanels\"].cost) : roofType.cost ?? 0}
\n**Description:** ${roofType.description ?? \"This area has no associated cost\"}
\n**Source:** [${roofType.source ?? \"\"}](${roofType.source ?? \"\"})
\n`)}","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"raw = FileAttachment(\"data@4.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1337,"value":"costInputs = ({\n GardenRoofWithExtraWaterCapacity: costSquareMeterIntensive,\n RoofWithSmallPlantsAndSolarPanels:\n costSquareMeterExtensive + costSquareMeterSolar,\n RoofWithSmallPlants: costSquareMeterExtensive,\n SolarPanels: costSquareMeterSolar,\n UnsuitableSpace: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"data = Object.entries(raw).map(([type, geoJson]) => {\n const features = geoJson.features.filter((feature) => {\n const withinLiesbosch = turf.booleanIntersects(\n LiesboschArea,\n turf.polygon(feature.geometry.coordinates)\n );\n\n const shouldBeInLiesbosch = enableLiesboschArea ? withinLiesbosch : true;\n const fitsMinRoofSize = feature.properties.flat_area > minimumRoofSize;\n // Only add new features that are within the Liesbosch area\n return shouldBeInLiesbosch && fitsMinRoofSize;\n });\n return {\n ...geoJson,\n roofType: type,\n features: features.map((feature) => replaceCost(feature, type))\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"intensiveRoof = graphData.find((type) => type.roofType == \"Green garden\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"extensiveRoof = graphData.find((type) => type.roofType == \"Sedum roof\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"maxRoofSize = _.maxBy(\n Object.values(raw).map((geoJson) =>\n _.maxBy(geoJson.features, (feature) => feature.properties.flat_area)\n ),\n (feature) => feature.properties.flat_area\n).properties.flat_area","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"highestTotalSquareArea = _.max(\n data.map((subset) =>\n _.sumBy(subset.features, (feature) => feature.properties.flat_area)\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":472,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":1497,"value":"function replaceCost(feature, type) {\n const cost = costInputs[type];\n return {\n ...feature,\n properties: {\n ...feature.properties,\n cost: feature.properties.flat_area * cost\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"function generateCostInput(roofType) {\n const roof = roofTypes[roofType];\n return number({\n value: roof.cost,\n description: `The cost of an ${roof.type.toLowerCase()} per square meter`,\n title: `${roof.type} cost/m²:`,\n submit: true\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"function generatePopupHtml(feature) {\n const turfArea = turf\n .area(turf.polygon(feature.geometry.coordinates))\n .toFixed();\n\n return `\n

Type: ${\n roofTypes[feature.layer.id].type\n }

Cost: €${nFormatter(\n feature.properties.cost,\n 1\n )}

Annual water retention: ${nFormatter(\n feature.properties.impact_water_retainment_l,\n 1\n )} liters

Annual energy increase: ${nFormatter(\n feature.properties.impact_energy_kWh,\n 1\n )} kWh

Corrected area (matrixian): ${\n feature.properties.flat_area\n }m²

Actual area: ${turfArea}m²

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"function addLayers(data, map) {\n if (enableLiesboschArea) {\n map.addSource(\"liesboschOutline\", {\n type: \"geojson\",\n data: liesboschGeoJson\n });\n\n map.addLayer({\n id: \"liesboschOutline\",\n type: \"line\",\n source: \"liesboschOutline\",\n layout: {},\n paint: {\n \"line-color\": \"rgba(255, 0, 0, .5)\",\n \"line-width\": 2\n }\n });\n }\n\n Object.values(data).forEach((geoJson) => {\n const roofType = geoJson.roofType;\n map.addSource(roofType, {\n type: \"geojson\",\n data: geoJson\n });\n\n map.addLayer({\n id: roofType,\n type: \"fill\",\n source: roofType,\n layout: {},\n paint: {\n \"fill-opacity\": 0.75,\n \"fill-color\": roofTypes[roofType].color\n }\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"## Config","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"TEMP_TOKEN = \"pk.eyJ1Ijoic2VsZW5lY29kZXMiLCJhIjoiY2t2aDdteThhM3RwdTJxb2syZjZqbjd0dCJ9.BtnrFEPsWw_qShFqR8DY3w\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"liesboschGeoJson = ({\n coordinates: [\n [\n [5.1110458, 52.058982],\n [5.1061106, 52.0493235],\n [5.1092005, 52.042857],\n [5.1164961, 52.0449686],\n [5.1221609, 52.0564225],\n [5.1110458, 52.058982]\n ]\n ],\n type: \"Polygon\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"LiesboschArea = turf.polygon(liesboschGeoJson.coordinates)","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":805,"value":"function nFormatter(num, digits) {\n // https://stackoverflow.com/a/9462382\n const lookup = [\n { value: 1, symbol: \"\" },\n { value: 1e6, symbol: \"M\" },\n { value: 1e9, symbol: \"B\" },\n { value: 1e12, symbol: \"T\" }\n ];\n const rx = /\\.0+$|(\\.[0-9]*[1-9])0+$/;\n var item = lookup\n .slice()\n .reverse()\n .find(function (item) {\n return num >= item.value;\n });\n return item\n ? (num / item.value).toFixed(digits).replace(rx, \"$1\") + item.symbol\n : \"0\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1018,"value":"function nAreaFormatter(num, digits) {\n // https://stackoverflow.com/a/9462382\n const lookup = [\n { value: 1, symbol: \"m²\" },\n { value: 1e6, symbol: \"km²\" }\n ];\n const rx = /\\.0+$|(\\.[0-9]*[1-9])0+$/;\n var item = lookup\n .slice()\n .reverse()\n .find(function (item) {\n return num >= item.value;\n });\n return item\n ? (num / item.value).toFixed(digits).replace(rx, \"$1\") + item.symbol\n : \"0\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken = TEMP_TOKEN;\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"MapboxGeocoder = {\n const geocoder = require(\"https://bundle.run/@mapbox/mapbox-gl-geocoder@4.7.4\");\n const href = await require.resolve(\n \"@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css\"\n );\n document.head.appendChild(html``);\n return geocoder;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"turf = require(\"@turf/turf@6.5.0/turf.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"_ = require(\"lodash@4.17.21/lodash.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"import { slider, number } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}