30:T4b5,accessibilityGlyph = { await visibility(); const accessibilityGlyph = glyphMap({ data: normalizedData, // data are normalised accross London. for data across UK, use 'filteredData' getLocationFn: (row) => [row.long, row.lat], cellSize: 30, mapType: "CartoPositron", discretisationShape: "grid", width: 600, height: 400, greyscale: true, tileWidth: 150, glyph: { aggrFn: appendRecordsAggrFn, postAggrFn: postAggrFn, // drawFn: glyphMode, // drawFn: drawFnLines, //drawFnBubbles, postDrawFn: drawLegend, tooltipTextFn: (cell) => { if (cell.averages) { mutable overlaiddata = cell.averages; // const text = cell.averages["employment"][0]; const textBuilder = []; for (const variable of getKeys) { const average = cell.averages[variable][0] ?? "-"; const percentage = average ? Math.round(average) + "%" : "-"; textBuilder.push(`${variable}=${percentage};
`); } const text = textBuilder.join("").slice(0, -4); // Remove trailing "; " return text; } } } }); return accessibilityGlyph; }31:T5e0,//draw a little linechart of each variable function interactiveDrawFn(mode) { return function drawFn(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(); // data cleaning-selection const newData = Object.fromEntries( getKeys.map((key) => [key, cell.averages[key]]) ); const cleanedAvg = removeEmpty(newData); // draw line charts if (mode == "Line Chart") { drawLineChart(ctx, x, y, cellSize, cell.averages); } else if (mode == "Heatmaps") { drawHeatmapChart(ctx, x, y, cellSize, cell.averages); } else if (mode == "Rose Chart") { // console.log("avg data", cell.averages); // console.log("cleaned", cleanedAvg); drawNightingaleRoseChart( ctx, x, y, cellSize, cleanedAvg, colours, padding ); } // Cek if data exists // const averages = reshapeData(aggregatesCell(cell.records)); // console.log("sent averaged data to cells", cell.averages); }; }32:T4cf,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 = 0; // Calculate actual drawing area within the cell const width = cellSize - 2 * margin; const height = cellSize - 2 * margin; const xScale = d3 .scaleLinear() .domain([0, getMinutes.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 < getKeys.length; i++) { const color = colours[i]; const dataPoints = values[getKeys[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 })); 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 = 0.5; ctx.stroke(); } }33:T661,function drawHeatmapChart(ctx, x, y, cellSize, values) { // Define the size of each grid cell within the heatmap const gridSize = cellSize / getMinutes.length; // Calculate the top-left corner of the cell const startX = x - cellSize / 2; const startY = y - cellSize / 2; // Iterate over each key-data series for (let i = 0; i < getKeys.length; i++) { const key = getKeys[i]; const dataPoints = values[key]; // Draw a rectangle and a circle for each data point for (let j = 0; j < getMinutes.length; j++) { const value = dataPoints[j]; // Calculate the position of the rectangle const rectX = startX + i * gridSize; const rectY = startY + j * gridSize; // Set the color based on the value let color; if (value === null || value === 0) { color = "gray"; } else { const colorScale = d3 .scaleLinear() .domain([0, 100]) .range(["#f0f0f0", colours[i]]); // whites mean low value color = colorScale(value); } // Draw the rectangle ctx.fillStyle = color; ctx.fillRect(rectX, rectY, gridSize, gridSize); // Calculate the radius of the circle, ensuring it doesn't exceed half the gridSize const circleRadius = Math.min((value * gridSize) / 200, gridSize / 2); // Calculate the position of the circle const circleX = rectX + gridSize / 2; const circleY = rectY + gridSize / 2; // Draw the circle ctx.beginPath(); ctx.arc(circleX, circleY, circleRadius, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } } }34:T48d,function drawBubbleRingsChart(ctx, x, y, cellSize, values) { const minSize = 10; const maxRadius = 30; const keyPositions = {}; // Store random positions for each key // Generate random positions for each key for (const key of getKeys) { // const maxOffset = cellSize / 3; // Adjust for desired spacing const maxOffset = cellSize / 3 - maxRadius; // Adjust for desired spacing keyPositions[key] = { x: x + Math.random() * maxOffset - maxOffset / 2, y: y + Math.random() * maxOffset - maxOffset / 2 }; } for (let i = getKeys.length - 1; i >= 0; i--) { const color = colours[i]; const key = getKeys[i]; const dataPoints = values[key]; const { x: keyCenterX, y: keyCenterY } = keyPositions[key]; for (let j = 0; j < getMinutes.length; j++) { // const radius = Math.max(minSize, dataPoints[j]); // * (cellSize / 2 - minSize / getKeys.length)); const scaledRadius = (dataPoints[j] * maxRadius) / 100; // Scale percentage (0-100) to maxRadius ctx.beginPath(); ctx.arc(keyCenterX, keyCenterY, scaledRadius, 0, 2 * Math.PI); ctx.fillStyle = color; ctx.fill(); } } }35:T95b,function drawNightingaleRoseChart( ctx, x, y, cellSize, data, colours, padding = 2 ) { // Calculate radius of the chart let radius = (cellSize - 2 * padding) / 2; // Calculate center of the chart let centerX = x; //+ padding; //+ radius; let centerY = y; // + padding; //+ radius; // console.log("rose center", centerX, centerY); // Calculate angle of each segment let segmentAngle = (2 * Math.PI) / Object.keys(data).length; // Iterate over each data type let selectedColours = Object.values(colours).slice(0, getKeys.length); // console.log("data type", data["employment"]); Object.keys(data).forEach((type, i) => { // // make the lower color 'whiter' const colorScale = d3 .scaleLinear() .domain([0, 100]) .range(["white", selectedColours[i]]); const hslColour = d3.hsl(selectedColours[i]); // console.log(hslColour.s); // Initialize inner radius let innerRadius = 0; // Iterate over each time value Object.values(data[type]) .slice() .reverse() .forEach((value, j) => { // Calculate outer radius of the segment let outerRadius = (value / 100) * radius; // adjust saturation based on minutes (whiter=less minutes) const adjustedColor = colorScale(value); // console.log(value); // const rgbaColor = d3.rgb(adjustedColor).toString(); // opacity based on weights const d3Color = d3.color(adjustedColor); // console.log(varWeights[getKeys[i]]); d3Color.opacity = varWeights[getKeys[i]]; // Object.values(varWeights).slice(0, getKeys.length)[i]; // weights[i]; const modifiedRGBA = d3Color.toString(); // Set fill style with adjusted color and opacity // ctx.fillStyle = rgbaColor + opacity.toString(16).padStart(2, "0"); // console.log("modified ", modifiedRGBA); 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.stroke(); innerRadius = outerRadius; }); }); }36:T669,function aggregatesCell(data) { if (data.length < 1) return; // Use a Map to collect unique LSOA11CD values and their associated data const uniqueData = new Map(); for (const item of data) { const LSOA11CD = item.LSOA11CD; if (!uniqueData.has(LSOA11CD)) { uniqueData.set(LSOA11CD, []); } uniqueData.get(LSOA11CD).push(item); } // Create a single object with averaged values and all unique LSOA11CD const averagedObject = { LSOA11CD: Array.from(uniqueData.keys()).join(", "), // Combine unique LSOA11CD into a single string no_data: uniqueData.size // store how many unique data are aggregated in the cell }; // const valueKeys = Object.keys(data[0]).filter((key) => key !== "LSOA11CD"); // Get value keys const valueKeys = Object.keys(data[0]).filter( (key) => key !== "LSOA11CD" && key !== "lat" && key !== "long" ); for (const key of valueKeys) { let total = 0; let count = 0; for (const entries of uniqueData.values()) { for (const entry of entries) { if (key in entry) { total += entry[key]; count++; } } } const average = total / count || 0; // Default to 0 if no data averagedObject[key] = average; } // for (const key of valueKeys) { // const total = Array.from(uniqueData.values()) // .values() // .flatMap((entries) => entries.map((entry) => entry[key])) // .reduce((sum, value) => sum + value, 0); // const average = total / uniqueData.size; // averagedObject[key] = average; // } return [averagedObject]; // Return an array with the single averaged object }37:[] 2e:{"title":"Multivariate Geospatial Visualisation: London Acessibility Glyph Design","cells":[{"id":0,"value":"# Multivariate Geospatial Visualisation: London Acessibility Glyph Design","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"## Gridded-glyphmap","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"Using more variables and travel time would require more computing power, as computations are done in the browser","pinned":false,"hidden":false,"mode":"md"},{"id":242,"value":"viewof getKeys = Inputs.checkbox(key_data, {\n label: \"Variables\",\n value: [\"employment\", \"gp\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"viewof getMinutes = Inputs.checkbox(minutes, {\n label: \"Travel time (minutes)\",\n value: [15, 30, 45, 60],\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"viewof glyphMode = Inputs.radio([\"Rose Chart\", \"Line Chart\", \"Heatmaps\"], {\n label: \"Glyph Mode\",\n value: \"Line Chart\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"Weights\n","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"viewof varWeights = Inputs.form(inputs, {\n template: (\n inputs\n ) => htl.html`

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

`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"Tooltips are values for 15 minutes. ","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"Details on demand","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"{\n // await visibility();\n const [w, h] = [300, 300];\n const ctx = DOM.context2d(w, h);\n const canvas = ctx.canvas;\n ctx.fillStyle = \"lightgrey\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // drawLineChart(ctx, reshapedData);\n const x = canvas.width / 2 - 50;\n const y = canvas.height / 2 - 50;\n\n const newData = Object.fromEntries(\n getKeys.map((key) => [key, overlaiddata[key]])\n );\n const cleanedAvg = removeEmpty(newData);\n\n // drawLineChart(ctx, x, y, 300, overlaiddata);\n drawNightingaleRoseChart(ctx, x, y, 250, cleanedAvg, colours, 0);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"### Glyph Functions","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"function 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":31,"value":"function postAggrFn(cells, cellSize, global, panel) {\n for (const cell of cells) {\n cell.averages = [];\n if (cell.records) {\n // console.log(\"summarise\", reshapeData(aggregatesCell(cell.records)));\n cell.averages = reshapeData(aggregatesCell(cell.records));\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"//draw a little heatmapschart of each variable\nfunction drawFnHeatmaps(cell, x, y, cellSize, ctx, global, panel) {\n if (!cell) return;\n const padding = 2;\n ctx.globalAlpha = 0.5;\n\n var grid_long = cellSize - padding * 2;\n var grid_wide = cellSize - 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 line charts\n // drawLineChart(ctx, x, y, cellSize, cell.averages);\n drawHeatmapChart(ctx, x, y, cellSize, cell.averages);\n\n // Cek if data exists\n // const averages = reshapeData(aggregatesCell(cell.records));\n // console.log(\"sent averaged data to cells\", cell.averages);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"//draw a little barchart of each variable\nfunction drawFnBubbles(cell, x, y, cellSize, ctx, global, panel) {\n if (!cell) return;\n const padding = 2;\n ctx.globalAlpha = 0.5;\n\n var grid_long = cellSize - padding * 2;\n var grid_wide = cellSize - 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 line charts\n drawBubbleRingsChart(ctx, x, y, cellSize / 2, cell.averages);\n // Cek if data exists\n // const averages = reshapeData(aggregatesCell(cell.records));\n // console.log(\"sent averaged data to cells\", cell.averages);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":447,"value":"{\n glyphMode;\n accessibilityGlyph.setGlyph({\n drawFn: interactiveDrawFn(glyphMode)\n });\n accessibilityGlyph.setGlyph({\n drawFn: interactiveDrawFn(glyphMode)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"function removeEmpty(obj) {\n // const removeEmpty = (obj) => {\n let newObj = {};\n Object.keys(obj).forEach((key) => {\n if (obj[key] === Object(obj[key])) newObj[key] = removeEmpty(obj[key]);\n else if (obj[key] !== undefined) newObj[key] = obj[key];\n });\n return newObj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"inputs = {\n var inputs = {};\n for (var i = 0; i < getKeys.length; i++) {\n var obj = getMinutes[i];\n inputs[getKeys[i]] = Inputs.range([0, 1], {\n // range cant be negative\n label: getKeys[i],\n step: 0.1,\n value: obj\n });\n inputs[getKeys[i]].number.remove();\n inputs[getKeys[i]].range.style.margin = 0;\n }\n\n return inputs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"colours = [\"red\", \"green\", \"blue\", \"purple\", \"orange\", \"yellow\"]\n// colours = [\n// \"#2e8b57ba\",\n// \"#ffa500ba\",\n// \"#0000ffba\",\n// \"#1e90ffba\",\n// \"#00ff00ba\",\n// \"#ff1493ba\"\n// ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"// predefined weights\nweights = [0.8, 1, 0, 1, 0.9, 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"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 getKeys.map((item) => ctx.measureText(item).width)\n );\n\n const x = panel.getWidth() - maxTextWidth - 20;\n let y = panel.getHeight() - getKeys.length * 15;\n\n ctx.fillStyle = \"#fff8\";\n ctx.fillRect(x, y, maxTextWidth + 15, getKeys.length * 15);\n\n for (let i = 0; i < getKeys.length; i++) {\n ctx.fillStyle = colours[i];\n ctx.fillRect(x, y, 10, 10);\n ctx.fillStyle = \"#333\";\n ctx.fillText(getKeys[i], x + 15, y + 5);\n y += 15;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"function reshapeData(data) {\n const values = {};\n\n for (const key of key_data) {\n values[key] = minutes.map((minute) => {\n const valueProperty = `${key}_pct_${minute}`;\n return data[0][valueProperty]; // One data point per cells\n });\n }\n\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"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":155,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"### Data Preprocessing","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"mutable overlaiddata = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"normalizedData = normalizeData(selected_data, selected_variables)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"selected_data = filteredData.map((obj) => {\n return [...selected_variables, \"LSOA11CD\", \"lat\", \"long\"].reduce(\n (newObj, key) => {\n if (obj.hasOwnProperty(key)) {\n newObj[key] = obj[key];\n }\n return newObj;\n },\n {}\n );\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"// select only percentage variables\nselected_variables = {\n const combinations = [];\n for (const key of getKeys) {\n for (const minute of getMinutes) {\n combinations.push(`${key}_${minute}`);\n combinations.push(`${key}_pct_${minute}`);\n }\n }\n const filtered = combinations.filter((name) => name.includes(\"_pct_\"));\n return filtered;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import { glyphMap } from \"d531df0d6e0756b5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { key_data, minutes, filteredData } from \"ed70633b2fdc573f\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}