32:T4f7,function makeInfectionAgeGlyphDrawFn(mode) { return (cell, x, y, cellSize, ctx, global, panel) => { if (cell && cell.pop) { for (let age = 0; age < cell.pop.length; age++) { let xPos = 0; const ageMax = d3.sum(cell.pop[age]); for (let susepCat = 0; susepCat < cell.pop[age].length; susepCat++) { if (mode == "RelativeAbsOpacity") ctx.globalAlpha = d3.sum(cell.pop.map((vs) => d3.sum(vs))) / global.maxPopCell; ctx.fillStyle = colors[susepCat]; const barW = mode == "Absolute" ? global.barWScale(cell.pop[age][susepCat]) : (cell.pop[age][susepCat] / ageMax) * (cellSize - 1); ctx.fillRect( x - cellSize / 2 + xPos, y + cellSize / 2 - age * global.barH, barW, global.barH ); xPos += barW; } } if (mode == "RelativeAbsSymbol") { const diameter = ((d3.sum(cell.pop.map((vs) => d3.sum(vs))) / global.maxPopCell) * cellSize) / 2; ctx.strokeStyle = "#00f"; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(x, y, diameter, 0, 2 * Math.PI); ctx.stroke(); } } }; }33:T564,function makeInfectionTimeseriesGlyphDrawFn(mode) { return (cell, x, y, cellSize, ctx, global, panel) => { if (cell && cell.pop) { for (let day = 0; day < cell.pop.length; day++) { const dayMax = d3.sum(cell.pop[day]); //should be the same for all days let yPos = 0; for (let susepCat = 0; susepCat < cell.pop[day].length; susepCat++) { if (mode == "RelativeAbsOpacity") ctx.globalAlpha = d3.sum(cell.pop[day]) / global.maxPopCell; ctx.fillStyle = colors[susepCat]; const barH = mode == "Absolute" ? global.barHScale(cell.pop[day][susepCat]) : (cell.pop[day][susepCat] / dayMax) * (cellSize - 1); if (!isNaN(barH)) { ctx.fillRect( Math.ceil(x - cellSize / 2 + day * global.barW), Math.ceil(y + cellSize / 2 - yPos), Math.ceil(global.barW), Math.ceil(-barH) ); yPos += barH; } } } if (mode == "RelativeAbsSymbol") { const diameter = ((d3.max(cell.pop.map((vs) => d3.sum(vs))) / global.maxPopCell) * cellSize) / 2; ctx.strokeStyle = "#00f"; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(x, y, diameter, 0, 2 * Math.PI); ctx.stroke(); } } }; }34:T5bd,function makeComparisonGlyphDrawFn(mode) { return (cell, x, y, cellSize, ctx, global, panel) => { if (cell && cell.pop) { for (let day = 0; day < cell.pop.length; day++) { let yPositivePos = 0; let yNegativePos = 0; const ageMax = d3.sum(cell.pop[day]); for (let susepCat = 0; susepCat < cell.pop[day].length; susepCat++) { if (mode == "RelativeAbsOpacity") ctx.globalAlpha = d3.sum(cell.pop.map((vs) => d3.sum(vs))) / global.maxPopCell; ctx.fillStyle = colors[susepCat]; const barH = global.barHScale(cell.pop[day][susepCat]); if (barH > 0) { ctx.fillRect( x - cellSize / 2 + day * global.barW, y + yPositivePos, global.barW, barH ); yPositivePos += barH; } else { ctx.fillRect( x - cellSize / 2 + day * global.barW, y + yNegativePos, global.barW, barH ); yNegativePos += barH; } } } if (mode == "RelativeAbsSymbol") { const diameter = ((d3.sum(cell.pop.map((vs) => d3.sum(vs))) / global.maxPopCell) * cellSize) / 2; ctx.strokeStyle = "#00f"; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(x, y, diameter, 0, 2 * Math.PI); ctx.stroke(); } } }; }35:[{"id":"c553e035941e88f073203c6ef526779d18bf8ed8dae1b8eabbddcad3c2d9ee9c90475aa60dd6dc88125ffa34ce736b96bcec3229c90d1d8e6bebfb60d3210e13","href":"https://static.observableusercontent.com/files/c553e035941e88f073203c6ef526779d18bf8ed8dae1b8eabbddcad3c2d9ee9c90475aa60dd6dc88125ffa34ce736b96bcec3229c90d1d8e6bebfb60d3210e13","name":"model@1.json.zip","type":"application/zip","lastModified":1690903350842.246,"size":3132561},{"id":"b1607505db289ca58c8110d5715d16023ec94909f54e88d8237a5923ca339fb2c5f1292297749936aa6987dacbc09a3f80d655ab44f4ed389f74e351382cb855","href":"https://static.observableusercontent.com/files/b1607505db289ca58c8110d5715d16023ec94909f54e88d8237a5923ca339fb2c5f1292297749936aa6987dacbc09a3f80d655ab44f4ed389f74e351382cb855","name":"scotland_laulevel1_2011_wgs84.geojson","type":"application/geo+json","lastModified":1693342431492.235,"size":966433},{"id":"6e6a9fec7ce096a770cb5387500dfd43bbf1717510e785600c4a3e25174cdf9469833907937c622b66d42c3b58f98196bf4fe76ef8e725552311b5759637bd08","href":"https://static.observableusercontent.com/files/6e6a9fec7ce096a770cb5387500dfd43bbf1717510e785600c4a3e25174cdf9469833907937c622b66d42c3b58f98196bf4fe76ef8e725552311b5759637bd08","name":"gridmap-layout.csv","type":"text/csv","lastModified":1693343743184.098,"size":255}] 30:{"title":"Exploring spatiotemporal aspects of a Scottish COVID-19 model","cells":[{"id":0,"value":"# Exploring spatiotemporal aspects of a Scottish COVID-19 model\n\nThe notebooks in this [collection](https://observablehq.com/collection/@aidans/covid-19-modelling) accompany the VIS Short Paper:\n> **Slingsby, A., Reeve, R and Harris, C. 2023.** [Gridded Glyphmaps for Supporting Spatial COVID-19 Modelling](https://openaccess.city.ac.uk/id/eprint/31115/). _IEEE VIS Short Paper, Melbourne, Australia._\n\nThe work reported the paper was originally implemented in Java. This inspired me to produce a flexible JavaScript implementation of the [\"gridded glyphmap\" technique](https://observablehq.com/@aidans/slippy-glyphmaps?collection=@aidans/glyphmaps).\n\nThis page demonstrates three of the gridded glyphmap design from this paper for considering **output data**. Please note that the COVID-19 model used here never developed beyond very early changes so its outputs are illustrative only.","pinned":false,"hidden":false,"mode":"md"},{"id":890,"value":"regions = {\n const gridmap = d3.csvParseRows(\n await FileAttachment(\"gridmap-layout.csv\").text()\n );\n return (\n await FileAttachment(\"scotland_laulevel1_2011_wgs84.geojson\").json()\n ).features.map((row, i) => {\n return {\n name: row.properties.name,\n centroid: turf.centroid(row.geometry).geometry.coordinates,\n boundary: row.geometry.coordinates[0],\n colRow: [+gridmap[i][0], +gridmap[i][1]]\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"## Data\n\nThe input data data are in a **2km² gridded** structure, with **counts** of individuals in **10-year age groups** in **8 infection categories**, over **30 days**. **Two models runs** with slightly different parameters are provided. That's 12851 x 2 x 10 x 8 x 30 = **61,684,800 data points** specified in an efficient multidimensional array. All the code for drawing the gridded glyphmaps are provided in functions in this page.","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"data = {\n const regions = await FileAttachment(\n \"scotland_laulevel1_2011_wgs84.geojson\"\n ).json();\n const osgb = new OSGB();\n const data = await (await FileAttachment(\"model@1.json.zip\").zip())\n .file(\"model.json\")\n .json();\n return data.map((row) => {\n const [lon, lat] = osgb.toGeo([row.x, row.y]);\n let regionIdx = -1;\n for (let i = 0; i < regions.features.length; i++)\n if (turf.booleanWithin(turf.point([lon, lat]), regions.features[i])) {\n regionIdx = i;\n break;\n }\n\n return {\n lon,\n lat,\n pop: row.pop,\n regionIdx\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"Each record has a `pop` (population) property which is a 3D array, with `pop[modelRun][ageBand][infectionStatus]`.","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"## Infection by age group","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"These glyphs encodes the **modelled infection status** by **age** (young-old, bottom to top) and by **day** (using the slider below and through animation).\n\nThere are 2 models to choose from and **30 modelled days** and the day can be selected below. \"**Absolute**\" glyphs indicate number of individuals. \"**Relative**\" glyphs show proportion of infection within each age group. \"**RelativeAbsOpacity**\" further encodes absolute population counts as opacity, deemphasising cells with low population. \"**RelativeAbsSymbol**\" encoded population as proportion symbol diameter. You can also **zoom/pan the map** to explore different areas of Scotland at different scales.","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"viewof modelNumInfectionAgeGlyph = Inputs.radio([\"Model 1\", \"Model 2\"], {\n label: \"Model\",\n value: \"Model 1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"viewof infectionAgeGlyphMode = Inputs.radio(\n [\"Absolute\", \"Relative\", \"RelativeAbsOpacity\", , \"RelativeAbsSymbol\"],\n {\n label: \"Mode\",\n value: \"Relative\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"viewof infectionAgeGlyphOptions = Inputs.checkbox([\"Grid relative to mouse\"], {\n label: \"Options\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof day = Scrubber(\n Array.from({ length: data[0].pop[0].length }, (_, i) => i),\n {\n delay: 50,\n autoplay: false,\n initial: data[0].pop[0].length - 1,\n alternate: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"infectionAgeMap = slippyGlyphmaps.glyphMap({\n data: data,\n getLocationFn: (row) => [row.lon, row.lat],\n cellSize: 30,\n interactiveCellSize: true,\n interactiveZoomPan: true,\n initialBB: [-8, 55, -0.73, 56],\n\n width: 800,\n height: 300,\n tileWidth: 150,\n\n mapType: \"StamenTonerLite\",\n\n glyph: {\n preDrawFn: infectionPreDrawFn,\n postDrawFn: drawLegend\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"_These just wire the controls to the map. Since they reference the controls, they will run whenever the relevant control's value is changed. They update the relevant glyph function in the map. This is a bit more hassle than recreating map but has the huge advantage that it updates instantly and all other aspects (notably zoom/pan) are preserved._","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"{\n day || modelNumInfectionAgeGlyph;\n infectionAgeMap.setGlyph({\n aggrFn: makeInfectionAgeGlyphAggrFn(\n day,\n modelNumInfectionAgeGlyph == \"Model 1\" ? 0 : 1\n )\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"{\n infectionAgeGlyphMode;\n infectionAgeMap.setGlyph({\n drawFn: makeInfectionAgeGlyphDrawFn(infectionAgeGlyphMode)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"infectionAgeMap.setOptions({\n discretisationMode: infectionAgeGlyphOptions.includes(\n \"Grid relative to mouse\"\n )\n ? \"relativeToMouse\"\n : \"relativeToScreen\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"_Functions that specify the glyphs are below. Those that start with \"make\" are functions that take parameters that return the glyph function. This pattern enables customisation in the glyphs driven by external parameters._","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"function makeInfectionAgeGlyphAggrFn(day, modelNum) {\n return (cell, row, weight, global, panel) => {\n if (!cell.pop) {\n cell.pop = [];\n for (let age = 0; age < row.pop[modelNum][day].length; age++)\n cell.pop[age] = new Array(row.pop[modelNum][day][0].length);\n }\n for (let age = 0; age < row.pop[modelNum][day].length; age++) {\n for (\n let susepCat = 0;\n susepCat < row.pop[modelNum][day][age].length;\n susepCat++\n ) {\n cell.pop[age][susepCat]\n ? (cell.pop[age][susepCat] += row.pop[modelNum][day][age][susepCat])\n : (cell.pop[age][susepCat] = row.pop[modelNum][day][age][susepCat]);\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"function infectionPreDrawFn(cells, cellSize, ctx, global, panel) {\n global.maxPopCell = d3.max(\n cells.map((cell) => d3.sum(cell.pop.map((vs) => d3.sum(vs))))\n );\n global.maxPopForAnyAge = d3.max(\n cells.map((cell) => d3.max(cell.pop.map((vs) => d3.sum(vs))))\n );\n global.barH = (cellSize - 1) / d3.max(cells.map((cell) => cell.pop.length));\n global.barWScale = d3\n .scaleLinear()\n .domain([0, global.maxPopForAnyAge])\n .range([0, cellSize]);\n ctx.fillStyle = \"#fffa\";\n ctx.fillRect(0, 0, width, width);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"Creates a function that draws the infection glyphs in a particular mode.","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"## Infection timeseries\n\nThese glyphs **aggregate the data by age** but encode the whole (30 day) timeseries (left to right).","pinned":false,"hidden":false,"mode":"md"},{"id":390,"value":"dataAggrAge = data.map((row) => {\n const pop = [];\n for (let m = 0; m < row.pop.length; m++) {\n pop[m] = [];\n for (let d = 0; d < row.pop[m].length; d++) {\n pop[m][d] = [];\n for (let s = 0; s < row.pop[m][d][0].length; s++) {\n pop[m][d][s];\n }\n }\n }\n for (let m = 0; m < row.pop.length; m++)\n for (let d = 0; d < row.pop[m].length; d++)\n for (let a = 0; a < row.pop[m][d].length; a++)\n for (let s = 0; s < row.pop[m][d][a].length; s++)\n pop[m][d][s]\n ? (pop[m][d][s] += row.pop[m][d][a][s])\n : (pop[m][d][s] = row.pop[m][d][a][s]);\n return { ...row, pop };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"There are 2 models to choose from and **30 modelled days** and the day can be selected below. \"**Absolute**\" glyphs indicate number of individuals. \"**Relative**\" glyphs show proportion of infection within each age group. \"**RelativeAbsOpacity**\" further encodes absolute population counts as opacity, deemphasising cells with low population. \"**RelativeAbsSymbol**\" encoded population as proportion symbol diameter. You can also **zoom/pan the map** to explore different areas of Scotland at different scales.","pinned":false,"hidden":false,"mode":"md"},{"id":554,"value":"viewof modelNumInfectionTimeseriesGlyph = Inputs.radio([\"Model 1\", \"Model 2\"], {\n label: \"Model\",\n value: \"Model 1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"viewof infectionTimeseriesGlyphMode = Inputs.radio(\n [\"Absolute\", \"Relative\", \"RelativeAbsOpacity\", , \"RelativeAbsSymbol\"],\n {\n label: \"Mode\",\n value: \"Relative\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"viewof infectionTimeseriesOptions = Inputs.checkbox(\n [\"Show time tick-lines on mouseover\", \"Grid relative to mouse\"],\n {\n label: \"Options\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"timeseriesMap = slippyGlyphmaps.glyphMap({\n data: dataAggrAge,\n getLocationFn: (row) => [row.lon, row.lat],\n cellSize: 30,\n interactiveCellSize: true,\n interactiveZoomPan: true,\n initialBB: [-8, 55, -0.73, 56],\n //discretisationMode: \"relativeToMouse\",\n\n width: 800,\n height: 300,\n tileWidth: 150,\n\n mapType: \"StamenTonerLite\",\n\n glyph: {\n preDrawFn: infectionTimeseriesGlyphPreDrawFn,\n\n tooltipTextFn: (cell, global) => \"Day \" + global.mouseDay\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"_These just wire the controls to the map. Since they reference the controls, they will run whenever the relevant control's value is changed. They update the relevant glyph function in the map. This is a bit more hassle than recreating map but has the huge advantage that it updates instantly and all other aspects (notably zoom/pan) are preserved._","pinned":false,"hidden":false,"mode":"md"},{"id":532,"value":"{\n modelNumInfectionTimeseriesGlyph;\n timeseriesMap.setGlyph({\n aggrFn: makeInfectionTimeseriesGlyphAggrFn(\n modelNumInfectionTimeseriesGlyph == \"Model 1\" ? 0 : 1\n )\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"{\n infectionTimeseriesGlyphMode;\n timeseriesMap.setGlyph({\n drawFn: makeInfectionTimeseriesGlyphDrawFn(infectionTimeseriesGlyphMode)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"{\n // //discretisationMode: \"relativeToMouse\",\n timeseriesMap.setGlyph({\n postDrawFn: (grid, cellSize, ctx, global, panel) => {\n if (\n infectionTimeseriesOptions.includes(\"Show time tick-lines on mouseover\")\n )\n drawMouseDayLines(grid, global, ctx);\n drawLegend(grid, cellSize, ctx, global, panel);\n }\n });\n timeseriesMap.setOptions({\n discretisationMode: infectionTimeseriesOptions.includes(\n \"Grid relative to mouse\"\n )\n ? \"relativeToMouse\"\n : \"relativeToScreen\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"_Functions that specify the glyphs are below. Those that start with \"make\" are functions that take parameters that return the glyph function. This pattern enables customisation in the glyphs driven by external parameters._","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"function makeInfectionTimeseriesGlyphAggrFn(modelNum) {\n return (cell, row, weight, global, panel) => {\n if (!cell.pop) {\n cell.pop = [];\n for (let day = 0; day < row.pop[modelNum].length; day++)\n cell.pop[day] = new Array(row.pop[modelNum][day].length);\n }\n for (let day = 0; day < row.pop[modelNum].length; day++) {\n for (\n let susepCat = 0;\n susepCat < row.pop[modelNum][day].length;\n susepCat++\n ) {\n cell.pop[day][susepCat]\n ? (cell.pop[day][susepCat] += row.pop[modelNum][day][susepCat])\n : (cell.pop[day][susepCat] = row.pop[modelNum][day][susepCat]);\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"function infectionTimeseriesGlyphPreDrawFn(\n cells,\n cellSize,\n ctx,\n global,\n panel\n) {\n global.maxPopCell = d3.max(cells.map((cell) => d3.sum(cell.pop[0])));\n global.barW = (cellSize - 2) / d3.max(cells.map((cell) => cell.pop.length));\n global.barHScale = d3\n .scaleLinear()\n .domain([0, global.maxPopCell])\n .range([0, cellSize - 1]);\n //draw white semi-opaque background\n ctx.fillStyle = \"#fffa\";\n ctx.fillRect(0, 0, width, width);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"## Comparison\n\nThese glyphs encode the timeseries of absolute difference in infection status between the two models. Data above a cell's horizontal centre cell centre is where model 1 is higher; data below a cell's horizontal centre cell centre is where model 2 is higher.","pinned":false,"hidden":false,"mode":"md"},{"id":822,"value":"viewof comparisonOptions = Inputs.checkbox(\n [\"Show time tick-lines on mouseover\", \"Grid relative to mouse\"],\n {\n label: \"Options\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"comparisonMap = slippyGlyphmaps.glyphMap({\n data: dataAggrAge,\n getLocationFn: (row) => [row.lon, row.lat],\n cellSize: 50,\n interactiveCellSize: true,\n interactiveZoomPan: true,\n initialBB: [-8, 55, -0.73, 56],\n //discretisationMode: \"relativeToMouse\",\n\n width: 800,\n height: 300,\n tileWidth: 150,\n\n mapType: \"StamenTonerLite\",\n\n glyph: {\n aggrFn: comparisonGlpyhAggrFn,\n preDrawFn: comparisonGlyphPreDrawFn,\n drawFn: makeComparisonGlyphDrawFn(\"Absolute\"),\n postDrawFn: drawLegend\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"_These just wire the controls to the map. Since they reference the controls, they will run whenever the relevant control's value is changed. They update the relevant glyph function in the map. This is a bit more hassle than recreating map but has the huge advantage that it updates instantly and all other aspects (notably zoom/pan) are preserved._","pinned":false,"hidden":false,"mode":"md"},{"id":810,"value":"{\n comparisonMap.setGlyph({\n postDrawFn: (grid, cellSize, ctx, global, panel) => {\n if (comparisonOptions[0]) drawMouseDayLines(grid, global, ctx);\n drawLegend(grid, cellSize, ctx, global, panel);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"comparisonMap.setOptions({\n discretisationMode: comparisonOptions.includes(\"Grid relative to mouse\")\n ? \"relativeToMouse\"\n : \"relativeToScreen\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"_Functions that specify the glyphs are below. Those that start with \"make\" are functions that take parameters that return the glyph function. This pattern enables customisation in the glyphs driven by external parameters._","pinned":false,"hidden":false,"mode":"md"},{"id":582,"value":"function comparisonGlpyhAggrFn(cell, row, weight, global, panel) {\n if (!cell.pop) {\n cell.pop = [];\n for (let day = 0; day < row.pop[0].length; day++)\n cell.pop[day] = new Array(row.pop[0][day].length);\n }\n for (let day = 0; day < row.pop[0].length; day++) {\n for (let susepCat = 0; susepCat < row.pop[0][day].length; susepCat++) {\n if (day == 0)\n //just do for first day\n cell.totalPop\n ? (cell.totalPop += row.pop[0][day][susepCat])\n : (cell.totalPop = row.pop[0][day][susepCat]);\n cell.pop[day][susepCat]\n ? (cell.pop[day][susepCat] +=\n row.pop[0][day][susepCat] - row.pop[1][day][susepCat])\n : (cell.pop[day][susepCat] =\n row.pop[0][day][susepCat] - row.pop[1][day][susepCat]);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"function comparisonGlyphPreDrawFn(cells, cellSize, ctx, global, panel) {\n global.maxPopCell = d3.max(cells, (cell) => cell.totalPop);\n const maxPositiveDiff = d3.max(cells, (cell) =>\n d3.max(cell.pop, (ts) => d3.sum(ts.filter((v) => v > 0)))\n );\n const maxNegativeDiff = d3.max(cells, (cell) =>\n d3.max(cell.pop, (ts) => Math.abs(d3.sum(ts.filter((v) => v < 0))))\n );\n global.maxAbsDiff = Math.max(maxPositiveDiff, maxNegativeDiff);\n global.barW = (cellSize - 2) / d3.max(cells.map((cell) => cell.pop.length));\n global.barHScale = d3\n .scaleLinear()\n .domain([0, global.maxAbsDiff])\n .range([0, cellSize / 2 - 1]);\n //draw white semi-opaque background\n ctx.fillStyle = \"#fffa\";\n ctx.fillRect(0, 0, width, width);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":501,"value":"statuses = [\n \"Susceptible\",\n \"Exposed\",\n \"Asymptomatic\",\n \"Presymptomatic\",\n \"Symptomatic\",\n \"Hospitalised\",\n \"Recovered\",\n \"Dead\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"colors = d3.schemeSet3","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"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 statuses.map((item) => ctx.measureText(item).width)\n );\n\n const x = panel.getWidth() - maxTextWidth - 20;\n let y = panel.getHeight() - statuses.length * 15;\n\n ctx.fillStyle = \"#fff8\";\n ctx.fillRect(x, y, maxTextWidth + 15, statuses.length * 15);\n\n for (let i = 0; i < statuses.length; i++) {\n ctx.fillStyle = colors[i];\n ctx.fillRect(x, y, 10, 10);\n ctx.fillStyle = \"#333\";\n ctx.fillText(statuses[i], x + 15, y + 5);\n y += 15;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"function drawMouseDayLines(grid, global, ctx) {\n if (global.mouseCell) {\n global.mouseDay = Math.round(\n ((global.mouseX -\n (global.mouseCell.getXCentre() - global.mouseCell.getCellSize() / 2)) /\n global.mouseCell.getCellSize()) *\n global.mouseCell.pop.length\n );\n const xOff =\n global.mouseX -\n (global.mouseCell.getXCentre() - global.mouseCell.getCellSize() / 2);\n for (const cell of grid) {\n ctx.strokeStyle = \"#0004\";\n ctx.lineWidth = \"0.5\";\n ctx.beginPath();\n ctx.moveTo(\n cell.getXCentre() - cell.getCellSize() / 2 + xOff,\n cell.getYCentre() - cell.getCellSize() / 2 + 1\n );\n ctx.lineTo(\n cell.getXCentre() - cell.getCellSize() / 2 + xOff,\n cell.getYCentre() + cell.getCellSize() / 2 - 1\n );\n ctx.stroke();\n }\n\n ctx.font = \"30px sans-serif\";\n ctx.textAlign = \"left\";\n ctx.textBaseline = \"top\";\n ctx.fillStyle = \"#666\";\n ctx.fillText(\"Day \" + global.mouseDay, 0, 0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"//import { glyphMap } from \"@aidans/slippy-glyphmaps\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { OSGB } from \"@jwolondon/projection\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":893,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":952,"value":"slippyGlyphmaps = import(\n \"https://cdn.jsdelivr.net/gh/aidans/slippy-glyphmaps@v0.1/dist/index.min.js\"\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}