2f:Td57,everyBike2 = glyphMap({ data: data, getLocationFn: (row) => [row.lon, row.lat], cellSize: 35, discretisationShape: "grid", //discretisationMode: "relativeToMouse", showLegend: false, interactiveCellSize: true, //interactiveKernelBW: true, //kernelBW: 2, interactiveZoomPan: true, mapType: tile, // greyscale: true, tileWidth: 150, width: 600, height: 400, customMap: { scaleParams: [ _setupParamFns({ name: "heightMaxV", decKey: "LEFT", decFn: (v) => v - v / 10, incKey: "RIGHT", incFn: (v) => v + v / 10, resetKey: "s", autoscale: true, resetFn: (cells, global, panel) => d3.max( cells.map((cell) => cell && cell.ts ? d3.max(cell.ts.map((ts) => d3.max(ts))) : 0 ) ) }) ], //kernelSmoothProperties: ["ts", "count"], //kernelSmoothPropertyTypes: ["array", "value"], initFn: (cells, cellSize, global, panel) => { global.numT = d3.max(panel.data.map((row) => row.ts.length)); }, preAggrFn: (cells, cellSize, global, panel) => {}, aggrFn: (cell, row, weight, global, panel) => { if (!cell.ts) cell.ts = []; const sums = []; const cs = []; cell.ts.push(row.ts); if (!cell.stations) cell.stations = []; if (!cell.stations.includes(row.name)) cell.stations.push(row.name); }, postAggrFn: (cells, cellSize, global, panel) => {}, preDrawFn: (cells, cellSize, ctx, global, panel) => { // ctx.fillStyle = "#fff9"; // ctx.fillRect(0, 0, panel.getWidth(), panel.getHeight()); global.heightScale = d3 .scaleLinear() .domain([0, global.heightMaxV]) .range([0, cellSize]) .clamp(true); }, drawFn: (cell, x, y, cellSize, ctx, global, panel) => { //console.log(x, y); if (cell && cell.ts && !cell.new) { const padding = 4; const incX = (cellSize - padding * 2) / global.numT; // get current zoom let zoom = Math.log2(panel.getTransform().k).toFixed(2); const mouse = [global.mouseX, global.mouseY]; // console.log("locafn", panel.screenToCoord(mouse)); // console.log("locafn", global.mouseCell.getXCentre()); // console.log(zoom); //test screen coord // const scoord = panel.screenToCoord([0, cellSize]); // console.log("screencord", scoord); //draw cell background const boundary = cell.getBoundary(padding); ctx.fillStyle = "#cccb"; if (zoom >= 12) ctx.fillStyle = "black"; 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(); for (const ts of cell.ts) { ctx.beginPath(); ctx.strokeStyle = "#8557"; if (zoom >= 12) ctx.strokeStyle = "red"; for (let i = 0; i < ts.length; i++) { ctx.lineTo( x - cellSize / 2 + padding + incX * i, y + cellSize / 2 - padding - global.heightScale(ts[i]) ); } ctx.stroke(); } } }, postDrawFn: (cells, cellSize, ctx, global, panel) => {}, tooltipTextFn: (cell) => { return cell.stations ? cell.stations : ""; } } })30:T49bf,function glyphMap(options) { //sort this out later (used values above) const data=options.data; const width=options.width?options.width:600; const height=options.height?options.height:300 //values to eventually go in properties const colourFieldFn = options.colourFieldFn?options.colourFieldFn:(row) => row.value; const type=options.type?options.type:"mean"; let cellSize=options.cellSize?options.cellSize:5; let discretisationMode=options.discretisationMode?options.discretisationMode:"relativeToScreen"; let discretisationShape=options.discretisationShape?options.discretisationShape:"grid"; let kernelBW=options.kernelBW; let getLocationFn=options.getLocationFn?options.getLocationFn:(row)=>[row.lon,row.lat]; const tooltip=true; const autoColourScale=options.autoColourScale; const showLegend=options.showLegend||options.showLegend===false?options.showLegend:false; let colourMax=undefined; const useTransparency=options.useTransparency?options.useTransparency:true; const colourScale = options.colourScale ? options.colourScale : d3.scaleSequential(d3.interpolateYlGn); const interactiveZoomPan=options.interactiveZoomPan!==undefined?options.interactiveZoomPan:true; const interactiveColourScaling = options.interactiveColourScaling; const interactiveCellSize=options.interactiveCellSize; const interactiveKernelBW=options.interactiveKernelBW; const drawSamplePoints=options.drawSamplePoints?options.drawSamplePoints:false; let reduceMaup=options.reduceMaup!==undefined?options.reduceMaup:false; if (!options.initialBB){ const coords=data.map(getLocationFn); const xExtent = d3.extent(coords.map(coord=>+coord[0])); const yExtent = d3.extent(coords.map(coord=>+coord[1])); options.initialBB= [xExtent[0], yExtent[0], xExtent[1], yExtent[1]]; console.log("initialBB",options.initialBB,xExtent,yExtent); } let discretiserFn=options.discretiserFn?options.discretiserFn:_generate2DHeatMap; const useBlur=options.useBlur??false; let kernelSmoothProperties; let kernelSmoothPropertyTypes; let alwaysReaggregate=false;//if true, always reaggregate, even if zoom/pan/cellsize/kernel not changes (useful for animate) let flags={};//temporary flags - reset when drawn once flags.reaggregate=false; let offSetMaupMode=options.offSetMaupMode!==undefined?options.offSetMaupMode:false; const global={}; let scaleParams; let initFn; let preAggrFn; let aggrFn; let postAggrFn; let postKernelSmoothFn; let preDrawFn; let drawFn; let postDrawFn; let tooltipTextFn; let showScaleParams=false; if (options.customMap){ //deprecated options.glyph=options.customMap; } if (options.glyph){ if (options.glyph.kernelSmoothProperties) kernelSmoothProperties = options.glyph.kernelSmoothProperties; if (options.glyph.kernelSmoothPropertyTypes) kernelSmoothPropertyTypes=options.glyph.kernelSmoothPropertyTypes; scaleParams=options.glyph.scaleParams; initFn=options.glyph.initFn; preAggrFn=options.glyph.preAggrFn; aggrFn=options.glyph.aggrFn; postAggrFn=options.glyph.postAggrFn; postKernelSmoothFn=options.glyph.postKernelSmoothFn; preDrawFn=options.glyph.preDrawFn; drawFn = options.glyph.drawFn; postDrawFn=options.glyph.postDrawFn; tooltipTextFn=options.glyph.tooltipTextFn; } else if (type == "count") aggrFn = (cell,row,weight) => (cell.value = (cell.value ?? 0) + weight); //count else if (type == "sum"){ //assume weight will be 0-1 aggrFn = (cell,row,weight) => (cell.value = (cell.value ?? 0) + colourFieldFn(row)*weight); //sum } else if (type == "mean"){ aggrFn = (cell,row,weight) => { //assume weight will be 0-1 //console.log(colourFieldFn(row)); cell.sum = (cell.sum ?? 0) + colourFieldFn(row)*weight; cell.count = (cell.count ?? 0)+1; } postAggrFn= (cells,panel)=>{ for (const cell of cells.flat()){ if (cell&&cell.count>0) cell.value=cell.sum/cell.count } } } let discretiser; const panel = slippyMap(options); let offSetCoordRef=[0,0]; panel.setOnPanFn((e)=>{ //console.log("onpan",e); offSetCoordRef=panel.screenToCoord([e.offsetX,e.offsetY]); }) panel.setOnZoomFn((e) => { offSetCoordRef = panel.screenToCoord([e.offsetX, e.offsetY]) }); panel.data = data; if (options.setup) options.setup(panel,global); //tooltip if (tooltipTextFn) { const tooltipDiv = document.createElement("div"); tooltipDiv.style.width = "auto"; tooltipDiv.style.height = "auto"; tooltipDiv.style.float = "left"; tooltipDiv.style.position = "absolute"; tooltipDiv.style.left = "10px"; tooltipDiv.style.top = "10px"; //tooltipDiv.style.display = "inline-block"; //tooltipDiv.style.border = "1px solid #0009"; tooltipDiv.style.padding = "2px"; tooltipDiv.style.fontSize = "10pt"; tooltipDiv.style.backgroundColor = "#dfd28977"; tooltipDiv.style.pointerEvents = "none"; tooltipDiv.style.visibility = "hidden"; panel.appendChild(tooltipDiv); panel.addEventListener("mousemove", (e) => { const localGrid=grid; if (grid && discretiser){ const [col,row]=discretiser.getColRow(e.offsetX-grid.xOffset,e.offsetY-grid.yOffset); if ( col > 0 && row > 0 && col < localGrid.length && row < (localGrid[col]?localGrid[col].length:0) && localGrid[col]&& localGrid[col][row] ) { tooltipDiv.style.visibility = "visible"; tooltipDiv.innerHTML = tooltipTextFn(localGrid[col][row],global,panel); tooltipDiv.style.left = e.offsetX + 10 + "px"; tooltipDiv.style.top = e.offsetY + 20 + "px"; //console.log(localGrid[col][row]); } else { tooltipDiv.style.visibility = "hidden"; } } }); } if (interactiveColourScaling || interactiveCellSize) { panel.tabIndex = "0"; //makes it keyboard focussable panel.addEventListener("keydown", (event) => { let redrawAtEnd=false; if (interactiveColourScaling && event.keyCode == 37) { event.preventDefault(); //LEFT colourMax += colourMax / 10; redrawAtEnd=true; } if (interactiveColourScaling && event.keyCode == 39) { event.preventDefault(); //RIGHT if (colourMax - colourMax / 10 > 0) colourMax -= colourMax / 10; redrawAtEnd=true; } if (interactiveColourScaling && event.key == 's') { event.preventDefault(); colourMax=undefined; redrawAtEnd=true; } if ( (interactiveCellSize && event.keyCode == 38 && !event.shiftKey)//UP ) { event.preventDefault(); cellSize++; redrawAtEnd=true; } if ( (interactiveCellSize && event.keyCode == 40 && !event.shiftKey)//DOWN ) { event.preventDefault(); cellSize--; redrawAtEnd=true; } if ( (interactiveKernelBW && event.keyCode == 38 && event.shiftKey)//UP ) { event.preventDefault(); kernelBW++; redrawAtEnd=true; } if ( (interactiveKernelBW && event.keyCode == 40 && event.shiftKey)//DOWN ) { event.preventDefault(); kernelBW--; redrawAtEnd=true; } if ( (event.key=='m') ) { event.preventDefault(); reduceMaup=!reduceMaup; redrawAtEnd=true; } if ( (event.key=='h') ) { event.preventDefault(); showScaleParams=!showScaleParams; redrawAtEnd=true; } if (redrawAtEnd)panel.redraw(); }); } let grid=[]; //--start public methods panel.redraw(); panel.setOptions=(newOptions)=>{ for (const key of Object.keys(newOptions)) if (typeof newOptions[key]==='string') eval(key+"="+"\""+newOptions[key]+"\"") else eval(key+"="+newOptions[key]) flags.reaggregate=true; panel.redraw(); }; panel.setData=(data)=>{ panel.data=data; flags.reaggregate=true; panel.redraw(); }; panel.setGlyph = (glyph) => { if (glyph.kernelSmoothProperties) kernelSmoothProperties = glyph.kernelSmoothProperties; if (glyph.kernelSmoothPropertyTypes) kernelSmoothPropertyTypes = glyph.kernelSmoothPropertyTypes; if (glyph.scaleParams) scaleParams = glyph.scaleParams; if (glyph.discretiserFn) discretiserFn = glyph.discretiserFn; if (glyph.initFn) initFn = glyph.initFn; if (glyph.preAggrFn) preAggrFn = glyph.preAggrFn; if (glyph.aggrFn) aggrFn = glyph.aggrFn; if (glyph.postAggrFn) postAggrFn = glyph.postAggrFn; if (glyph.postKernelSmoothFn) postKernelSmoothFn = glyph.postKernelSmoothFn; if (glyph.preDrawFn) preDrawFn = glyph.preDrawFn; if (glyph.drawFn) drawFn = glyph.drawFn; if (glyph.postDrawFn) postDrawFn = glyph.postDrawFn; if (glyph.tooltipTextFn) tooltipTextFn = glyph.tooltipTextFn; flags.reaggregate = true; panel.redraw(); }; panel.getCoordBBInView= ()=>{ const topLeftCoord = panel.screenToCoord([0, height]); const bottomRightCoord = panel.screenToCoord([width, 0]) return [topLeftCoord[0],topLeftCoord[1],bottomRightCoord[0],bottomRightCoord[1]] }; //depreccated panel.getCoordBB=panel.getCoordBBInView; panel.getDataInView = ()=>{ const topLeftCoord = panel.screenToCoord([0, height]); const bottomRightCoord = panel.screenToCoord([width, 0]); return data.filter(row=>{ const location=getLocationFn(row); return location[0] >= topLeftCoord[0] && location[0] <= bottomRightCoord[0] && location[1] >= topLeftCoord[1] && location[1] <= bottomRightCoord[1] }) }; //it true will already reaggregate (usual for animation) panel.setAlwaysReaggregate=(flag)=>{ alwaysReaggregate = flag; } //--end public methods if (initFn) initFn(grid.flat(), cellSize, global, panel); if (scaleParams){ for (const scaleParam of scaleParams) scaleParam.initFn(grid.flat(), cellSize, global, panel); } panel.addEventListener("click", (event) =>{ if (showScaleParams){ let c = 0; console.log("click",event); for (const scaleParam of scaleParams) { if (event.offsetY > c * 10 + 5 && event.offsetY < (c + 1) * 10 + 5) { if (!scaleParam.getAutoscale()){ if (event.offsetX > 0 + 5 && event.offsetX < 10 + 5) scaleParam.doDec(global, panel); if (event.offsetX > 10 + 5 && event.offsetX < 20 + 5) scaleParam.doReset(global, panel); if (event.offsetX > 20 + 5 && event.offsetX < 30 + 5) scaleParam.doInc(global, panel); } if (event.offsetX > 30 + 5 && event.offsetX < 40 + 5) { scaleParam.toggleAutoscale(); panel.redraw(); } } c++; } } }); let previousTransform; let previousCellSize; let previousKernelBW; let previousMaupReduce; //this is called by the slippymap panel everytime the mouse moves panel.addDrawFn(function(div,e){ global.mouseX =(e&&e.offsetX)? e.offsetX:undefined; global.mouseY =(e&&e.offsetY)? e.offsetY:undefined; let needToRedicretise=false; const transform=panel.getTransform(); if (flags.reaggregate||alwaysReaggregate || !previousTransform || previousTransform.x!=transform.x || previousTransform.y!=transform.y ||previousTransform.z!=transform.z || previousCellSize!==cellSize||previousKernelBW!==kernelBW||previousMaupReduce!==reduceMaup){ flags.reaggregate=false; needToRedicretise=true; if (!discretiser || previousCellSize!=cellSize){ if (discretisationShape=="grid") discretiser=_getGridDiscretiser(cellSize); else if (discretisationShape=="hex") discretiser=_getHexDiscretiser(cellSize); else return "Invalid discretisationShape"; } global.discretiser=discretiser; if (scaleParams) for (const scaleParam of scaleParams) if (scaleParam.preAggrFn) scaleParam.preAggrFn(grid.flat(),cellSize,panel.ctx,global,panel); grid = discretiserFn({ data: panel.data, width, height, getLocationFn, coordToScreenFn : (coord) => panel.coordToScreen(coord), screenToCoordFn : (coord) => panel.screenToCoord(coord), cellSize, discretiser, preAggrFn, global, aggrFn, postAggrFn, getLocationFn, offSetCoordRef, discretisationMode, reduceMaup,panel,offSetMaupMode }); previousTransform=transform; previousCellSize=cellSize; previousKernelBW=kernelBW; previousMaupReduce=reduceMaup; //console.log("recalced grid"); if (kernelBW && kernelBW>0){ //console.log("Smoothing..."); if (useBlur) _blur({ grid: grid, properties: kernelSmoothProperties, propertyTypes: kernelSmoothPropertyTypes, discretiser, kernelRadius: Math.trunc(kernelBW/2) }); else _kernelSmooth({ grid: grid, properties: kernelSmoothProperties, propertyTypes: kernelSmoothPropertyTypes, discretiser, kernelRadius: kernelBW }); //console.log("done."); } } else{ //console.log("didn't recalc grid"); } if (global.mouseX && global.mouseY){ const [col,row]=discretiser.getColRow(global.mouseX-grid.xOffset,global.mouseY-grid.yOffset); if ( col > 0 && row > 0 && col < grid.length && row < (grid[col]?grid[col].length:0) && grid[col]&& grid[col][row]) global.mouseCell=grid[col][row]; else global.mouseCell = undefined; } else global.mouseCell = undefined; if (postKernelSmoothFn) postKernelSmoothFn(grid.flat(), cellSize, global, panel); if (autoColourScale || !colourMax){ resetColourScaling(); } //panel.ctx.clearRect(0, 0,width, height); if (scaleParams) for (const scaleParam of scaleParams) if (scaleParam.preDrawFn){ panel.ctx.save(); scaleParam.preDrawFn(grid.flat(),cellSize,panel.ctx,global,panel); panel.ctx.restore(); } if (preDrawFn){ panel.ctx.save(); preDrawFn(grid.flat(),cellSize,panel.ctx,global,panel); panel.ctx.restore(); } //console.log(grid); if (drawFn){ panel.ctx.save(); // for (let col=0;col")+"/"+(scaleParam.incKey? scaleParam.incKey:"")+"/"+(scaleParam.resetKey?scaleParam.resetKey:"")+")"; labels.push(s); } const panelW=40+d3.max(labels.map(s=>panel.ctx.measureText(s).width))+5; panel.ctx.fillStyle="#fff"; panel.ctx.fillRect(0,0,panelW,scaleParams.length*10+5+5) let c=0; //panel.ctx.fillStyle="#000"; panel.ctx.font = "10px"; panel.ctx.textBaseline="top"; for (const scaleParam of scaleParams){ panel.ctx.fillStyle="#aaa"; panel.ctx.strokeStyle="#aaa"; if (!scaleParam.getAutoscale()){ panel.ctx.fillRect(0 + 5, c * 10 + 5 + 1, 9, 8); panel.ctx.fillRect(10 + 5, c * 10 + 5 + 1, 9, 8); panel.ctx.fillRect(20 + 5, c * 10 + 5 + 1, 9, 8); } if (scaleParam.getAutoscale()) panel.ctx.fillRect(30+5,c*10+5+1,9,8); else panel.ctx.strokeRect(30+5,c*10+5+1,9,8); panel.ctx.fillStyle="#333"; panel.ctx.textAlign = "center"; if (!scaleParam.getAutoscale()){ panel.ctx.fillText("<",5+5,c*10+5); panel.ctx.fillText(">",25+5,c*10+5); } panel.ctx.fillText("A",35+5,c*10+5); panel.ctx.fillStyle="#333"; panel.ctx.textAlign="left"; panel.ctx.fillText(labels[c],50,c*10+5); c++; } } } if (showLegend) { _drawLegend({ context: panel.ctx, values: grid .flat() .map((item) => (item ? item.value : NaN)), minV: 0, maxV: colourMax, numBins: 20, x: width - 160, y: height - 60, width: 150, height: 50, colourScale }); } function resetColourScaling() { // console.log("flat",grid.flat().map( (datum) => // (datum&&datum["value"] ? datum["value"] : NaN // ))); colourMax = d3.max(grid.flat(), (datum) => (datum&&datum["value"] ? datum["value"] : NaN )); if (!colourMax)colourMax=0; //console.log("Rescaled colour to ",colourMax); } }); //public method are higher up, commented "--start public methods" return panel; }31:Tb5e,//This code is based on http://gdreflections.com/2011/02/hexagonal-grid-math.html by Ruslan Shestopalyuk _getHexDiscretiser = function (cellSize) { function getHexParams(cellSize) { const state = { NEIGHBORS_DI: [0, 1, 1, 0, -1, -1], NEIGHBORS_DJ: [ [-1, -1, 0, 1, 0, -1], [-1, 0, 1, 1, 1, 0] ], NUM_NEIGHBORS: 6 }; state.RADIUS = Math.trunc((cellSize * 1.3) / 2); state.WIDTH = state.RADIUS * 2; state.HEIGHT = Math.trunc(state.RADIUS * Math.sqrt(3)); state.SIDE = (state.RADIUS * 3) / 2; let cdx = [ state.RADIUS / 2, state.SIDE, state.WIDTH, state.SIDE, state.RADIUS / 2, 0 ]; state.CORNERS_DX = cdx; let cdy = [ 0, 0, state.HEIGHT / 2, state.HEIGHT, state.HEIGHT, state.HEIGHT / 2 ]; state.CORNERS_DY = cdy; return state; } const hexParams = getHexParams(cellSize); let currentPadding; let hexParamsPadding; const discretiser = { getColRow: (x, y) => { let ci = Math.floor(x / hexParams.SIDE); let cx = x - hexParams.SIDE * ci; let ty = y - ((ci % 2) * hexParams.HEIGHT) / 2; let cj = Math.floor(ty / hexParams.HEIGHT); let cy = ty - hexParams.HEIGHT * cj; if ( cx > Math.abs( hexParams.RADIUS / 2 - (hexParams.RADIUS * cy) / hexParams.HEIGHT ) ) { return [ci, cj]; } else { return [ci - 1, cj + (ci % 2) - (cy < hexParams.HEIGHT / 2 ? 1 : 0)]; } }, getXYCentre: (col, row) => { let xy = [ col * hexParams.SIDE, (hexParams.HEIGHT * (2 * row + (col % 2))) / 2 ]; return [xy[0] + hexParams.RADIUS, xy[1] + hexParams.HEIGHT / 2]; }, getXYCentreCellUnits: (col, row) => { //as if cell side is 1 const height = Math.sqrt(3); const side = 3 / 2; let xy = [col * side, (height * (2 * row + (col % 2))) / 2]; return [xy[0] + 1, xy[1] + height / 2]; }, getBoundary: (col, row, padding) => { let coords = []; if (!padding) padding = 0; if (padding > 0 && padding != currentPadding) { currentPadding = padding; hexParamsPadding = getHexParams(cellSize - padding * 2); } const hexParamsForBoundary = padding ? hexParamsPadding : hexParams; let xy = [ col * hexParams.SIDE, (hexParams.HEIGHT * (2 * row + (col % 2))) / 2 ]; for (let k = 0; k < hexParamsForBoundary.NUM_NEIGHBORS; k++) coords.push([ Math.round( xy[0] + ((padding * 2) / 3) * 2 + hexParamsForBoundary.CORNERS_DX[k] ), Math.round( xy[1] + ((padding * 2) / 3) * 2 + hexParamsForBoundary.CORNERS_DY[k] ) ]); return coords; }, getCellSize: () => cellSize, type: "hex" }; return discretiser; }32:T4c1,_getGridDiscretiser = function (cellSize) { const discretiser = { getColRow: (x, y) => [Math.trunc(x / cellSize), Math.trunc(y / cellSize)], getXYCentre: (col, row) => [ col * cellSize + cellSize / 2, row * cellSize + cellSize / 2 ], getBoundary: (col, row, padding) => { const adjCellSize = padding ? cellSize - padding * 2 : cellSize; const xy = [col * cellSize + cellSize / 2, row * cellSize + cellSize / 2]; return [ [xy[0] - adjCellSize / 2, xy[1] - adjCellSize / 2], [xy[0] + adjCellSize / 2, xy[1] - adjCellSize / 2], [xy[0] + adjCellSize / 2, xy[1] + adjCellSize / 2], [xy[0] - adjCellSize / 2, xy[1] + adjCellSize / 2] ]; }, getBoundaryScreenCoord: (x, y, padding) => { const adjCellSize = padding ? cellSize - padding * 2 : cellSize; const xy = [x, y]; return [ [xy[0] - adjCellSize / 2, xy[1] - adjCellSize / 2], [xy[0] + adjCellSize / 2, xy[1] - adjCellSize / 2], [xy[0] + adjCellSize / 2, xy[1] + adjCellSize / 2], [xy[0] - adjCellSize / 2, xy[1] + adjCellSize / 2] ]; }, getCellSize: () => cellSize, type: "grid" }; return discretiser; }33:Tbad,function createDiscretiserValue(params) { const valueFn = params && params.valueFn ? params.valueFn : undefined; const glyphLocationFn = params && params.glyphLocationFn ? params.glyphLocationFn : undefined; const boundaryFn = params && params.boundaryFn ? params.boundaryFn : undefined; return function (options) { const data = options.data; const width = options.width; const height = options.height; const cellSize = options.cellSize; const getLocationFn = options.getLocationFn; const coordToScreenFn = options.coordToScreenFn; const screenToCoordFn = options.screenToCoordFn; const preAggrFn = options.preAggrFn; const aggrFn = options.aggrFn; const postAggrFn = options.postAggrFn; const panel = options.panel; const discretiser = _getGridDiscretiser(cellSize); const global = options.global; let spatialUnitsLookup = {}; const topLeftCoord = screenToCoordFn([0, height]); const bottomRightCoord = screenToCoordFn([width, 0]); if (preAggrFn) { preAggrFn([], cellSize, global, panel); //empty array because spatialUnitsLookup is always empty - probably eventually remove from this function } let i = 0; for (let datum of data) { let key; if (valueFn) key = valueFn(datum); else { key = i; i++; } const location = glyphLocationFn ? glyphLocationFn(key) ?? [0, 0] : getLocationFn(datum); const screenXY = coordToScreenFn(location); if ( location[0] >= topLeftCoord[0] && location[0] <= bottomRightCoord[0] && location[1] >= topLeftCoord[1] && location[1] <= bottomRightCoord[1] ) { let spatialUnit = spatialUnitsLookup[key]; if (!spatialUnit) { let screenBoundary; if (boundaryFn) screenBoundary = boundaryFn(key)?.map((coord) => coordToScreenFn([coord[0], coord[1]]) ); spatialUnit = { getBoundary: screenBoundary ? () => screenBoundary : (padding) => discretiser.getBoundaryScreenCoord( screenXY[0], screenXY[1], padding ), getXCentre: () => Math.trunc(screenXY[0]), getYCentre: () => Math.trunc(screenXY[1]), getCellSize: () => cellSize }; spatialUnitsLookup[key] = spatialUnit; } if (aggrFn) if (!Array.isArray(aggrFn)) aggrFn(spatialUnit, datum, 1, global, panel); else for (const aggrFn1 of aggrFn) if (aggrFn1) aggrFn1(spatialUnit, datum, 1, global, panel); } } const spatialUnits = Object.values(spatialUnitsLookup); spatialUnits.yOffset = 0; spatialUnits.xOffset = 0; if (postAggrFn) { postAggrFn(spatialUnits, cellSize, global, panel); } return spatialUnits; }; }34:T1a85,_generate2DHeatMap = function (options) { const data = options.data; const width = options.width; const height = options.height; const cellSize = options.cellSize; const getLocationFn = options.getLocationFn; const coordToScreenFn = options.coordToScreenFn; const screenToCoordFn = options.screenToCoordFn; const preAggrFn = options.preAggrFn; const aggrFn = options.aggrFn; const postAggrFn = options.postAggrFn; const offSetCoordRef = options.offSetCoordRef; const discretisationMode = options.discretisationMode; const reduceMaup = options.reduceMaup; const panel = options.panel; const discretiser = options.discretiser; const numCols = Math.trunc(width / cellSize); const numRows = Math.trunc(height / cellSize); const global = options.global; const offSetMaupMode=options.offSetMaupMode; let grid = []; // let grid = Array(numCols) // .fill() // .map(() => Array(numRows).fill()); if (discretisationMode == "relativeToMouse") { grid.xOffset = Math.trunc(coordToScreenFn(offSetCoordRef)[0] % cellSize); grid.yOffset = Math.trunc(coordToScreenFn(offSetCoordRef)[1] % cellSize); } else { grid.xOffset = 0; grid.yOffset = 0; } grid.type = discretiser.type; grid.cellSize = cellSize; const topLeftCoord = screenToCoordFn([0, height]); const bottomRightCoord = screenToCoordFn([width, 0]); if (preAggrFn) { preAggrFn(grid.flat(), cellSize, global, panel); } for (let datum of data) { const colRows = []; const location = getLocationFn(datum); if (location.type) { //assume it's a feature const featBB = turf.bbox(location); const topLeftBB = coordToScreenFn([featBB[0], featBB[1]]); const bottomRightBB = coordToScreenFn([featBB[2], featBB[3]]); for ( let x = Math.trunc(topLeftBB[0] / cellSize); x < bottomRightBB[0] / cellSize; x++ ) { for ( let y = Math.trunc(topLeftBB[1] / cellSize); y < bottomRightBB[1] / cellSize; y++ ) { colRows.push([x, y]); } } if (colRows.length == 0) { const centroid = turf.centroid(location); colRows.push([ Math.trunc(centroid[0] / cellSize), Math.trunc(centroid[1] / cellSize) ]); } } //it's a point else { if ( location[0] >= topLeftCoord[0] && location[0] <= bottomRightCoord[0] && location[1] >= topLeftCoord[1] && location[1] <= bottomRightCoord[1] ) { const screenXY = coordToScreenFn(location); //console.log(reduceMaup); if (!reduceMaup) { if (offSetMaupMode){ for (let xOff=0; xOff= 0 && // colRow[0] < numCols && // colRow[1] >= 0 && // colRow[1] < numRows true ) { if (!grid[colRow[0]]) grid[colRow[0]] = []; if (!grid[colRow[0]][colRow[1]]) { grid[colRow[0]][colRow[1]] = { getBoundary: (padding) => discretiser.getBoundary(colRow[0], colRow[1],padding), getXCentre: () => discretiser.getXYCentre(colRow[0], colRow[1])[0]+grid.xOffset, getYCentre: () => discretiser.getXYCentre(colRow[0], colRow[1])[1]+grid.yOffset, getCellSize:()=> cellSize }; } if (aggrFn) if (!Array.isArray(aggrFn)) if (offSetMaupMode) { aggrFn( grid[colRow[0]][colRow[1]], { ...datum, maupMode: colRow[2] }, 1, //don't bother with weight for now global, panel ); } else aggrFn( grid[colRow[0]][colRow[1]], datum, colRow[2] ? colRow[2] : 1, global, panel ); //provide the weight (or 1) //console.log(point[0], point[1], grid[point[0]][point[0]]); else for (const aggrFn1 of aggrFn) if (aggrFn1) aggrFn1( grid[colRow[0]][colRow[1]], datum, colRow[2] ? colRow[2] : 1, global, panel ); } } } if (postAggrFn) { postAggrFn(grid.flat(), cellSize, global, panel); } //console.log(grid); return grid; }35:T1807,function _kernelSmooth(options) { const grid = options.grid; const properties = options.properties; const propertyTypes = options.propertyTypes; if (properties === undefined || propertyTypes === undefined) { console.log("Need to define properties and propertyTypes for smoothing"); return; } const discretiser = options.discretiser; const kernelRadius = options.kernelRadius; const numCols = grid.length + kernelRadius; const numRows = Math.max(...Object.values(grid.map((cols) => cols.length))) + kernelRadius; { //set up wMatrix const wMatrix = []; for (let kx = -kernelRadius; kx < kernelRadius; kx++) { for (let ky = -kernelRadius; ky < kernelRadius; ky++) { let dist; if (grid.type == "grid") { // if (grid.type) { // console.log("smoothing as grid"); dist = Math.sqrt(Math.pow(kx, 2) + Math.pow(ky, 2)); } else if (grid.type == "hex") { // console.log("smoothing as hex"); const [x, y] = discretiser.getXYCentreCellUnits(0, 0); const [x1, y1] = discretiser.getXYCentreCellUnits( kx, kx < 0 ? ky : -ky ); dist = Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2)); //console.log(kx, ky, x1, y1); } if (dist < kernelRadius) { var w = (kernelRadius - dist) / (kernelRadius + dist); if (!wMatrix[kx]) wMatrix[kx] = []; wMatrix[kx][ky] = w; } } } //console.log("wMatrix", wMatrix); for (let j = 0; j < properties.length; j++) { for (let x = 0; x < numCols; x++) { for (let y = 0; y < numRows; y++) { let cumW = 0; let newV = undefined; for (var kx = -kernelRadius; kx <= kernelRadius; kx++) { for (var ky = -kernelRadius; ky <= kernelRadius; ky++) { if ( x + kx >= 0 && x + kx < numCols && y + ky >= 0 && y + ky < numRows ) { if (propertyTypes[j] === "value") { let v = grid[x + kx] && grid[x + kx][y + ky] ? grid[x + kx][y + ky][properties[j]] : 0; if (isNaN(v)) v = 0; let w; //for hex, ky needs to be adjusted in under some conditions if ( grid.type == "hex" && x % 2 == 0 && (kx % 2 == 1 || kx % 2 == -1) ) w = wMatrix[kx] ? wMatrix[kx][ky + 1] : 0; else //grid and other hex conditions w = wMatrix[kx] ? wMatrix[kx][ky] : 0; if (w > 0) { newV = newV ? newV + v * w : v * w; cumW = cumW ? cumW + w : w; } } // else if (propertyTypes[j] === "array") { let array = grid[x + kx] && grid[x + kx][y + ky] && grid[x + kx][y + ky][properties[j]] ? grid[x + kx][y + ky][properties[j]]:[]; let w; //for hex, ky needs to be adjusted in under some conditions if ( grid.type == "hex" && x % 2 == 0 && (kx % 2 == 1 || kx % 2 == -1) ) w = wMatrix[kx] ? wMatrix[kx][ky + 1] : 0; else //grid and other hex conditions w = wMatrix[kx] ? wMatrix[kx][ky] : 0; if (w > 0) { cumW = cumW ? cumW + w : w; for (let i = 0; i < array.length; i++) { let v = array[i]; if (!v) v = 0; if (isNaN(v)) v = 0; if (!newV) newV = []; //console.log(properties[j], i, newV, newV[i], v, w); newV[i] = newV[i]!==undefined && newV[i] ? newV[i] + v * w : v * w; } } } }// } } if (!grid[x]) grid[x] = []; for (let j = 0; j < properties.length; j++) { if (propertyTypes[j] === "value") { if (newV / cumW > 0) { //create new cell if one doesn't exist if (!grid[x][y]) grid[x][y] = { getBoundary: () => discretiser.getBoundary(x,y), getXCentre: () => discretiser.getXYCentre(x,y)[0]+grid.xOffset, getYCentre: () => discretiser.getXYCentre(x,y)[1]+grid.yOffset, getCellSize:()=> discretiser.getCellSize(), new: true }; grid[x][y]["_" + properties[j]] = newV / cumW; } } else if (propertyTypes[j] === "array") { if (newV) { for (let i = 0; i < newV.length; i++) { if (newV[i] / cumW> 0) { //create new cell if one doesn't exist if (!grid[x][y]) grid[x][y] = { getBoundary: () => discretiser.getBoundary(x,y), getXCentre: () => discretiser.getXYCentre(x,y)[0]+grid.xOffset, getYCentre: () => discretiser.getXYCentre(x,y)[1]+grid.yOffset, getCellSize:()=> discretiser.getCellSize(), new: true }; if (!grid[x][y]["_" + properties[j]]) grid[x][y]["_" + properties[j]] = []; grid[x][y]["_" + properties[j]][i] = newV[i] / cumW; } } } } } } } } for (let cell of grid.flat()) { for (let j = 0; j < properties.length; j++) { if (cell["_" + properties[j]] !== undefined) cell[properties[j]] = cell["_" + properties[j]]; } } } }36:T77b,function _blur(options) { const grid = options.grid; const discretiser = options.discretiser; const properties = options.properties; const propertyTypes = options.propertyTypes; if (properties === undefined || propertyTypes === undefined) { console.log("Need to define properties and propertyTypes for smoothing"); return; } const kernelRadius = options.kernelRadius; const numCols = grid.length + kernelRadius; const numRows = Math.max(...Object.values(grid.map((cols) => cols.length))) + kernelRadius; { for (let j = 0; j < properties.length; j++) { if (propertyTypes[j] === "value") { const vs = []; for (let y = 0; y < numRows; y++) { for (let x = 0; x < numCols; x++) { vs.push( grid[x] && grid[x][y] && grid[x][y][properties[j]] ? grid[x][y][properties[j]] : 0 ); } } d3.blur2({ data: vs, width: numCols, height: numRows }, kernelRadius); for (let x = 0; x < numCols; x++) { for (let y = 0; y < numRows; y++) { const v = vs[x + y * numCols]; if (v > 0) { if (!grid[x]) grid[x] = []; if (!grid[x][y]) grid[x][y] = { getBoundary: () => discretiser.getBoundary(x, y), getXCentre: () => discretiser.getXYCentre(x, y)[0] + grid.xOffset, getYCentre: () => discretiser.getXYCentre(x, y)[1] + grid.yOffset, getCellSize: () => discretiser.getCellSize(), new: true }; grid[x][y][properties[j]] = v; } else { if (grid[x] && grid[x][y] && grid[x][y][properties[j]]) grid[x][y][properties[j]] = v; } } } } } } return grid; }37:T79b,_drawLegend = function (options) { const numBins = options.numBins; const context = options.context; const minV = options.minV; const maxV = options.maxV; const values = options.values; const x = options.x; const y = options.y; const width = options.width; const height = options.height; const colourScale = options.colourScale; const bins = Array(numBins + 2).fill(0); //+2 2 for overflow bins const binSize = (maxV - minV) / bins.length; for (const v of values) { if (v) { const binIdx = Math.trunc((v - minV) / binSize) + 1; if (binIdx < 1) bins[0]++; else if (binIdx > bins.length - 2) bins[bins.length - 1]++; else bins[binIdx]++; } } const maxBinV = Math.max(...bins.slice(1, -2)); const hScale = d3 .scaleLinear() .domain([0, maxBinV]) .range([0, height - 30]); const binPixelW = width / bins.length; context.fillStyle = "#fff8"; context.fillRect(x, y, width, height); for (let i = 0; i < bins.length; i++) { context.fillStyle = colourScale(i / bins.length); context.fillRect(x + i * binPixelW, y + height - 10, binPixelW, -10); if (i == 0) context.fillStyle = colourScale(0); else if (i == bins.length - 1) context.fillStyle = colourScale(1); else context.fillStyle = colourScale(0.5); context.fillRect( x + i * binPixelW, y + height - 20, binPixelW, -Math.min(hScale(bins[i]), height - 20) ); } context.fillStyle = "#000"; context.font = "sans-serif 8pt"; context.textBaseline = "bottom"; context.textAlign = "left"; context.fillText( minV.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 3 }), x + binPixelW, y + height ); context.textAlign = "right"; context.fillText( maxV.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 3 }), x + width - binPixelW, y + height ); }38:Td1c,_setupParamFns = (options) => { const name = options.name; const decKey = options.decKey; //can be LEFT, SHIFT_LEFT or the char itself const incKey = options.incKey; //can be RIGHT, SHIFT_RIGHT or the char itself const resetKey = options.resetKey; const incDecType = options.incDecType; const decFn = options.decFn ? options.decFn : (v) => v - 1; const incFn = options.incFn ? options.incFn : (v) => v + 1; // const resetFn = options.resetFn // ? options.resetFn // : cellValueFn // ? d3.max // : undefined; const numberFormatFn = options.numberFormatFn ? options.numberFormatFn : (value) => +value.toFixed(); const resetFn = options.resetFn; const resetType = options.resetType ? options.resetType : "preDraw"; //"preAggr" or "preDraw" let autoscale = options.autoscale !== undefined ? options.autoscale : false; const onChangeFn = options.onChangeFn; const doInc = (global, panel) => { global[name] != undefined ? (global[name] = incFn(global[name])) : undefined; if (onChangeFn) onChangeFn(global); panel.redraw(); }; const doDec = (global, panel) => { global[name] != undefined ? (global[name] = decFn(global[name])) : undefined; if (onChangeFn) onChangeFn(global); panel.redraw(); }; const doReset = (global, panel) => { global[name] = undefined; if (onChangeFn) onChangeFn(global); panel.redraw(); }; const getAutoscale = () => autoscale; const toggleAutoscale = () => { autoscale = !autoscale; }; return { ...options, initFn: (grid, cellSize, global, panel) => { panel.addEventListener("keydown", (event) => { //decrement if ( (decKey && decKey.startsWith("SHIFT_") === event.shiftKey && ((decKey.endsWith("LEFT") && event.keyCode == 37) || (decKey.endsWith("RIGHT") && event.keyCode == 39))) || event.key === decKey ) { event.preventDefault(); doDec(global, panel); } //increment if ( (incKey && incKey.startsWith("SHIFT_") === event.shiftKey && ((incKey.endsWith("LEFT") && event.keyCode == 37) || (incKey.endsWith("RIGHT") && event.keyCode == 39))) || event.key === incKey ) { event.preventDefault(); doInc(global, panel); } //reset key if (resetKey && event.key == resetKey) { event.preventDefault(); doReset(global, panel); } }); }, toggleAutoscale: toggleAutoscale, getAutoscale: getAutoscale, preAggrFn: resetType == "preAggr" ? (cells, cellSize, ctx, global, panel) => { if (resetFn && (getAutoscale() || global[name] === undefined)) { global[name] = resetFn(cells.flat(), cellSize, panel); } } : undefined, preDrawFn: resetType == "preDraw" ? (cells, cellSize, ctx, global, panel) => { if (resetFn && (getAutoscale() || global[name] === undefined)) { global[name] = resetFn(cells.flat(), cellSize, panel); } } : undefined, doInc, //methods defined above, so other methods (i.e. mouseclick can do it) doDec, doReset, numberFormatFn }; }39:T5ba,**Key Functions and Variables**: - glyphMap(options): The main function that creates a map visualization. - options: An object containing various configuration options for the map. - data: An array of data points to be visualized. - discretiserFn: A function that discretizes the space into cells (e.g., grid or hex). - aggrFn: A function that aggregates data points into cells. - drawFn: A function that draws each cell on the map. - panel: A slippyMap object representing the map panel. - grid: A 2D array representing the discretized cells. - global: An object for storing global variables. **Function Breakdown**: 1. _Initialization_: - Sets up default values for options and variables. - Creates the slippyMap panel. - Attaches event listeners for zooming, panning, keyboard input, and mouse movement. 2. _Data and Glyph Setup_: - Calls initFn (if provided) to initialize the grid. - Sets up tooltip functionality (if tooltipTextFn is provided). 3. _Redrawing the Map_: - Triggers a redraw when the map is moved, zoomed, or options are changed. - Recalculates the grid if necessary (based on zoom level, cell size, etc.). - Smoothes the data using a Gaussian kernel (optional). - Adjusts color scaling based on data values. - Calls preDrawFn (if provided) for any pre-drawing tasks. - Calls drawFn to draw each cell on the map. - Calls postDrawFn (if provided) for any post-drawing tasks. - Draws a legend (if showLegend is true).3a:[] 2d:{"title":"Slippy glyphmaps","cells":[{"id":2049,"value":"# Slippy glyphmaps","pinned":false,"hidden":false,"mode":"md"},{"id":2024,"value":"_This notebook is a fork of the Gridded-glyphmap library (https://observablehq.com/@aidans/slippy-glyphmaps)._","pinned":false,"hidden":false,"mode":"md"},{"id":2028,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"\n\nSlippy glyphmaps is a library for making zoomable and pannable gridded glyphmaps with customisable glyphs. Predefined glyphs and instructions for creating your own glyphs are in the [glyphmaps collection](https://observablehq.com/collection/@aidans/glyphmap-glyphs).\n\n## Example\n\nLondon has a public bike hire scheme and the [example below](https://observablehq.com/d/05b119b94705f4bf) with 805 docking stations. The gridded glyphmap below grids these and each line on the line graphs represented the number of bikes available at its docking station over the last 24 hour. Where there are multiple lines in a grid square, there are multiple docking stations. If you try zooming in, you will see the number of lines decreasing as each grid cell represents a smaller geographical area. If you zoom out, all the bike station will eventually be contained within one square.","pinned":false,"hidden":false,"mode":"md"},{"id":2019,"value":"viewof tile = Inputs.select(maptypes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1869,"value":"Code for summarising the data and drawing the glyphs can be specified inline (as above) or can use predefined functions such as those in the [glyphmaps collection](https://observablehq.com/collection/@aidans/glyphmap-glyphs) which includes how to [roll your own glyphs](https://observablehq.com/d/9c4fed396ba5c19b).","pinned":false,"hidden":false,"mode":"md"},{"id":1888,"value":"## How to use\n\nUse the following import:\n\n`import {glyphMap} from \"@aidans/slippy-glyphmaps\"`\n\nThe `glyph` property lets you specify a set of functions that draw the glyphs. You can either create your own functions, supply them inline (as above) or use a predefined set of functions such as `heatmapGlyph()` specified in [GlyphType: HeatMap](https://observablehq.com/@aidans/glyphtype-heatmap?collection=@aidans/glyphmaps) as used in the example below which shows the current mean distribution of available bikes. ","pinned":false,"hidden":false,"mode":"md"},{"id":1895,"value":"// glyphMap({\n// data: data,\n// getLocationFn: (row) => [row.lon, row.lat],\n// cellSize: 3,\n// interactiveCellSize: true,\n// interactiveKernelBW: true,\n// kernelBW: 5,\n// useBlur: true,\n\n// width: 600,\n// height: 300,\n// tileWidth: 150,\n// greyscale: true,\n\n// glyph: heatmapGlyph({\n// valueFn: (row, global) => row.ts[row.ts.length - 1],\n// type: \"mean\",\n// colourScheme: d3.scaleSequential(d3.interpolatePurples),\n// colourAutoscale: true,\n// useTransparency: true,\n// showLegend: true,\n// numberFormatFn: (value) => +value.toFixed(3)\n// })\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1864,"value":"## Code\n\nThese are the functions that produce gridded glyphmaps that can be imported into other notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":1580,"value":"function heatmapPanel(options) {\n return glyphMap(options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1944,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1783,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1942,"value":"function _drawCellBackground(ctx, cell, colour, padding) {\n const boundary = cell.getBoundary(padding);\n ctx.fillStyle = colour;\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}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2013,"value":"maptypes = [\n \"StadiaStamenToner\",\n \"StadiaStamenTonerLite\",\n \"StadiaStamenWatercolor\",\n \"StadiaStamenOutdoor\",\n \"StadiaStamenTerrain\",\n \"StadiaAlidade\",\n \"StadiaAlidadeDark\",\n \"StadiaOSMBright\",\n \"CartoDark\",\n \"CartoPositron\",\n \"CartoPositronNoLabel\",\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":1948,"value":"## Code Documentation\n","pinned":false,"hidden":false,"mode":"md"},{"id":1950,"value":"$39","pinned":false,"hidden":false,"mode":"md"},{"id":1932,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1764,"value":"import { slippyMap } from \"8d39dcfbc8ad8557\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"import { data, everyBike } from \"05b119b94705f4bf\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"import { heatmapGlyph } from \"@aidans/glyphtype-heatmap\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}