31:T453,We use Simplified Additive Weighting (SAW) method to calculate the viable location for decarbonisation prioritisation. Using the parameters defined [here](https://observablehq.com/d/0e9c91c84c2d055a?collection=@danylaksono/cambridge-data-exploration), we applied weights to each parameters, and subsequently calculates scores for our unit of analysis (LSOA boundary in this case). Given the 8 parameters we selected in the notebook, the calculation of Simplified Additive Weighting (SAW) is as follow: `∑ (c_i * w_i)` where: * c_i: Score of LSOA i on each parameter (i = 1 to 8) * gens_i: Annual photovoltaic potential for LSOA i * airs_i: Number of houses suitable for air source heat pump in LSOA i * grnd_i: Number of houses suitable for ground source heat pump in LSOA i * epcs_i: Number of houses with EPC rating higher than E in LSOA i * elec_i: Annual electricity demand for LSOA i * gass_i: Annual gas demand for LSOA i * povr_i: Percentage of fuel poverty in LSOA i * depri_i: Deprivation index for LSOA i * w_i: Weight assigned to each parameter (i = 1 to 8) 32:Tab9,html`

Glyph settings

${viewof tile}

${viewof glyphMode}

${viewof discretisation}

${viewof gridSize}

${viewof gridTransparency}

${viewof glyphTransparency}

${viewof showTooltip}

${viewof showRelative}

Parameter weights

${viewof pv_input}

${viewof ashp_input}

${viewof gshp_input}

${viewof insulation_input}

${viewof electricity_input}

${viewof gas_input}

${viewof fuel_input}

${viewof depriv_input}

Detail on demand ${viewof overview}

`33:T5cc,decarbonisationGlyph = { // await visibility(); const decarbonisationGlyph = glyphMap({ data: grid_scores, getLocationFn: (row) => [row.long, row.lat], cellSize: gridSize, mapType: tile, // "CartoPositronNoLabel", discretisationShape: discretisation, width: 600, height: 500, // greyscale: true, tileWidth: 150, glyph: { initFn: initFn, aggrFn: appendRecordsAggrFn, postAggrFn: postAggrFn, // drawFn: drawFn, // postDrawFn: drawLegend tooltipTextFn: (cell) => { if (cell.averages) { pv_input; ashp_input; gshp_input; insulation_input; electricity_input; gas_input; fuel_input; depriv_input; mutable overlaiddata = [cell.averages, cell.score]; // const text = cell.averages["pv_annualgen"]; if (showTooltip) { const textBuilder = []; for (const variable of selected_parameters) { const average = cell.averages[variable] ?? "-"; const percentage = average ? Math.round(average) + "%" : "-"; textBuilder.push(`${variable}=${percentage};
`); } textBuilder.push(`"Score"=${cell.score};
`); const text = textBuilder.join("").slice(0, -4); // Remove trailing "; " return text; } else return ""; } } } }); return decarbonisationGlyph; }34:T46d,function postAggrFn(cells, cellSize, global, panel) { for (const cell of cells) { // console.log(cell.record); cell.averages = {}; if (cell.records) { // Averages the values for each cell // console.log("summarise", reshapeData(aggregatesCell(cell.records))); cell.averages = aggregateValues(cell.records, selected_parameters); // cell value aggregation function // cell score const cellScores = cell.records.map((d) => d.score); cell.score = d3.max(cellScores); // get the largest score across all data in the cell const historical_score = []; // console.log(historical_score); // let lastWeight = historical_weights; // // console.log("historical_score", historical_score); // let dataPoints = {}; // for (let i = 0; i < selected_parameters.length; i++) { // console.log( // selected_parameters[i], // historical_weights[selected_parameters[i]] // ); // // // dataPoints[selected_parameters[i]] = lastWeight[selected_parameters[i]]; // } // console.log("avg", lastWeight); } } }35:T814,function interactiveDrawFn(mode) { return function drawFn(cell, x, y, cellSize, ctx, global, panel) { if (!cell) return; const padding = 2; ctx.globalAlpha = 1; // Show the map (very slow, might all the way stop the notebook working) // drawGeoPathsToCanvas(lsoaData, ctx); // Ways to access mouse and zoom for linked views // mutable zoom = Math.log2(panel.getTransform().k).toFixed(2); // const mouseCoord = [global.mouseX, global.mouseY]; // mutable mouse = panel.screenToCoord(mouseCoord); // console.log("locafn", panel.screenToCoord(mouse)); var grid_long = cellSize - padding * 2; var grid_wide = cellSize - padding * 2; //draw cell background const boundary = cell.getBoundary(padding); // console.log("score: ", cell.score); ctx.fillStyle = colourMap(cell.score); ctx.beginPath(); ctx.moveTo(boundary[0][0], boundary[0][1]); for (let i = 1; i < boundary.length; i++) ctx.lineTo(boundary[i][0], boundary[i][1]); ctx.closePath(); ctx.fill(); ctx.globalAlpha = glyphTransparency; if (mode == "Bar Chart") { drawBarChart3( ctx, x, y, cellSize, cell.averages, colours, colourMap(cell.score), padding ); if (showRelative) { drawBarChartOverlap( ctx, x, y, cellSize, overlaiddata[0], // colours, // colourMap(cell.score), padding ); } } else if (mode == "Rose Chart") { drawNightingaleRoseChart3( ctx, x, y, cellSize, cell.averages, colours, padding ); if (showRelative) { drawNightingaleRoseOverlap( ctx, x, y, cellSize, overlaiddata[0], // colours, padding ); } } else if (mode == "Historical Score") { drawLineChart(ctx, x, y, cellSize, cell.averages); } ctx.globalAlpha = 1; }; }36:T6e7,function drawNightingaleRoseChart( ctx, x, y, cellSize, data, // Aggregated data colours, padding = 2 ) { let radius = (cellSize - 2 * padding) / 2; // Calculate center of the chart let centerX = x; //+ padding; //+ radius; let centerY = y; // + padding; //+ radius; // Calculate angle of each segment let segmentAngle = (2 * Math.PI) / Object.keys(data).length; // Iterate over each data type (parameter) Object.keys(data).forEach((type, i) => { // Make the lower color 'whiter' const colorScale = d3 .scaleLinear() .domain([0, 100]) .range(["white", colours[i]]); const hslColour = d3.hsl(colours[i]); // Initialize inner radius let innerRadius = 0; // Access the single value for the current parameter const value = data[type]; // Directly access value from aggregated data // Calculate outer radius of the segment let outerRadius = (value / 100) * radius; // Adjust saturation based on value (whiter=less value) const adjustedColor = colorScale(value); // not used // Use D3 color object for opacity based on weights const d3Color = d3.color(colours[i]); d3Color.opacity = weights[selected_parameters[i]]; const modifiedRGBA = d3Color.toString(); // Set fill style with adjusted color and opacity ctx.fillStyle = modifiedRGBA; // Begin path ctx.beginPath(); // Draw the segment ctx.arc( centerX, centerY, outerRadius, i * segmentAngle, (i + 1) * segmentAngle ); ctx.lineTo(centerX, centerY); ctx.closePath(); ctx.fill(); // White stroke between segment ctx.strokeStyle = "white"; ctx.lineWidth = 0.4; ctx.stroke(); innerRadius = outerRadius; }); }37:T911,function drawNightingaleRoseChart2( ctx, x, y, cellSize, data, // Aggregated data colours, padding = 2 ) { let radius = (cellSize - 2 * padding) / 2; // Calculate center of the chart let centerX = x; //+ radius; let centerY = y; //+ radius; // Calculate angle per section const segmentAngle = (2 * Math.PI) / 8; // Fixed angle for 8 sections let startingAngle = Math.PI; const gapAngle = (2 * Math.PI) / 180; //0.5 * segmentAngle; // Iterate over each data type (parameter) selected_parameters.forEach((parameter, i) => { // Access the single value for the current parameter const value = data[parameter]; // Directly access value from aggregated data // Calculate section start and end angles const startAngle = i * segmentAngle - startingAngle; const endAngle = (i + 1) * segmentAngle; // const startAngle = (startingAngle + i * segmentAngle) % (2 * Math.PI); // const endAngle = (startAngle + segmentAngle) % (2 * Math.PI); // Calculate inner and outer radius based on data value and full radius const innerRadius = 0; // Set inner radius to 0 for all segments const outerRadius = (value / 100) * radius; // Set fill style with the parameter's color ctx.fillStyle = "white"; // Begin path ctx.beginPath(); // Draw the segment arc ctx.arc(centerX, centerY, radius, startAngle, endAngle); ctx.lineTo(centerX, centerY); ctx.closePath(); // ctx.fill(); // Draw a white stroke between segments // ctx.strokeStyle = "white"; // ctx.lineWidth = 0.4; // ctx.stroke(); // Calculate pie segment width based on weight (use angular units) const weightAngle = (Math.abs(weights[parameter]) * segmentAngle) / Math.max(...Object.values(weights).map(Math.abs)); // Calculate center angle of the pie segment const midAngle = (startAngle + endAngle) / 2; // Offset for pie segment arc const offsetAngle = 0; ctx.fillStyle = colours[i]; // Draw the pie segment arc ctx.beginPath(); ctx.arc( centerX, centerY, outerRadius, midAngle - weightAngle / 2 - offsetAngle + gapAngle, midAngle + offsetAngle + weightAngle / 2 - gapAngle ); ctx.lineTo(centerX, centerY); ctx.closePath(); ctx.fill(); }); }38:Tc15,function drawNightingaleRoseChart3( ctx, x, y, cellSize, data, // Aggregated data colours, padding = 2 ) { let radius = (cellSize - 2 * padding) / 2; // Calculate center of the chart let centerX = x; //+ radius; let centerY = y; //+ radius; // Calculate angle per section const segmentAngle = (2 * Math.PI) / 8; // Fixed angle for 8 sections let startingAngle = Math.PI; const gapAngle = (2 * Math.PI) / 180; //0.5 * segmentAngle; // Iterate over each data type (parameter) selected_parameters.forEach((parameter, i) => { // Access the single value for the current parameter const value = data[parameter]; // Directly access value from aggregated data // Calculate section start and end angles const startAngle = i * segmentAngle - startingAngle; const endAngle = (i + 1) * segmentAngle; // const startAngle = (startingAngle + i * segmentAngle) % (2 * Math.PI); // const endAngle = (startAngle + segmentAngle) % (2 * Math.PI); // Calculate inner and outer radius based on data value and full radius const innerRadius = 0; // Set inner radius to 0 for all segments const outerRadius = (value / 100) * radius; // Set fill style with the parameter's color // ctx.fillStyle = "white"; // Begin path if ( // Math.abs(weights[parameter]) !== 0 && Math.abs(weights[parameter]) > 0.05 ) { /// if zero, skip the drawing altogether ctx.beginPath(); // Draw the segment arc ctx.arc(centerX, centerY, radius, startAngle, endAngle); ctx.lineTo(centerX, centerY); ctx.closePath(); // ctx.fill(); // Draw a white stroke between segments // ctx.strokeStyle = "white"; // ctx.lineWidth = 0.4; // ctx.stroke(); // Calculate pie segment width based on weight (use angular units) const weightAngle = (Math.abs(weights[parameter]) * segmentAngle) / Math.max(...Object.values(weights).map(Math.abs)); // Calculate center angle of the pie segment const midAngle = (startAngle + endAngle) / 2; // Offset for pie segment arc const offsetAngle = 0; // Draw the pie segment with the color ctx.fillStyle = colours[i]; ctx.beginPath(); ctx.arc( centerX, centerY, outerRadius, midAngle - weightAngle / 2 - offsetAngle + gapAngle, midAngle + offsetAngle + weightAngle / 2 - gapAngle ); ctx.lineTo(centerX, centerY); ctx.closePath(); ctx.fill(); // If the weight is negative, draw the pattern on top if (weights[parameter] < 0) { const pattern = ctx.createPattern(canvasPattern, "repeat"); ctx.fillStyle = pattern; ctx.beginPath(); ctx.arc( centerX, centerY, outerRadius, midAngle - weightAngle / 2 - offsetAngle + gapAngle, midAngle + offsetAngle + weightAngle / 2 - gapAngle ); ctx.lineTo(centerX, centerY); ctx.closePath(); ctx.fill(); } } }); }39:T85c,function drawNightingaleRoseOverlap( ctx, x, y, cellSize, data, // Aggregated data // No colours array needed padding = 2 ) { let radius = (cellSize - 2 * padding) / 2; // Calculate center of the chart let centerX = x; //+ radius; let centerY = y; //+ radius; // Calculate angle per section const segmentAngle = (2 * Math.PI) / 8; // Fixed angle for 8 sections let startingAngle = Math.PI; const gapAngle = (2 * Math.PI) / 180; // 0.5 * segmentAngle (adjust gap size); // Iterate over each data type (parameter) selected_parameters.forEach((parameter, i) => { // Access the single value for the current parameter const value = data[parameter]; // Directly access value from aggregated data // Calculate section start and end angles const startAngle = i * segmentAngle - startingAngle; const endAngle = (i + 1) * segmentAngle; // Calculate inner and outer radius based on data value and full radius const innerRadius = 0; // Set inner radius to 0 for all segments const outerRadius = (value / 100) * radius; // Set consistent stroke color for wireframes ctx.strokeStyle = "grey"; // Begin path // ctx.beginPath(); // Draw the segment arc // ctx.arc(centerX, centerY, radius, startAngle, endAngle); // ctx.lineTo(centerX, centerY); // ctx.closePath(); // Draw the stroke (no fill) // ctx.stroke(); // Calculate pie segment width based on weight (use angular units) const weightAngle = (Math.abs(weights[parameter]) * segmentAngle) / Math.max(...Object.values(weights).map(Math.abs)); // Calculate center angle of the pie segment const midAngle = (startAngle + endAngle) / 2; // Offset for pie segment arc const offsetAngle = 0; // Draw the pie segment arc (stroke only) ctx.beginPath(); ctx.lineWidth = 0.5; ctx.arc( centerX, centerY, outerRadius, midAngle - weightAngle / 2 - offsetAngle + gapAngle, midAngle + offsetAngle + weightAngle / 2 - gapAngle ); ctx.lineTo(centerX, centerY); ctx.closePath(); ctx.stroke(); }); }3a:T67c,function drawBarChart( ctx, x, y, cellSize, data, // Aggregated data colours, padding ) { // console.log(data); // // Calculate maximum absolute weight for positioning const maxAbsoluteWeight = Math.max(...Object.values(weights).map(Math.abs)); // Calculate total width of bars based on weights const totalBarWidth = Object.values(weights).reduce( (sum, weight) => sum + Math.abs(weight), 0 ); const availableWidth = cellSize - 2 * maxAbsoluteWeight; // Draw center line ctx.beginPath(); ctx.moveTo(x - cellSize / 2 + padding, y); ctx.lineTo(x + cellSize / 2 - padding, y); ctx.lineWidth = 0.4; ctx.stroke(); // // Calculate starting position for the first bar let currentX = x - availableWidth / 2; // Iterate over each parameter and draw its bar selected_parameters.forEach((parameter, i) => { const value = data[parameter]; // Access value from aggregated data const color = colours[i]; const weight = weights[parameter]; // Calculate bar width based on weight and total bar width let barWidth = (Math.abs(weight) * availableWidth) / totalBarWidth; const minBarWidth = 1; barWidth = Math.max(barWidth, minBarWidth); // Calculate bar height based on value and available vertical space const barHeight = (value / 100) * (cellSize / 2); // Adjust for half-cell height // Calculate bar position based on weight and center line let barY = y; // Draw the bar ctx.fillStyle = color; ctx.fillRect(currentX, barY, barWidth, -1 * barHeight * Math.sign(weight)); // Update starting position for the next bar currentX += barWidth; }); }3b:T85a,function drawBarChart2( ctx, x, y, cellSize, data, // Aggregated data colours, background, padding ) { // Calculate maximum absolute weight for positioning const maxAbsoluteWeight = Math.max(...Object.values(weights).map(Math.abs)); // Calculate total width of bars based on weights const totalBarWidth = Object.values(weights).reduce( (sum, weight) => sum + Math.abs(weight), 0 ); const availableWidth = cellSize - 2 * maxAbsoluteWeight; // Calculate starting position for the first bar from the bottom of the cell let currentX = x - availableWidth / 2; let barY = y + cellSize / 2; // Start from the bottom of the cell // Iterate over each parameter and draw its bar selected_parameters.forEach((parameter, i) => { const value = data[parameter]; // Access value from aggregated data const color = colours[i]; const weight = weights[parameter]; // Calculate bar width based on weight and total bar width let barWidth = (Math.abs(weight) * availableWidth) / totalBarWidth; const minBarWidth = 1; barWidth = Math.max(barWidth, minBarWidth); // Calculate bar height based on value and full cell height const barHeight = (value / 100) * cellSize; // Use full cell height // Draw the bar ctx.fillStyle = color; // ctx.strokeStyle = "rgba(255, 255, 255, 0)"; // ctx.strokeStyle = background; // ctx.lineWidth = 10; // ctx.strokeRect(currentX, barY, barWidth, -barHeight); ctx.fillRect(currentX, barY, barWidth, -barHeight); // Draw solid bar with negative height // Draw a thick black border for negative weights if (weight < 0) { // Fill the bar with its original color var pattern = ctx.createPattern(canvasPattern, "repeat"); ctx.fillStyle = pattern; ctx.fillRect(currentX, barY, barWidth, -barHeight); ctx.lineWidth = 1; ctx.strokeStyle = "black"; ctx.strokeRect(currentX - padding, barY, barWidth, -barHeight); ctx.fill(); } // Draw the bar // ctx.fillStyle = color; // Update starting position for the next bar currentX += barWidth; }); }3c:T9b8,function drawBarChart3( ctx, x, y, cellSize, data, // Aggregated data colours, background, padding = 0 ) { const gap = 2; // Gap between categories let lastCategory = null; // calculate maximum absolute weight for positioning const maxAbsoluteWeight = Math.max(...Object.values(weights).map(Math.abs)); // calculate total width of bars based on weights const totalBarWidth = Object.values(weights).reduce( (sum, weight) => sum + Math.abs(weight), 0 ); const availableWidth = cellSize - 2 * maxAbsoluteWeight - gap * (categories.length - 1) - // + 15; // the 15 px offset, from observable (?) 2 * padding; // Calculate starting position for the first bar from the bottom of the cell let currentX = x - availableWidth / 2 + padding - 5; // not sure why observable have certain offset to the canvas let barY = y + cellSize / 2 - padding; // Start from the bottom of the cell // Iterate over each parameter and draw its bar selected_parameters.forEach((parameter, i) => { const value = data[parameter]; // Access value from aggregated data const color = colours[i]; const weight = weights[parameter]; const category = categories.find((c) => c.parameter === parameter).category; // Calculate bar width based on weight and total bar width let barWidth = (Math.abs(weight) * availableWidth) / totalBarWidth; const minBarWidth = 1; barWidth = Math.max(barWidth, minBarWidth); // Calculate bar height based on value and full cell height const barHeight = (value / 100) * (cellSize - 2 * padding); // Use full cell height // Add a gap if the category has changed if (lastCategory && lastCategory !== category) { currentX += gap; } lastCategory = category; // Draw the bar ctx.fillStyle = color; ctx.fillRect(currentX, barY, barWidth, -barHeight); // Draw solid bar with negative height // Draw a thick border for negative weights if (weight < 0) { // ctx.save(); const pattern = ctx.createPattern(canvasPattern, "repeat"); ctx.fillStyle = pattern; ctx.fillRect(currentX, barY, barWidth, -barHeight); // ctx.fill(); // ctx.restore(); // stroke ctx.lineWidth = 1; ctx.strokeStyle = "white"; // white border on negative weight ctx.strokeRect(currentX - padding, barY, barWidth, -barHeight); } // Update starting position for the next bar currentX += barWidth; }); }3d:T7bb,function drawBarChartOverlap( ctx, x, y, cellSize, data, // Aggregated data // No colours array needed // background, padding = 0 ) { const gap = 2; // Gap between categories let lastCategory = null; // Calculate maximum absolute weight for positioning const maxAbsoluteWeight = Math.max(...Object.values(weights).map(Math.abs)); // Calculate total width of bars based on weights const totalBarWidth = Object.values(weights).reduce( (sum, weight) => sum + Math.abs(weight), 0 ); const availableWidth = cellSize - 2 * maxAbsoluteWeight - gap * (categories.length - 1) - 2 * padding; // Calculate starting position for the first bar from the bottom of the cell let currentX = x - availableWidth / 2 + padding - 5; let barY = y + cellSize / 2 - padding; // Start from the bottom of the cell // Iterate over each parameter and draw its bar selected_parameters.forEach((parameter, i) => { const value = data[parameter]; // Access value from aggregated data const weight = weights[parameter]; const category = categories.find((c) => c.parameter === parameter).category; // Calculate bar width based on weight and total bar width let barWidth = (Math.abs(weight) * availableWidth) / totalBarWidth; const minBarWidth = 1; barWidth = Math.max(barWidth, minBarWidth); // Calculate bar height based on value and full cell height const barHeight = (value / 100) * (cellSize - 2 * padding); // Use full cell height // Add a gap if the category has changed if (lastCategory && lastCategory !== category) { currentX += gap; } lastCategory = category; // Draw the bar outline (stroke only) ctx.strokeStyle = "grey"; ctx.lineWidth = 0.5; ctx.beginPath(); ctx.rect(currentX, barY, barWidth, -barHeight); // Negative height for bottom-up bars ctx.stroke(); // Update starting position for the next bar currentX += barWidth; }); }3e:T56c,function drawLineChart2(ctx, x, y, cellSize, values) { // Calculate boundary based on cell center and size const boundary = [ x - cellSize / 2, y - cellSize / 2, x + cellSize / 2, y + cellSize / 2 ]; // Define margins within the cell const margin = 0; // Calculate actual drawing area within the cell const width = cellSize - 2 * margin; const height = cellSize - 2 * margin; const xScale = d3 .scaleLinear() .domain([0, historical_weights.length]) .range([margin, width - margin]); const yScale = d3 .scaleLinear() .domain([0, 100]) .range([height - margin, margin]); // Draw lines for each key-data series for (let i = 0; i < selected_parameters.length; i++) { const color = colours[i]; // let dp = historical_weights[selected_parameters[i]]; console.log("va", values); const dataPoints = values[selected_parameters[i]].map((value, index) => ({ x: xScale(index) + boundary[0], // Offset x-coordinates to cell position y: yScale(value) + boundary[1] // Offset y-coordinates to cell position })); console.log("dp", dataPoints); ctx.beginPath(); ctx.moveTo(dataPoints[0].x, dataPoints[0].y); for (let j = 1; j < dataPoints.length; j++) { ctx.lineTo(dataPoints[j].x, dataPoints[j].y); } ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.stroke(); } }3f:T545,function drawLineChart3(ctx, x, y, cellSize, values) { // Calculate boundary based on cell center and size const boundary = [ x - cellSize / 2, y - cellSize / 2, x + cellSize / 2, y + cellSize / 2 ]; // Define margins within the cell const margin = 0; // Calculate actual drawing area within the cell const width = cellSize - 2 * margin; const height = cellSize - 2 * margin; const xScale = d3 .scaleLinear() .domain([0, historical_weights[selected_parameters[0]].length]) .range([margin, width - margin]); const yScale = d3 .scaleLinear() .domain([0, 100]) .range([height - margin, margin]); // Draw lines for each key-data series for (let i = 0; i < selected_parameters.length; i++) { const color = colours[i]; const dataPoints = historical_weights[selected_parameters[i]].map( (value, index) => ({ x: xScale(index) + boundary[0], // Offset x-coordinates to cell position y: yScale(value * values[selected_parameters[i]]) + boundary[1] // Offset y-coordinates to cell position }) ); ctx.beginPath(); ctx.moveTo(dataPoints[0].x, dataPoints[0].y); for (let j = 1; j < dataPoints.length; j++) { ctx.lineTo(dataPoints[j].x, dataPoints[j].y); } ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.stroke(); } }40:T57b,function drawLineChartRaw(ctx, x, y, cellSize, values) { // Calculate boundary based on cell center and size const boundary = [ x - cellSize / 2, y - cellSize / 2, x + cellSize / 2, y + cellSize / 2 ]; // Define margins within the cell const margin = 2; // padding value // Calculate actual drawing area within the cell const width = cellSize - 2 * margin; const height = cellSize - 2 * margin; const xScale = d3 .scaleLinear() .domain([0, historical_weights[selected_parameters[0]].length]) .range([margin, width - margin]); const yScale = d3 .scaleLinear() .domain([-100, 100]) // Adjusted for negative scores .range([height - margin, margin]); // Draw lines for each key-data series for (let i = 0; i < selected_parameters.length; i++) { const color = colours[i]; const dataPoints = historical_weights[selected_parameters[i]].map( (value, index) => ({ x: xScale(index) + boundary[0], // Offset x-coordinates to cell position y: yScale(value * values[selected_parameters[i]]) + boundary[1] // Offset y-coordinates to cell position }) ); ctx.beginPath(); ctx.moveTo(dataPoints[0].x, dataPoints[0].y); for (let j = 1; j < dataPoints.length; j++) { ctx.lineTo(dataPoints[j].x, dataPoints[j].y); } ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.stroke(); } }41:T812,function drawLineChart(ctx, x, y, cellSize, values) { // Calculate boundary based on cell center and size const boundary = [ x - cellSize / 2, y - cellSize / 2, x + cellSize / 2, y + cellSize / 2 ]; // Define margins within the cell const margin = 2; // padding value // Calculate actual drawing area within the cell const width = cellSize - 2 * margin; const height = cellSize - 2 * margin; const xScale = d3 .scaleLinear() .domain([0, historical_weights[selected_parameters[0]].length]) .range([margin, width - margin]); const yScale = d3 .scaleLinear() .domain([-95, 95]) //y-ranges .range([height - margin, margin]); // Define line generator with curve const line = d3 .line() .curve(d3.curveBasis) .x((d) => d.x) .y((d) => d.y); // Draw lines for each key-data series for (let i = 0; i < selected_parameters.length; i++) { const color = colours[i]; const dataPoints = historical_weights[selected_parameters[i]].map( (value, index) => ({ x: xScale(index) + boundary[0], // Offset x-coordinates to cell position y: yScale(value * values[selected_parameters[i]]) + boundary[1] // Offset y-coordinates to cell position }) ); // console.log(score); // Draw the score line and circles // const scoreDataPoints = Array( // historical_weights[selected_parameters[0]].length // ) // .fill(0) // .map((_, index) => ({ // x: xScale(index) + boundary[0], // y: yScale(score) + boundary[1] // })); // ctx.beginPath(); // ctx.strokeStyle = "black"; // ctx.lineWidth = 1; // ctx.stroke(new Path2D(line(scoreDataPoints))); // // Draw circles for each score point // ctx.fillStyle = "black"; // scoreDataPoints.forEach(({ x, y }) => { // ctx.beginPath(); // ctx.arc(x, y, 2, 0, 2 * Math.PI); // ctx.fill(); // }); ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.stroke(new Path2D(line(dataPoints))); } }42:T527,viewof overview = { // pv_input; // ashp_input; // gshp_input; // insulation_input; // electricity_input; // gas_input; // fuel_input; // depriv_input; // await visibility(); const [w, h] = [250, 250]; const ctx = DOM.context2d(w, h); const canvas = ctx.canvas; // ctx.fillStyle = "lightgrey"; ctx.fillStyle = overlaiddata && overlaiddata[1] ? colourMap(overlaiddata[1]) : "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); // console.log("ovddata", overlaiddata[0]); // drawLineChart(ctx, reshapedData); const x = canvas.width / 2 - 25; //30; // observable awkwardly adds these random boundaries to every canvas? const y = canvas.height / 2 - 25; // drawLineChart(ctx, x, y, 300, overlaiddata); if (overlaiddata) { if (glyphMode == "Bar Chart") { drawBarChart3(ctx, x, y, 200, overlaiddata[0], colours, 0); } else if (glyphMode == "Rose Chart") { drawNightingaleRoseChart3(ctx, x, y, 250, overlaiddata[0], colours, 0); } else if (glyphMode == "Historical Score") { drawLineChart(ctx, x, y, 250, overlaiddata[0]); } } if (overlaiddata) { ctx.font = "12px Calibri"; ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.fillText("Overall Score: " + overlaiddata[1].toFixed(2), x, 245); } return canvas; }43:T40e,function calculateScoresGeoJSONWithRank( lsoaData, params, weights, paramSigns = {} ) { const scoredFeatures = lsoaData.features.map((feature) => { const score = params.reduce((acc, param, index) => { const value = feature.properties[param]; const weight = weights[index]; const sign = paramSigns[param] || 1; return parseFloat((acc + value * weight * sign).toFixed(3)); }, 0); return { ...feature, properties: { ...feature.properties, score } }; }); // Sort features in descending order of score scoredFeatures.sort((a, b) => b.properties.score - a.properties.score); let currentRank = 1; let currentScore = scoredFeatures[0].properties.score; scoredFeatures.forEach((feature) => { if (feature.properties.score !== currentScore) { currentRank++; currentScore = feature.properties.score; } feature.properties.rank = currentRank; }); return { type: "FeatureCollection", features: scoredFeatures }; }44:T49f,function calculateScores_v2(lsoaData, params, weights, geojson = false) { const scoredItems = geojson ? lsoaData.features.map((feature) => { const score = params.reduce((acc, param, index) => { const value = feature.properties[param]; const weight = weights[index]; return parseFloat((acc + value * weight).toFixed(3)); }, 0); return { ...feature, properties: { ...feature.properties, score } }; }) : lsoaData.map((item) => { const score = params.reduce((acc, param, index) => { const value = item[param]; const weight = weights[index]; return acc + value * weight; }, 0); return { ...item, score }; }); scoredItems.sort((a, b) => b.score - a.score); let currentRank = 1; let currentScore = scoredItems[0].score; scoredItems.forEach((item) => { if (item.score !== currentScore) { currentRank++; currentScore = item.score; } item.rank = currentRank; }); return geojson ? { type: "FeatureCollection", features: scoredItems } : scoredItems; }45:T506,function calculateScores_v3(lsoaData, params, weights, geojson = false) { const scoredItems = geojson ? lsoaData.features.map((feature) => { const score = params.reduce((acc, param, index) => { const value = feature.properties[param]; const weight = weights[index]; return parseFloat((acc + value * weight).toFixed(3)); }, 0); return { ...feature, properties: { ...feature.properties, score: normalizeScore(score, 0, 100) // Normalized score } }; }) : lsoaData.map((item) => { const score = params.reduce((acc, param, index) => { const value = item[param]; const weight = weights[index]; return acc + value * weight; }, 0); return { ...item, score: normalizeScore(score, 0, 100) }; // Normalized score }); scoredItems.sort((a, b) => b.score - a.score); let currentRank = 1; let currentScore = scoredItems[0].score; scoredItems.forEach((item) => { if (item.score !== currentScore) { currentRank++; currentScore = item.score; } item.rank = currentRank; }); return geojson ? { type: "FeatureCollection", features: scoredItems } : scoredItems; } 46:[] 2f:{"title":"Multivariate Geospatial Visualisation: Cambridge Decarbonisation Potential","cells":[{"id":0,"value":"# Multivariate Geospatial Visualisation: Cambridge Decarbonisation Potential","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"## Multicriteria Decision Analysis of Parameters","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"### Score Computations","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"selected_parameters","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"We assigned the same initial weights to all the parameters. The weights is between -1 and 1, with 1 being no change to the initial weight. ","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"Changing the weights will also change the final computation result. Each weight contributes to how important decision makers think of the parameters are, so reducing them will reduce their contribution to the final score. ","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"### Computed Score at LSOA Units","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"The above logic is applied to both LSOA level (GeoJSON) data and the gridded data we produce earlier. For the LSOA level data, we calculate the score as follow: ","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"lsoa_scores = calculateScoresGeoJSONWithRank(\n lsoaData,\n selected_parameters,\n Object.values(weights)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"The choropleth map showing interactively computed scores is presented in the 'multiview' section.","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"### Gridded Scores","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"We discretise the score following 100 m interval discretisation of parameters in the LSOA:","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"grid_scores = calculateScoresWithRank(\n griddedData,\n selected_parameters,\n // initialWeights\n Object.values(weights)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"grid_scores","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"We use the above score for gridded-glyphmap visualisation. The gridded-glyphmap is shown along with the choropleth map in multiview.","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"## Visualising the score as Gridded-glyphmaps","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"With the computation of MCDA score as demonstrated above, we're able to see the model result of the MCDA analysis. We are able to modify the end result by adjusting the weights. That being said, we don't have any idea on how each parameters is distributed within the map. Using gridded-glyphmap not only allows us to be able to see the patterns hidden beneath the computation within each grid, but also the bigger picture of how the score propagates.","pinned":false,"hidden":false,"mode":"md"},{"id":191,"value":"### Gridded-glyphmap","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"The decarbonisation parameters for each grids is encoded in the glyphs by different colour. By manipulating the weights, we are able to see the both the overview and details of how it changes the overall distribution of the data at the same time. The grid's background colour imitates the choropleth map to show the final score for each cell.","pinned":false,"hidden":false,"mode":"md"},{"id":821,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":801,"value":"dashboard = html`

${decarbonisationGlyph}

${choropleth}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"### Glyph Functions","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1903,"value":"function initFn(cells, cellSize, global, panel) {\n // drawGeoPathsToCanvas(lsoaData, panel.ctx);\n // console.log(\"panel\", panel.ctx);\n // global.numT = d3.max(panel.data.map((row) => row.ts.length));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"function appendRecordsAggrFn(cell, row, weight, global, panel) {\n // console.log(\"global\", panel.ctx);\n // drawGeoPathsToCanvas(lsoaData, panel.ctx);\n if (!cell.records) cell.records = []; //if the cell doesn't currently have a records property, make one\n cell.records.push(row); //append the record\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1589,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":1604,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"function drawLegend(grid, cellSize, ctx, global, panel) {\n ctx.font = \"10px sans-serif\";\n ctx.textAlign = \"left\";\n ctx.textBaseline = \"middle\";\n\n const maxTextWidth = d3.max(\n selected_parameters.map((item) => ctx.measureText(item).width)\n );\n\n const x = panel.getWidth() - maxTextWidth - 20;\n let y = panel.getHeight() - selected_parameters.length * 15;\n\n ctx.fillStyle = \"#fff8\";\n ctx.fillRect(x, y, maxTextWidth + 15, selected_parameters.length * 15);\n\n for (let i = 0; i < selected_parameters.length; i++) {\n ctx.fillStyle = colours[i];\n ctx.fillRect(x, y, 10, 10);\n ctx.fillStyle = \"#333\";\n ctx.fillText(selected_parameters[i], x + 15, y + 5);\n y += 15;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"### Helper Functions: Dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":1177,"value":"Overview:","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"Choropleth:","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"choropleth = {\n return quickmap(lsoa_scores, {\n attrib: \"score\",\n title: \"Decarbonisation Score\",\n width: 500,\n height: 500,\n fullscreen: false,\n choropleth: {\n numClass: 6,\n method: \"quantile\",\n colorScheme: \"BuPu\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"Panel controls:","pinned":false,"hidden":false,"mode":"md"},{"id":2252,"value":"viewof discretisation = Inputs.radio([\"grid\", \"hex\"], {\n value: \"grid\",\n label: \"Discretisation Shape\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"viewof showRelative = Inputs.toggle({\n label: \"Show relative score?\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"viewof showTooltip = Inputs.toggle({ label: \"Show Tooltips?\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"viewof gridSize = Inputs.radio([15, 30, 45, 60], {\n value: 30,\n label: \"Grid Size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"viewof glyphMode = Inputs.select(\n [\"Bar Chart\", \"Rose Chart\", \"Historical Score\"],\n {\n label: \"Glyph Mode\",\n value: \"Rose Chart\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"viewof tile = Inputs.select(maptypes, {\n label: \"Basemap\",\n value: \"CartoPositronNoLabel\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"viewof gridTransparency = Inputs.range([0, 1], {\n value: 0.5,\n label: \"Grid transparency\",\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"viewof glyphTransparency = Inputs.range([0, 1], {\n value: 0.9,\n label: \"Glyph transparency\",\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1529,"value":"weights = {\n const weights = {\n pv_annualgen: pv_input,\n ashp_suitable_pct: ashp_input,\n gshp_suitable_pct: gshp_input,\n insulation_epcABCD: insulation_input,\n electricity_use: electricity_input,\n gas_use: gas_input,\n fuel_poverty: fuel_input,\n depriv_index: depriv_input\n };\n return weights;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1814,"value":"function adjustWeights(changedSlider) {\n let remainingSliders = selected_parameters.filter(\n (slider) => slider !== changedSlider\n );\n let remainingWeight = 1 - weights[changedSlider];\n let equalWeight = remainingWeight / remainingSliders.length;\n\n let adjustedWeights = { ...weights }; \n\n remainingSliders.forEach((slider) => {\n adjustedWeights[slider] = equalWeight;\n });\n\n return adjustedWeights;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"### Helper Functions: Glyphs","pinned":false,"hidden":false,"mode":"md"},{"id":763,"value":"canvasPattern = {\n // create the off-screen canvas\n var canvasPattern = document.createElement(\"canvas\");\n canvasPattern.width = 5;\n canvasPattern.height = 5;\n var contextPattern = canvasPattern.getContext(\"2d\");\n\n // draw pattern to off-screen context\n contextPattern.beginPath();\n contextPattern.strokeStyle = \"black\"; // Set the color of the hatch lines\n contextPattern.lineWidth = 1; // Set the width of the hatch lines\n contextPattern.moveTo(0, 5);\n contextPattern.lineTo(5, 0);\n contextPattern.stroke();\n return canvasPattern;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1704,"value":"canvasPattern_angled = {\n // create the off-screen canvas\n var canvasPattern = document.createElement(\"canvas\");\n canvasPattern.width = 5;\n canvasPattern.height = 5;\n var contextPattern = canvasPattern.getContext(\"2d\");\n\n // save the current context state\n contextPattern.save();\n\n // rotate the context\n var angleInDegrees = 45;\n var angleInRadians = (angleInDegrees * Math.PI) / 180;\n contextPattern.rotate(angleInRadians);\n\n // draw pattern to off-screen context\n contextPattern.beginPath();\n contextPattern.strokeStyle = \"black\"; // Set the color of the hatch lines\n contextPattern.lineWidth = 1; // Set the width of the hatch lines\n contextPattern.moveTo(0, 5);\n contextPattern.lineTo(5, 0);\n contextPattern.stroke();\n\n // restore the saved context state\n contextPattern.restore();\n\n return canvasPattern;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"maptypes = [\n // \"StadiaStamenToner\",\n // \"StadiaStamenTonerLite\",\n // \"StadiaStamenWatercolor\",\n // \"StadiaStamenOutdoor\",\n // \"StadiaStamenTerrain\",\n // \"StadiaAlidade\",\n // \"StadiaAlidadeDark\",\n // \"StadiaOSMBright\",\n \"CartoPositron\",\n \"CartoPositronNoLabel\",\n \"CartoDark\",\n \"CartoDBVoyager\",\n \"CartoDBVoyagerNoLabel\",\n \"StamenTerrain\",\n \"StamenToner\",\n \"StamenTonerHybrid\",\n \"StamenTonerLite\",\n \"StamenWatercolor\",\n \"OSMMapnik\",\n \"OSMStandard\",\n \"WikimediaMaps\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"{\n glyphMode;\n decarbonisationGlyph.setGlyph({\n drawFn: interactiveDrawFn(glyphMode)\n }); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"function drawHatch(ctx, x, y, width, height, angle = 45) {\n const radAngle = (angle * Math.PI) / 180;\n const spacing = 4;\n\n ctx.lineWidth = 1;\n ctx.strokeStyle = \"lightgrey\";\n\n for (let i = 0; i <= height; i += spacing) {\n const startX = x;\n const startY = y - i;\n const endX = startX + width;\n const endY = startY;\n\n ctx.beginPath();\n ctx.moveTo(startX, startY);\n ctx.lineTo(endX, endY);\n ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"categories = [\n { parameter: \"pv_annualgen\", category: \"lct\" },\n { parameter: \"ashp_suitable_pct\", category: \"heat_efficiency\" },\n { parameter: \"gshp_suitable_pct\", category: \"heat_efficiency\" },\n { parameter: \"insulation_epcABCD\", category: \"heat_efficiency\" },\n { parameter: \"electricity_use\", category: \"energy_demand\" },\n { parameter: \"gas_use\", category: \"energy_demand\" },\n { parameter: \"fuel_poverty\", category: \"socio_demographic\" },\n { parameter: \"depriv_index\", category: \"socio_demographic\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"selected_parameters","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"// grouped colours\ncolours = [\n \"green\", // Green energy potential -> PV\n \"red\", // Heat Efficiency -> ashp, ghsp, insulation\n \"crimson\", // gshp\n \"deeppink\", // insulation\n \"cornflowerblue\", // energy demand -> electricity, gas\n \"blue\", // gas\n \"yellow\", // socio-demographic -> fuel poverty, deprivation\n \"gold\" // deprivation\n]\n\n// colours = [\"red\", \"green\", \"blue\", \"purple\", \"orange\", \"yellow\", \"pink\", \"grey\"]\n\n// based on https://carto.com/carto-colors/\n// colours = [\n// \"#7F3C8D\",\n// \"#11A579\",\n// \"#3969AC\",\n// \"#F2B701\",\n// \"#E73F74\",\n// \"#80BA5A\",\n// \"#E68310\",\n// \"#008695\",\n// \"#CF1C90\",\n// \"#f97b72\",\n// \"#4b4b8f\",\n// \"#A5AA99\"\n// ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"initialWeights = selected_parameters.map(() => 1)\n// weights = [0.2, 1, 1, 1, 1, 1, 1, 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"function colourMap(value, transparent = true) {\n try {\n const color = getColourForGrid(\n value,\n discr.breaks(scores, {\n method: \"quantile\", // choropleth method\n nb: 6, // number of class\n minmax: true,\n precision: 2\n }),\n \"BuPu\"\n );\n\n // Apply alpha transparency using a D3 color object\n const d3Color = d3.color(color);\n if (transparent) {\n d3Color.opacity = gridTransparency;\n }\n\n return d3Color.toString(); // Return the color string with opacity\n } catch (error) {\n console.log(\"error occured during style mapping\");\n // console.error(error);\n return \"gray\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"scores = grid_scores.map((d) => d.score)","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"discr.breaks(scores, {\n method: \"quantile\",\n nb: 6,\n minmax: true,\n precision: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"function getColourForGrid(value, domain, colorScheme) {\n const color = d3\n .scaleThreshold()\n .domain(domain)\n .range(d3[`scheme${colorScheme}`][domain.length + 1]);\n return color(value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"mutable overlaiddata = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"inputs = {\n var inputs = {};\n for (var i = 0; i < selected_parameters.length; i++) {\n var obj = initialWeights[i];\n inputs[selected_parameters[i]] = Inputs.range([-1, 1], {\n label: selected_parameters[i],\n step: 0.05,\n value: obj\n });\n // inputs[selected_parameters[i]].number.remove();\n inputs[selected_parameters[i]].range.style.margin = 0;\n }\n\n return inputs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1479,"value":"inputs_hist = {\n var inputs = {};\n inputs[\"pv_annualgen\"] = viewof pv_input;\n inputs[\"ashp_suitable_pct\"] = viewof ashp_input;\n inputs[\"gshp_suitable_pct\"] = viewof gshp_input;\n inputs[\"insulation_epcABCD\"] = viewof insulation_input;\n inputs[\"electricity_use\"] = viewof electricity_input;\n inputs[\"gas_use\"] = viewof gas_input;\n inputs[\"fuel_poverty\"] = viewof fuel_input;\n inputs[\"depriv_index\"] = viewof depriv_input;\n\n return inputs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"### Helper Functions: Calculations","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"function calculateScores(lsoaData, params, weights) {\n return lsoaData.map((item) => {\n // calculate the score using the SAW equation\n const score = params.reduce((acc, param, index) => {\n const value = item[param];\n const weight = weights[index];\n return acc + value * weight;\n }, 0);\n\n return { ...item, score };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"function calculateScoresWithRank(lsoaData, params, weights) {\n const scoredItems = lsoaData.map((item) => {\n const score = params.reduce((acc, param, index) => {\n const value = item[param];\n const weight = weights[index];\n\n return acc + value * weight;\n }, 0);\n\n return { ...item, score };\n });\n\n scoredItems.sort((a, b) => b.score - a.score);\n\n let currentRank = 1;\n let currentScore = scoredItems[0].score;\n\n scoredItems.forEach((item) => {\n if (item.score !== currentScore) {\n currentRank++;\n currentScore = item.score;\n }\n item.rank = currentRank;\n });\n\n return scoredItems;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"function calculateScoresGeoJSON(lsoaData, params, weights, paramSigns = {}) {\n const scoredFeatures = lsoaData.features.map((feature) => {\n const score = params.reduce((acc, param, index) => {\n const value = feature.properties[param];\n const weight = weights[index];\n const sign = paramSigns[param] || 1;\n\n return parseFloat(acc + value * weight * sign).toFixed(3);\n }, 0);\n\n return {\n ...feature,\n properties: {\n ...feature.properties,\n score\n }\n };\n });\n\n return {\n type: \"FeatureCollection\",\n features: scoredFeatures\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":2005,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":2009,"value":"lsoa_scores2 = calculateScores_v2(\n lsoaData,\n selected_parameters,\n Object.values(weights),\n true\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2013,"value":"grid_scores2 = calculateScores_v2(\n griddedData,\n selected_parameters,\n // initialWeights\n Object.values(weights)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2027,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"// Helper function for score normalization\nfunction normalizeScore(score, min, max) {\n const minScore = Math.min(...scores.map((item) => item.score));\n const maxScore = Math.max(...scores.map((item) => item.score));\n\n // Avoid division by zero when all scores are equal\n if (minScore === maxScore) {\n return score;\n }\n\n // Normalize score based on actual min and max\n return ((score - minScore) / (maxScore - minScore)) * (max - min) + min;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"function aggregateValues(data, selectedParameters) {\n const aggregates = {}; // Initialize an empty object to store results\n\n // Loop through each parameter in the selected list\n for (const parameter of selectedParameters) {\n // Initialize an accumulator variable for the sum\n let sum = 0;\n\n // Loop through each object in the data array\n for (const item of data) {\n // Add the current parameter value to the sum\n sum += item[parameter];\n }\n\n // Calculate the average for the parameter\n const average = sum / data.length;\n\n // Store the average in the aggregates object\n aggregates[parameter] = average;\n }\n\n return aggregates;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"### Helper Functions: Historical Chart","pinned":false,"hidden":false,"mode":"md"},{"id":1287,"value":"historical_weights = {\n const data = {\n pv_annualgen: stored_pv,\n ashp_suitable_pct: stored_ashp,\n gshp_suitable_pct: stored_gshp,\n insulation_epcABCD: stored_insulation,\n electricity_use: stored_electricity,\n gas_use: stored_gas,\n fuel_poverty: stored_fuel,\n depriv_index: stored_depriv\n };\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"stored_pv = {\n pv_input;\n ashp_input;\n gshp_input;\n insulation_input;\n electricity_input;\n gas_input;\n fuel_input;\n depriv_input;\n // adjustWeights();\n return (this || []).concat(pv_input);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"stored_ashp = {\n pv_input;\n ashp_input;\n gshp_input;\n insulation_input;\n electricity_input;\n gas_input;\n fuel_input;\n depriv_input;\n return (this || []).concat(ashp_input);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"stored_gshp = {\n pv_input;\n ashp_input;\n gshp_input;\n insulation_input;\n electricity_input;\n gas_input;\n fuel_input;\n depriv_input;\n return (this || []).concat(gshp_input);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1435,"value":"stored_insulation = {\n pv_input;\n ashp_input;\n gshp_input;\n insulation_input;\n electricity_input;\n gas_input;\n fuel_input;\n depriv_input;\n return (this || []).concat(insulation_input);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1438,"value":"stored_electricity = {\n pv_input;\n ashp_input;\n gshp_input;\n insulation_input;\n electricity_input;\n gas_input;\n fuel_input;\n depriv_input;\n return (this || []).concat(electricity_input);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"stored_gas = {\n pv_input;\n ashp_input;\n gshp_input;\n insulation_input;\n electricity_input;\n gas_input;\n fuel_input;\n depriv_input;\n return (this || []).concat(gas_input);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"stored_fuel = {\n pv_input;\n ashp_input;\n gshp_input;\n insulation_input;\n electricity_input;\n gas_input;\n fuel_input;\n depriv_input;\n return (this || []).concat(fuel_input);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"stored_depriv = {\n pv_input;\n ashp_input;\n gshp_input;\n insulation_input;\n electricity_input;\n gas_input;\n fuel_input;\n depriv_input;\n return (this || []).concat(depriv_input);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"viewof pv_input = {\n const input = Inputs.range([-1, 1], {\n label: \"Photovoltaic Solar Potential\",\n step: 0.05,\n value: 1\n });\n input.number.style[\"max-width\"] = \"60px\";\n return Object.assign(input, {\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"viewof ashp_input = {\n const input = Inputs.range([-1, 1], {\n label: \"Air Source Heat Pump\",\n step: 0.05,\n value: 1\n });\n input.number.style[\"max-width\"] = \"60px\";\n return Object.assign(input, {\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"viewof gshp_input = {\n const input = Inputs.range([-1, 1], {\n label: \"Ground Source Heat Pump\",\n step: 0.05,\n value: 1\n });\n input.number.style[\"max-width\"] = \"60px\";\n return Object.assign(input, {\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"viewof insulation_input = {\n const input = Inputs.range([-1, 1], {\n label: \"Building Insulation\",\n step: 0.05,\n value: 1\n });\n input.number.style[\"max-width\"] = \"60px\";\n return Object.assign(input, {\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"viewof electricity_input = {\n const input = Inputs.range([-1, 1], {\n label: \"Electricity demand\",\n step: 0.05,\n value: 1\n });\n input.number.style[\"max-width\"] = \"60px\";\n return Object.assign(input, {\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"viewof gas_input = {\n const input = Inputs.range([-1, 1], {\n label: \"Gas demand\",\n step: 0.05,\n value: 1\n });\n input.number.style[\"max-width\"] = \"60px\";\n return Object.assign(input, {\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1411,"value":"viewof fuel_input = {\n const input = Inputs.range([-1, 1], {\n label: \"Fuel Poverty\",\n step: 0.05,\n value: 1\n });\n input.number.style[\"max-width\"] = \"60px\";\n return Object.assign(input, {\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"viewof depriv_input = {\n const input = Inputs.range([-1, 1], {\n label: \"Multideprivation Index\",\n step: 0.05,\n value: 1\n });\n input.number.style[\"max-width\"] = \"60px\";\n return Object.assign(input, {\n oninput: (event) => event.isTrusted && event.stopImmediatePropagation(),\n onchange: (event) => event.currentTarget.dispatchEvent(new Event(\"input\"))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import { glyphMap } from \"d531df0d6e0756b5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"selected_parameters","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {\n griddedData,\n lsoaData,\n griddedGeoJSON,\n selected_parameters\n} from \"0e9c91c84c2d055a\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"import { quickmap } from \"@danylaksono/quickmap\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"import { Cell, resizer } from \"@mbostock/dashboard\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"discr = require(\"statsbreaks\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"import { tileProviders } from \"@danylaksono/quickmap\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1769,"value":"import { fullscreen } from \"@fil/fullscreen\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"fullscreen(dashboard, { center: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"style = () => html`