2d:null 2e:["$","title",null,{"children":"Heatmap for polygons | Olivia Vane | Observable"}] 33:T484,md`## The Problem You are working with a dataset of 48,000 polygons representing map sheets created by the Ordnance Survey (OS), Britain’s national mapping agency. The data (created by the National Library of Scotland) is for historical map sheets created over the course of more than a hundred years. Some polygons are direct overlaps, some are offset. Where are the locations with the greatest number of sheets through time? Or, to put it another way, where do the polygons most overlap? Generalised, the same problem could apply to polygons data describing other things – for example where we find particular animal species, or pathogens. In this notebook I describe how to make a heatmap showing where there are most overlaps. This approach uses WebGL shaders via the [PIXI.js](https://www.pixijs.com/) library. ## Background A straightforward method is plot everything, giving the polygons some transparency and look for the darkest areas. This works fairly well, but it can be quite difficult with the naked eye to distinguish between small changes in opacity. The dark colour all looks pretty similar where there are lots of overlaps. `34:T1816,md`Ideally we’d adjust the colours (or, more particularly, the *hues*) to make these differences easier to see. This is the idea behind a heat map: hue represents value. We’ve all seen these before, either for points data (see top)—the blurry, nebulous effect where the ‘hot’ areas have the highest density of points— or for defined regions (see bottom), known as a choropleth. ![heat map for points data](${image1}) ^{From: http://gisconletras.blogspot.com/2017/10/testing-big-spatial-data-software.html} ![choropleth](${image2}) ^{From: https://academy.datawrapper.de/article/117-color-palette-for-your-map} Can we do this for polygon overlaps? Our case is like the second example, except we don’t have the ‘correct’ polygons yet. To make a map like example two we would need to transform our dataset into a new set of polygons representing the areas of union (overlap) and get the overlap count for each of these. We could use a GIS (Geographic Information System) method to transform the original dataset. See: https://pro.arcgis.com/en/pro-app/tool-reference/analysis/count-overlapping-features.htm and https://www.esri.com/arcgis-blog/products/arcgis-desktop/analytics/more-adventures-in-overlay-counting-overlapping-polygons-with-spaghetti-and-meatballs/. But this seems heavy-handed here, especially if we’re more interested in creating a visual than getting a list back of, eg., the top ten locations with the greatest overlaps. (This is especially the case with this data because some of the overlaps in our dataset are ‘false’. There appears to be lots of overlap at county boundaries. This is actually just an artefact of the Ordnance Survey creating discrete sets of map sheets for individual counties in the past. [This sheet](https://maps.nls.uk/view/102343760) is an example; the blank section at the top is not the sea, that’s just the next county over. Having a visual that we can judge with this in mind is, therefore, very useful. This is good illustration of why visualisation is very helpful working with humanities data; we often deal with these kinds of complications which are simpler to handle using human interpretation, rather than attempting to code something into a computer program to take this into account.) ## Colourising alpha with shaders As an alternative approach, I took inspiration from how Mapbox create what they call a [‘poor-man’s heatmap’](https://blog.mapbox.com/create-heatmaps-using-new-colorize-alpha-image-filter-2490fa5277b3) by “colorizing-alpha” (alpha meaning transparency). It’s a simple idea. If you draw all the polygons semi-transparently on top of each other, the resulting opacity at any point is the measure of overlaps. Even if *you* can’t distinguish this very well with your eyes, *your computer can*. If you access the pixel values of this raster image computationally, you can simply re-colour the image—without having to do any GIS processing—by applying a colour scale to the opacity at any point. The Mapbox implementation is for points data, but it’s straightforward to adapt the technique to polygons. How can we access the raster pixel values? I was already working in a web environment, drawing the polygons using WebGL (high-performance interactive graphics with GPU acceleration for web browsers) via the [PIXI.js](https://www.pixijs.com/) library to get better performance for this volume of data. If you’re working in WebGL, you can use a fragment shader: shaders are programs that run on every single pixel of your visual in parallel on the GPU (so they’re really fast - enjoy [this video](https://www.youtube.com/watch?v=-P28LKWTzrI&feature=emb_logo&ab_channel=NVIDIA) using paint balls to make pictures to illustrate what’s going on). There are two shader types: fragment shaders and vertex shaders. We’re only interested in fragment shaders here; they access and change the colour of pixels– ideal for this task. I was initially reluctant to try shaders as they are written in C-like code language I hadn’t used before: GLSL. But it was such a simple operation I decided to give it a go and, in the end, it wasn’t too painful! I’ve included which resources I found most helpful getting started below. If, instead, you were working in Python, after creating an initial raster image, you could use an image manipulation library like [Pillow](https://pillow.readthedocs.io/en/stable/) to do the same thing. [PIXI.js](https://www.pixijs.com/) is a lightweight library for creating WebGL graphics in JavaScript. In PIXI, shaders are called filters. There are some [pre-existing filters](https://github.com/pixijs/pixi-filters) available, but you can also write your own which is what I did. I found these resources the most helpful: - https://www.awwwards.com/a-gentle-introduction-to-shaders-with-pixi-js.html covered almost everything I needed. Also points to this https://www.shaderific.com/glsl/ reference site for GLSL. - [The Book of Shaders](https://thebookofshaders.com/) a work-in-progress resource, but still helpful The shader is a standalone program in GLSL running on the GPU. How do we pass in the heatmap colour scale we want to apply? Poking around in the Mapbox GL shader code they solve this elegantly by creating a texture (a WebGL-ready image) of the colour scale itself, running horizontally, and pass that (as a [‘uniform’](https://thebookofshaders.com/03/)) to the shader. To map between a given alpha value and the hue to replace it with, you sample hues along the texture. If the alpha value, for example, is 0.5, the hue this corresponds to is whatever hue is 50% along the colour-scale texture. ![image3](${image3}) You can judge for yourself the success of this method by comparing the results (top notebook cell). I’ve used [d3.interpolateYlGnBu](https://github.com/d3/d3-scale-chromatic#interpolateYlGnBu) as the colour scale, but you can use whatever you want. The middle example shows the option of applying the [‘multiply’ blendmode](https://pixijs.download/dev/docs/PIXI.Graphics.html#blendMode) which also makes it easier to judge the overlaps. `35:T4c3,fragment_shader = ` precision mediump float; // set precision the GPU uses when calculating floats varying vec2 vTextureCoord; // The coordinates of the current pixel uniform sampler2D uSampler; // The full image uniform sampler2D u_color_ramp; // The colour scale void main(void) { // The texture2D function returns a texel, i.e. the (colour) value of the texture for the given coordinates. The function has one input parameter of the type sampler2D and one input parameter of the type vec2 : sampler, the uniform the texture is bound to, and coord, the 2-dimensional coordinates of the texel to look up. gl_FragColor = texture2D(uSampler, vTextureCoord); // get colour of current pixel float pixel_opacity = gl_FragColor.a; // get opacity of current pixel // Check if opacity is 0 if (pixel_opacity == 0.0) { vec4 color = vec4(0.0,0.0,0.0,0.0); // return 0% opacity - completely transparent } else { // set new colour by getting the colour value at that (opacity) position along the colour scale vec4 color = texture2D(u_color_ramp, vec2(pixel_opacity, 0.5)); gl_FragColor = color; // assign the new colour gl_FragColor.a = 1.0; // assign new opacity 100% } }`36:Tea4,map = { var map = new PIXI.Container(); // Create containers for 3 maps https://pixijs.download/dev/docs/PIXI.Container.html var map_container1 = new PIXI.Container(); var map_container2 = new PIXI.Container(); var map_container3 = new PIXI.Container(); map_container2.position.x = map_width; //offset map_container3.position.x = map_width * 2; //offset // Set up interactive areas for tooltip map_container1.interactive = true; map_container1.hitArea = new PIXI.Rectangle(0, 0, map_width, map_height); map_container2.interactive = true; map_container2.hitArea = new PIXI.Rectangle(0, 0, map_width, map_height); map_container3.interactive = true; map_container3.hitArea = new PIXI.Rectangle(0, 0, map_width, map_height); //////////////// // Draw paths // //////////////// var graphics = new PIXI.Graphics(); var graphics2 = new PIXI.Graphics(); var graphics3 = new PIXI.Graphics(); let path1 = d3.geoPath(projection, graphics); let path2 = d3.geoPath(projection, graphics2); let path3 = d3.geoPath(projection, graphics3); graphics.beginFill(0x66CCFF, 0.15); path1(data); graphics.endFill(); graphics2.beginFill(0x66CCFF, 0.15); path2(data); graphics2.endFill(); graphics2.blendMode = PIXI.BLEND_MODES.MULTIPLY; // apply multiply blendmode to map 2 graphics3.beginFill(0x66CCFF, 0.15); path3(data); graphics3.endFill(); //////////// // Shader // //////////// // Create a texture for the colour scale (from canvas image 'color_ramp') // A texture stores the information that represents an image let color_ramp_texture = PIXI.Texture.fromCanvas(color_ramp); // Assign the uniforms data to pass to the shader const uniformsData = { u_color_ramp: { type: 'sampler2D', value: color_ramp_texture } }; let shader = new PIXI.Filter('', fragment_shader, uniformsData); map_container1.filters = [shader]; // apply the shader map.addChild(map_container1); map_container1.addChild(graphics); map.addChild(map_container2); map_container2.addChild(graphics2); map.addChild(map_container3); map_container3.addChild(graphics3); ///////////// // TOOLTIP // ///////////// var mouseIn_1 = false, mouseIn_2 = false, mouseIn_3 = false; map_container1.on('mouseover', () => (mouseIn_1 = true)); map_container1.on('mouseout', () => (mouseIn_1 = false)); map_container1.on('mousemove', onHover1); map_container2.on('mouseover', () => (mouseIn_2 = true)); map_container2.on('mouseout', () => (mouseIn_2 = false)); map_container2.on('mousemove', onHover2); map_container3.on('mouseover', () => (mouseIn_3 = true)); map_container3.on('mouseout', () => (mouseIn_3 = false)); map_container3.on('mousemove', onHover3); function onHover1(event) { if (mouseIn_1) getOverlaps(event); } function onHover2(event) { if (mouseIn_2) getOverlaps(event, map_width); } function onHover3(event) { if (mouseIn_3) getOverlaps(event, map_width * 2); } function getOverlaps(event, offset = 0) { let hoverx = event.data.global.x, hovery = event.data.global.y; // get hoverx and hovery relative to the PIXI container zoom let hoverx_relative = (hoverx - map.position.x) / map.scale.x - offset, hovery_relative = (hovery - map.position.y) / map.scale.y; // map from x y back to lat lng let [hover_lng, hover_lat] = projection.invert([ hoverx_relative, hovery_relative ]); // use polygon lookup https://github.com/pelias/polygon-lookup to get the point-in-polygon intersections let hover_data = lookup.search(hover_lng, hover_lat, -1); // number of overlaps mutable clickedSheet = hover_data.features.length; } return map; }37:T873,md`## License Licensed under the 3-Clause BSD license. Open cell to read license code. `38:[{"id":"c02a307a3f00f4cad0d070a1098e0ff38eedcb5d5047b9ecbe656b675bfe4702025953874b103b912b37b7f8b7c8d627b620878ccb0a041e7ca3cd44cc9fe112","href":"https://static.observableusercontent.com/files/c02a307a3f00f4cad0d070a1098e0ff38eedcb5d5047b9ecbe656b675bfe4702025953874b103b912b37b7f8b7c8d627b620878ccb0a041e7ca3cd44cc9fe112","name":"Picture 2.png","type":"image/png","lastModified":1605019912600.167,"size":164712},{"id":"79b8838b06bc096af97ed80e08fbc95e1eecdd921aa956ed8991b443e8575cda8c8cc648774e38973e968c2a5c0bdd737e4a0b883f0309be9af178bbbd5c65e9","href":"https://static.observableusercontent.com/files/79b8838b06bc096af97ed80e08fbc95e1eecdd921aa956ed8991b443e8575cda8c8cc648774e38973e968c2a5c0bdd737e4a0b883f0309be9af178bbbd5c65e9","name":"Picture 1.png","type":"image/png","lastModified":1605019909155.315,"size":285970},{"id":"63f9e762a3fe928a58ef2a00bec01b2c8ab2e5bcc4b53be7b98ba33d2c5716d0bed38f9e0b31186b5fb1ce71248bd548e6a3514587f51eac1e813d1c16dc965a","href":"https://static.observableusercontent.com/files/63f9e762a3fe928a58ef2a00bec01b2c8ab2e5bcc4b53be7b98ba33d2c5716d0bed38f9e0b31186b5fb1ce71248bd548e6a3514587f51eac1e813d1c16dc965a","name":"data.json","type":"application/json","lastModified":1602774527252.247,"size":13185926},{"id":"0111fce7960346bbb0402a11399cac49c1bcb23f75f23254e19620fc7754e1cf4ecd805007ac8d48d90b26badd763f26b41333a2d06db961d0db1c380d98cac0","href":"https://static.observableusercontent.com/files/0111fce7960346bbb0402a11399cac49c1bcb23f75f23254e19620fc7754e1cf4ecd805007ac8d48d90b26badd763f26b41333a2d06db961d0db1c380d98cac0","name":"polygon-lookup@1.js","type":"application/javascript","lastModified":1606502124409.93,"size":80831},{"id":"d6f8628a56cfbf65b395fa33053269caadc2f19d87ed2b060cf95313eec50ea45751d475d53a01f7f89a75ac768887b58a96c9adf19a38e2b1f684e552dfac80","href":"https://static.observableusercontent.com/files/d6f8628a56cfbf65b395fa33053269caadc2f19d87ed2b060cf95313eec50ea45751d475d53a01f7f89a75ac768887b58a96c9adf19a38e2b1f684e552dfac80","name":"heatmap_texture_small@1.jpg","type":"image/jpeg","lastModified":1605097903986.589,"size":106026}] 31:{"id":"3cce1478e7b36c11","slug":"heatmap-for-polygons","title":"Heatmap for polygons","thumbnail":"5b9f98adcb8c8811a489fb1b35fbf1744308181387a7686e90bb7447066e8e45","access_level":"public","create_time":"$D2020-09-07T12:01:12.783Z","update_time":"$D2021-09-13T16:46:08.990Z","view_time":null,"first_public_time":"$D2020-11-30T12:46:51.673Z","has_unpublished_edits":null,"fork":true,"stars":18,"starred":false,"owner":{"type":"team","id":"51a17a9a0cd3fee1","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":"starter_2024"},"version":2478,"publish_version":2478,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac5315ae69e3a5e3","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":null}],"members":[{"type":"individual","id":"ac5315ae69e3a5e3","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Heatmap for polygons","cells":[{"id":0,"value":"md`# Heatmap for polygons\n## Visualise overlaps in a large polygon dataset: colourise-alpha using WebGL shaders + PIXI.js\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"md`*The data used in this notebook is provided by the National Library of Scotland. The data is available for re-use under the [Creative Commons Attribution Non-Commercial Share Alike 4.0 (CC BY-NC-SA 4.0) licence](https://creativecommons.org/licenses/by-nc-sa/4.0/). For more information visit https://maps.nls.uk/copyright.html.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof app = {\n var dom = html`

`;\n var app = new PIXI.Application(width, 700, {\n transparent: true,\n antialias: true,\n resolution: 1\n });\n\n var info_box = html``;\n\n dom.appendChild(info_box);\n dom.appendChild(mutable svg);\n dom.appendChild(app.view);\n\n dom.value = app;\n\n yield dom;\n\n invalidation.then(() => {\n app.destroy();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"// https://github.com/d3/d3-scale-chromatic\ncolor_ramp = ramp(d3.interpolateYlGnBu)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"caption = md`^{**Left**: heat map. **Middle**: 'Multiply blendmode'. **Right**: semi-transparent polygons — 47,742 polygons representing map sheets created by the Ordnance Survey 1840s-1960s. Data courtesy of National Library of Scotland.}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1982,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2008,"value":"{\n const context = DOM.context2d(map_width, map_height);\n const path = d3.geoPath(projection, context);\n\n data.features.forEach(function(d, i) {\n context.beginPath();\n path(d);\n context.fillStyle = \"rgba(71,201,251,0.15)\";\n context.fill();\n });\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2026,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1712,"value":"md`## Shader`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1835,"value":"md`Shader code based on https://github.com/mapbox/mapbox-gl-js/blob/main/src/shaders/heatmap_texture.fragment.glsl.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`## PIXI Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"mutable stage = {\n var stage = (app.stage = new PIXI.Container());\n invalidation.then(() => {\n stage.destroy();\n });\n\n stage.addChild(map);\n stage.interactive = true;\n var centerOffsetX = width / 2 - map.width / 2;\n var centerOffsetY = 20;\n map.position.x = centerOffsetX;\n map.position.y = centerOffsetY;\n\n ////////////\n /// ZOOM ///\n ////////////\n\n var zoom = d3\n .zoom()\n .scaleExtent([1, 30])\n .on('start', function() {\n mutable zooming = true;\n })\n .on('zoom', function() {\n var e = d3.event.transform;\n map.scale.x = map.scale.y = e.k;\n map.position.x = e.x + centerOffsetX * e.k;\n map.position.y = e.y + centerOffsetY * e.k;\n })\n .on('end', function() {\n mutable zooming = false;\n });\n d3.select(app.view).call(zoom);\n\n return stage;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"md`### Learning PIXI.js resources\n- A good guide to getting started with PIXI (written for a games design audience, but still helpful for dataviz work): https://github.com/kittykatattack/learningPixi \n- Various basic PIXI examples (in version 4 and 5): https://pixijs.io/examples-v4/#/demos-basic/container.js \n- More data-viz-geared PIXI implementations on Observable!: https://observablehq.com/search?query=PIXI\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"projection = d3.geoMercator().fitWidth(map_width, data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"map_width = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"map_height = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"md`## Tooltip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"mutable clickedSheet = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"mutable zooming = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"{\n // Don't display tooltip if zooming or panning\n if (zooming) {\n tooltip.style('display', 'none');\n } else {\n tooltip.style('display', 'block');\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"// code from import { callout } from \"@d3/line-chart-with-tooltip\"\ncallout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n // .style(\"display\", null)\n\n tooltip.style('display', 'block');\n g.style(\"pointer-events\", \"none\").style(\"font\", \"12px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"lightgray\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .text(value)\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", 0)\n .style(\"font\", \"12px sans-serif\");\n\n d3.selectAll('tspan')\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .style(\"font-style\", (_, i) => (i == 1 ? \"italic\" : null));\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\n \"d\",\n `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"tooltip = {\n app; // add tooltip again if app refreshes\n let tooltip = d3.select('#tooltip');\n return tooltip;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"{\n d3.select('#app_wrapper').on('mousemove', function() {\n if (clickedSheet > 0) {\n tooltip.call(callout, \"Number of overlaps: \" + clickedSheet.toString());\n tooltip.attr(\n \"transform\",\n `translate(${d3.mouse(this)[0]},${d3.mouse(this)[1]})`\n );\n } else {\n tooltip.call(callout, null);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"// Create SVG element for tooltip\nmutable svg = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"md`This geojson data represents the map sheets created by the Ordnance Survey mapping Britain from 1840s-1960s at the scale of six inches to the mile. See the dataset on the National Library of Scotland's website [here](https://maps.nls.uk/geo/find/#zoom=5.489999999999999&lat=55.69640&lon=-5.37670&layers=102&b=1&z=1&point=0,0) and read more about the six inch to the mile series [here](https://maps.nls.uk/os/)\n\n*The data is provided by the National Library of Scotland. It is available for re-use under the [Creative Commons Attribution Non-Commercial Share Alike 4.0 (CC BY-NC-SA 4.0) licence](https://creativecommons.org/licenses/by-nc-sa/4.0/). For more information visit https://maps.nls.uk/copyright.html.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"data = FileAttachment('data.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"md`The hover tooltip is powered by a spatial index https://github.com/pelias/polygon-lookup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"lookup = new PolygonLookup(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"import { ramp } from '@mbostock/color-ramp'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"// version 4\n// Not using version 5, because there is an unresolved issue with drawing the Graphics object https://stackoverflow.com/questions/64552359/pixi-graphics-drawing-many-geojson-polygons-strange-lines-appearing-when-updat - any help with this very welcome!\n\nPIXI = require(\"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.8/pixi.min.js\").catch(\n () => window.PIXI\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2273,"value":"// I've added polygon-lookup as a browserified https://github.com/browserify/browserify file attachment so that it's reliably included.\n// For quick development, you can include polygon-lookup by adding these 2 cells to a notebook instead:\n\n// browserify = dep =>\n// require('https://funfunbrowserify.herokuapp.com/standalone/' + dep) // browserify-as-a-service\n\n// PolygonLookup = browserify('polygon-lookup@2.3.1')\n\nPolygonLookup = {\n let polygon_lookup = await FileAttachment('polygon-lookup@1.js').url();\n var PolygonLookup = (window.PolygonLookup = await require(polygon_lookup).catch(\n () => window.PolygonLookup\n ));\n return PolygonLookup;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2127,"value":"image3 = FileAttachment('heatmap_texture_small@1.jpg').url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2040,"value":"image2 = FileAttachment('Picture 2.png').url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2032,"value":"image1 = FileAttachment('Picture 1.png').url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2249,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2470,"value":"pageAnalytics = {\n const id = 'G-9R65C4PJMG';\n await require(`https://www.googletagmanager.com/gtag/js?id=${id}`).catch(\n () => {}\n );\n const dataLayer = (window.dataLayer = window.dataLayer || []);\n const location = html``;\n gtag('js', new Date());\n gtag('config', id, {\n page_path: location.pathname,\n page_location: location.href\n });\n return md`^{[Google Analytics](https://www.google.com/analytics/terms/).}`;\n function gtag() {\n dataLayer.push(arguments);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"