2f:T7d7,//draw a little barchart of each variable function drawFnSquares(cell, x, y, cellSize, ctx, global, panel) { if (!cell) return; const padding = 2; // ctx.globalAlpha = 0.5; var grid_long = cellSize - padding * 2; var grid_wide = cellSize - padding * 2; //draw cell background const boundary = cell.getBoundary(padding); // console.log("boundary: ", boundary); ctx.fillStyle = "#cccb"; 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(); var cellWidth = (cellSize - 2 * padding) / 3; var cellHeight = (cellSize - 2 * padding) / 2; for (const rec of cell.records) { // console.log("size: ", rec); // console.log(rec[selected_variables[0]]); // const sizes = [rec[p] for p in selected_variables]; const sizes = []; for (const key of selected_variables) { sizes.push(rec[key]); } // ctx.beginPath(); // ctx.fillRect( // x - cellSize / 2 + padding + row, // y - cellSize / 2 + padding + col, // 10, // 10 // ); for (var row = 0; row < 2; row++) { for (var col = 0; col < 3; col++) { // Calculate the index of the square var index = row * 3 + col; // Calculate the size and position of the square var size = (sizes[index] / 100) * Math.min(cellWidth, cellHeight); // console.log(colours[index]); var centerX = col * cellWidth + cellWidth / 2 - size / 2; var centerY = row * cellHeight + cellHeight / 2 - size / 2; // Draw the square ctx.beginPath(); ctx.fillRect( centerX + x - cellSize / 2 + padding, centerY + y - cellSize / 2 + padding, size, size ); ctx.fillStyle = colours[index]; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = "black"; ctx.stroke(); } } // inner cell iteration } }30:[] 2d:{"title":"Gridded-Glyphmap Designs","cells":[{"id":0,"value":"# Gridded-Glyphmap Designs","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"## Data Selection","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"These variables are selected based on data processed in [https://observablehq.com/d/684573e863e1549b](https://observablehq.com/d/684573e863e1549b). The variables selected in this table will be reflected in the Glyphs.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"viewof all_variables = Inputs.table(import_vb, { required: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"selected_variables = {\n let selected_variables = all_variables.map((item) => item.layer);\n if (selected_variables.length > 0) {\n return selected_variables;\n } else {\n // initial value\n return [\n \"acc_supermarket\",\n \"acc_hospitals\",\n \"acc_gp\",\n \"acc_school\",\n \"acc_employment\",\n \"acc_urbancentre\"\n ];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"selected_data = {\n var selected_data = _.filter(all_data, function (obj) {\n return _.some(selected_variables, function (key) {\n return _.has(obj, key);\n });\n });\n\n return selected_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"## Pre-processing","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"Normalising data","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"function normalizeData(data, keysToNormalize) {\n // Create a D3 linear scale for each key to be normalized\n const scales = keysToNormalize.map((key) =>\n d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[key])) // Set domain based on actual data range\n .range([0, 100])\n );\n\n // Normalize the data using the scales\n const normalizedData = data.map((d) => ({\n ...d, // Keep original properties\n ...keysToNormalize.reduce(\n (acc, key) => ({\n ...acc,\n [key]: scales[keysToNormalize.indexOf(key)](d[key])\n }),\n {}\n )\n }));\n\n return normalizedData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"normalisedData = normalizeData(selected_data, selected_variables)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"## Design 1: Averaging all values","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"### Bar Chart","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"This design implements multivariate graphs to indicate different variables in the cell. Each layer is normalised with the sum of all data within the cell.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"{\n await visibility();\n return glyphMap({\n data: normalisedData,\n getLocationFn: (row) => [row.long, row.lat],\n cellSize: 30,\n mapType: \"CartoPositron\",\n discretisationShape: \"grid\",\n\n width: width,\n height: width * 0.5,\n greyscale: true,\n tileWidth: 150,\n\n glyph: {\n aggrFn: appendRecordsAggrFn,\n postAggrFn: summariseVariablesPostAggr(selected_variables),\n drawFn: drawFnSquares,\n postDrawFn: drawLegend,\n tooltipTextFn: (cell) => {\n // console.log(cell.records[0]);\n const textBuilder = [];\n for (const variable of selected_variables) {\n const average = cell.averages[variable] ?? \"-\";\n const percentage = average ? Math.round(average) + \"%\" : \"-\";\n textBuilder.push(`${variable}=${percentage};
`);\n }\n const text = textBuilder.join(\"\").slice(0, -4); // Remove trailing \"; \"\n\n return text;\n }\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"### Drawing Functions","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"Below are the functions used to draw the glyph","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"//Appends all the records to each grid sqaure\nfunction appendRecordsAggrFn(cell, row, weight, global, panel) {\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":24,"value":"// (Use d3) to find the average for each cell (storing as a property of \"cell\") and the max of\n// all cells (storing as a propery of \"global\")\n// Store averages and maxes as key-value pairs as objects\nfunction summariseVariablesPostAggr(listOfVariables) {\n return function postAggrFn(cells, cellSize, global, panel) {\n for (const cell of cells) {\n cell.averages = {};\n for (const variable of listOfVariables) {\n if (cell.records) {\n cell.averages[variable] = d3.mean(\n cell.records.map((row) => +row[variable])\n );\n }\n }\n }\n global.maxes = {};\n for (const variable of listOfVariables) {\n global.maxes[variable] = d3.max(\n cells.map((row) => row.averages[variable])\n );\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"//draw a little barchart of each variable\nfunction drawFnBarChart(cell, x, y, cellSize, ctx, global, panel) {\n if (!cell) return;\n\n const padding = 2;\n //draw cell background\n const boundary = cell.getBoundary(padding);\n // console.log(\"boundary\", boundary);\n ctx.fillStyle = \"#cccb\";\n ctx.beginPath();\n ctx.moveTo(boundary[0][0], boundary[0][1]);\n for (let i = 1; i < boundary.length; i++)\n ctx.lineTo(boundary[i][0], boundary[i][1]);\n ctx.closePath();\n ctx.fill();\n\n // draw graphs\n const h = (cellSize - 2) / selected_variables.length;\n let i = 0;\n for (const variable of selected_variables) {\n const w =\n (cellSize - 2) *\n ((cell.averages ? cell.averages[variable] : 0) /\n (global.maxes ? global.maxes[variable] : 0));\n ctx.fillStyle = \"#000\";\n ctx.fillRect(x - cellSize / 2 + 1, y - cellSize / 2 + i * h + 1, w, h);\n i++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"colours = [\n \"#2e8b57ba\",\n \"#ffa500ba\",\n \"#00ff00ba\",\n \"#0000ffba\",\n \"#1e90ffba\",\n \"#ff1493ba\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"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_variables.map((item) => ctx.measureText(item).width)\n );\n\n const x = panel.getWidth() - maxTextWidth - 20;\n let y = panel.getHeight() - selected_variables.length * 15;\n\n ctx.fillStyle = \"#fff8\";\n ctx.fillRect(x, y, maxTextWidth + 15, selected_variables.length * 15);\n\n for (let i = 0; i < selected_variables.length; i++) {\n ctx.fillStyle = colours[i];\n ctx.fillRect(x, y, 10, 10);\n ctx.fillStyle = \"#333\";\n ctx.fillText(selected_variables[i], x + 15, y + 5);\n y += 15;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"## Design 2: Weighted Average","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"### Glyph Design","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"The first design doesn't take into account the negative values, i.e., variables that instead of supporting a particular cell as a potential candidate for EVCS, instead reducing the value. The second design takes into account the weight of each layer, which might have negative values to take into account this inverse weighting. Aside from layer selection as above, the weights itself can be adjusted by changing the sliders below.","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"viewof form_variables = Inputs.form(inputs, {\n template: (\n inputs\n ) => htl.html`

\n ${Object.values(inputs)}
\n

`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"weighted_variables = vb_with_weight.map(function(obj) {\n return {\n layer: obj.layer,\n group: obj.group,\n weight: form_variables[obj.layer]\n };\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"{\n await visibility();\n return glyphMap({\n data: selected_data,\n getLocationFn: (row) => [row.long, row.lat],\n cellSize: 20,\n discretisationShape: \"grid\",\n\n width: 600,\n height: 300,\n greyscale: true,\n mapType: \"StamenTonerLite\",\n tileWidth: 150,\n\n glyph: {\n aggrFn: appendRecordsAggrFn,\n postAggrFn: summariseVariablesPostAggr_weighted(weighted_variables),\n drawFn: drawFnBarChart\n }\n });\n\n // invalidation.then({});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"### Glyph Functions","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"The aggregation function calculate weighted averages for a set of variables across a set of cells, based on an input list of objects that specify the variable names and weights, which in turn are based on the value from the sliders. ","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"function summariseVariablesPostAggr_weighted(input_obj) {\n return function postAggrFn(cells, cellSize, global, panel) {\n for (const cell of cells) {\n cell.averages = {};\n for (const obj of input_obj) {\n if (cell.records) {\n cell.averages[obj.layer] = d3.mean(\n cell.records.map((row) => +row[obj.layer] * obj.weight)\n );\n }\n }\n }\n global.maxes = {};\n for (const obj of input_obj) {\n global.maxes[obj.layer] = d3.max(\n cells.map((row) => row.averages[obj.layer])\n );\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"## Design 3: Multilevel Glyph","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"### Glyph Design","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"Both designs above failed to take into account the huge numbers of variables that are available to determine potential location for EVCS. The 27 different parameters contribute to the intricacies of the design, which implies that encoding all the variables at once in a single glyph will pertain cognitive issues for users. Hence, this approach will consider the different groups with which the data is categorised (i.e., the 'groups') by encoding only variables having the same groups at a certain zoom levels.\n\nThis also to acknowledge the issue with having a higher resolution dataset (like streetlamp) to affect the overall cell value when the map is zoomed out. At a lower zoom level, the cell size will includes all the variables with higher resolution, thus will affect the entire average of the cell. Hence, having multiple layers with different resolution will help in dealing with the data only at the right zoom level.","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"// Glyph design is WIP","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"inputs = {\n var inputs = {};\n for (var i = 0; i < vb_with_weight.length; i++) {\n var obj = vb_with_weight[i];\n inputs[obj.layer] = Inputs.range([-1, 1], {\n // range can be negative\n label: obj.layer,\n step: 0.1,\n value: obj.weight\n });\n }\n\n return inputs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"vb_with_weight = _.filter(import_vb, function (obj) {\n return _.includes(selected_variables, obj.layer);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"all_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"import { all_data } from \"684573e863e1549b\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"import_vb","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"import { variables as import_vb } from \"684573e863e1549b\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { glyphMap } from \"d531df0d6e0756b5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"import { poissonDisc2d, hexgrid2d, grid2d } from \"@fil/2d-point-distributions\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}