31:T49f,md `Hexagons are skilled shapes for bining point location data. As shown [all the way over here](https://beta.observablehq.com/@larsvers/making-a-tesselated-hexbin-map), hexagons are one of three shapes (apart from triangles and squares) that can **tessellate** the plane [regularly](https://www.mathsisfun.com/geometry/tessellation.html). Comparing the three, hexagons have the advantage of being most similar to circles. Why would that be important? Circles are by far the fairest in **binning** data as distances of binned points to the centre are [spike-less (linear monotonic)](https://beta.observablehq.com/@larsvers/making-a-tesselated-hexbin-map) and neighbouring cirlces are [equidistant](https://uber.github.io/h3/#/documentation/overview/use-cases)—which also holds true for hexagons. However, circles don't regularly tessellate, there will be gaps. So we shall stick to the hexagon, which we can use in D3 wth the [d3.hexbin](https://github.com/d3/d3-hexbin) plugin.

_{The three possible regular tessellations}`32:T633,md `While the d3.hexbin plugin lets you bin data where there is data, in some cases it can be useful to **tessellate**—to cover the geography we want to explore fully and gap-free in a grid of hexagons. This is now implemented in [d3-hexgrid](https://github.com/larsvers/d3-hexgrid). Apart from tessellating your geographies in a grid, d3-hexgrid does two more things. It calculates the inside-area, or **_cover_ of edge hexagons** allowing you to encode edge data based on the correct point density. And it **aggregates** and augments data to simplify the visual encoding of your data, providing sum of point locations and edge corrected point density per hexagon, domain extents for colour scales and more. The three things it does:

_{The three d3-hexgrid tasks} This notebook will run through how d3-hexgrid lays the grid out; how edge cover is calculated to produce correct point densities throughout, before looking at an example. By the way, this is an evolution. A first and less performant version of step 1 has been explained [here](https://www.packtpub.com/web-development/learning-d3js-5-mapping-second-edition) and [here](https://beta.observablehq.com/@larsvers/making-a-tesselated-hexbin-map) which got fundamentally improved by [Philippe Rivière](https://illisible.net/philippe-riviere) who kindly pointed towards a much more elegant and performant layout solution. Let's start with the grid algorithm...` 33:Tb84,viewof compare = { const canvas = DOM.canvas(w, h); const context = canvas.getContext('2d'); const line = 3, r = 3; // 1st Hexagon left. // Draw left hex. context.save(); context.translate(w * 0.25, h * 0.5); context.fillStyle = colourScale(50/compareArea); context.fill(compareHex.hexagon); context.strokeStyle = c.strokeHex; context.stroke(compareHex.hexagon); context.restore(); // Get the left hex' image data alphas and simulate point positions. const imgAlphas = context.getImageData(0,0,w/2,h).data.filter((d,i) => i % 4 === 3); const points = simulatePoints(imgAlphas, 50); // Draw the simulated points onto the left hex. context.fillStyle = '#ddd'; context.strokeStyle = '#777', context.lineWidth = 1; points.forEach(d => { context.beginPath(); context.arc(d[0], d[1], r, 0, 2 * Math.PI); context.fill(), context.stroke(); }); context.globalCompositeOperation = 'destination-over'; // Draw some land over the left hexagon. context.fillStyle = c.fillLandDark; context.fillRect(line, line, compareHex.borderRight+15-line, h-line*2); context.lineWidth = line; context.strokeStyle = c.strokeLand; context.strokeRect(line, line, compareHex.borderRight+15-line, h-line*2); // 2nd hexagon right. // Change `points` on border change. const pointsUpdate = points.map((d,i) => calcPosition(d, i, border)); // Clear the canvas. context.clearRect(w/2, 0, w/2, h/2); // Draw some land over the right hexagon. context.fillStyle = c.fillLandDark; context.fillRect(w/2+line, line, border+15-line, h-line*2); context.lineWidth = line; // context.strokeStyle = 'mediumaquamarine'; context.strokeStyle = c.strokeLand; context.strokeRect(w/2+line, line, border+15-line, h-line*2); context.globalCompositeOperation = 'source-over'; // Draw the right hexagon. context.save(); context.translate(w * 0.75, h * 0.5); context.lineWidth = 1; context.strokeStyle = c.strokeHex; context.stroke(compareHex.hexagon); context.restore(); context.globalCompositeOperation = 'exclusion'; // Draw the right hexagon. context.save(); context.translate(w * 0.75, h * 0.5); context.fillStyle = '#fff'; context.fill(compareHex.hexagon); context.restore(); // Change the dark pixels to heotpink. const imgData = context.getImageData(0,0,w,h); coverCorrect ? changePixelColor(context, imgData, getColourRGB(colourScale(pointDensity))) : changePixelColor(context, imgData, getColourRGB(colourScale(50/compareArea))); context.globalCompositeOperation = 'source-over'; // Draw the updated points on the right canvas. context.fillStyle = '#ddd'; context.strokeStyle = '#777', context.lineWidth = 1; pointsUpdate.forEach(d => { context.beginPath(); context.arc(d[0] + w/2, d[1], r, 0, 2 * Math.PI); context.fill(), context.stroke(); }); canvas.value = imgAlphas.length; return canvas; }34:T43d,{ const canvas = DOM.canvas(w,h); const context = canvas.getContext('2d'); // Prep the context position for the hexagon // to be drawn in the center. context.translate(w/2, h/2); context.scale(scaleFactor, scaleFactor); // Prep the path for drawing on canvas. path.context(context); // Translate the geo into position by the negative position // of the center we keep steady. Then draw the geo. context.translate(-position[0], -position[1]) context.beginPath(); path(us); context.fillStyle = c.fillLandDark; context.fill(); context.lineWidth = 0.1; context.strokeStyle = c.strokeLand; context.stroke(); context.translate(position[0], position[1]); // Define the composite operation to highlight the overlap. // You can try a few. For this colour combination, 'luminosity' wins. context.globalCompositeOperation = 'exclusion'; // Draw the hexagon. context.fillStyle = '#e0e9fb'; context.fill(hexagon); const imgData = context.getImageData(0,0,w,h); changePixelColor(context, imgData, [100, 149, 237]); return canvas; }35:T4b9,viewof cover = { const canvas = DOM.canvas(w, h); const context = canvas.getContext('2d'); // This is concetually the same as the cell // showing the map moving over the hexagon but // streamlined for retreiving the image data. // Prep the context position for the hexagon // to be drawn in the center. context.translate(w/2, h/2); context.scale(scaleFactor, scaleFactor); // Prep the path for drawing on canvas. path.context(context); // Translate the geo into position by the negative position // of the center we keep steady. Then draw the geo w/o transition. context.translate(-edgeCenters[pick][0], -edgeCenters[pick][1]); context.beginPath(); path(us); context.fillStyle = 'red'; context.fill(); context.translate(edgeCenters[pick][0], edgeCenters[pick][1]); // Define the composite operation to highlight the overlap. // For clarity we want `destinaion-atop` here. context.globalCompositeOperation = 'destination-atop'; // Draw the hexagon. context.fillStyle = 'blue'; context.fill(hexagon); const imgData = context.getImageData(0, 0, w, h).data; const coverInfo = getCover(imgData); canvas.value = coverInfo; return canvas; }36:T50f,/** Simulates n random points in an image. @param {Array} imgAlphaData The image data. @param {number} n The desired number of points. @return {Array} The x, y positions for each point. */ function simulatePoints(imgAlphaData, n) { /* Get indeces of the left hexagon's pixel. */ // Get indeces of the image's filed pixel. // Ugly but imageAlphas.map((d,i) => d ? i : d) doesn't work for some reason. let indeces = [] for(let i = 0; i < imgAlphaData.length; i++){ const value = imgAlphaData[i] > 0 ? i : imgAlphaData[i]; indeces.push(value) } // Remove the non-filled pixel. indeces = indeces.filter(d => d); /* Pick cooordinates within the left hexagon. */ // Get 30 random indeces. const testIndeces = d3.range(n).map(d => Math.floor(Math.random()*indeces.length)); // I want to keep the same random indeces when the caller of this cell (above) // updates. This is surprisingly hard, so I'm using the global window here. 😱 window.testies = window.testies || testIndeces; // const points = testIndeces.map(d => [Math.floor(indeces[d] % (w/2)), Math.floor(indeces[d] / (w/2))]) const points = window.testies.map(d => [Math.floor(indeces[d] % (w/2)), Math.floor(indeces[d] / (w/2))]) return points; }37:T446,/** Updates x, y positions based on a moving right border. @param {Array} position Initial [x, y] position. @param {number} index Point index in initial array. @param {number} borderX x position of moving border. @return {Array} Updated [x, y] position. */ function calcPosition(position, index, borderX) { let [x, y] = position; // jitter points when pushed left. const borderXJitter = borderX + index * 0.3; // x smaller than border. if (x < borderXJitter) return [x, y]; // x larger than border and y in center. if (x >= borderXJitter && y > compareHex.r/2 && y < h - compareHex.r/2) { return [borderXJitter, y]; } // x larger than border and y top. if (x >= borderXJitter && y < compareHex.r/2) { return [borderXJitter, y + (x - borderXJitter) * 0.66]; // * } // x larger than border and y bottom. if (x >= borderXJitter && y > h - compareHex.r/2) { return [borderXJitter, y - (x - borderXJitter) * 0.66]; } // * `(x-border)` is a value increasing by 1 from 0. // `⨉ 0.66` flattens the x trajectory. }38:T510,function drawScene(context) { // fill used to be aliceblue. // stroke used to be lightskyblue. // Set the path generator's context. path.context(context); // Draw the map. context.beginPath(); path(us); // context.fillStyle = '#EDFEED'; context.fillStyle = c.fillLand; context.fill(); // context.strokeStyle = 'mediumaquamarine'; context.strokeStyle = c.strokeLand; context.stroke(); // Draw all hexagons. context.beginPath(); context.lineWidth = 0.1; // context.strokeStyle = 'mediumaquamarine'; context.strokeStyle = c.strokeLand; imageCenters.forEach(d => { context.translate(d[0], d[1]); context.stroke(hexagon); context.translate(-d[0], -d[1]); }); // Draw the edge hexagons. context.beginPath(); context.lineWidth = 0.7; // context.strokeStyle = 'hotpink'; context.strokeStyle = c.fillHex; edgeCenters.forEach(d => { context.translate(d[0], d[1]); context.stroke(hexagon); context.translate(-d[0], -d[1]); }); // Draw the hexagon in focus. context.translate(edgeCenters[pick][0], edgeCenters[pick][1]); context.beginPath(); // context.fillStyle = 'hotpink'; context.fillStyle = c.fillHex; context.fill(hexagon); context.translate(-edgeCenters[pick][0], -edgeCenters[pick][1]); }39:[] 2f:{"title":"Hexgrid maps with d3-hexgrid","cells":[{"id":0,"value":"md`# Hexgrid maps with d3-hexgrid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"md `### Hexagonal tessellation with [d3-hexgrid](https://github.com/larsvers/d3-hexgrid)\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"md `
\n## Tesselating a map with hexagons\n
\nThere are two essential tools to d3-hexgrid: d3-hexbin and Canvas. d3-hexbin is the layout base and the hexagon generator, Canvas helps to identify encapsulation and overlap.\n\nFirst we get the hexbin generator, decide an extent it will be responsible for and a radius for our hexagons:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"hexbin = d3.hexbin()\n .extent([[0,0],[w, h]])\n .radius(r)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1397,"value":"md `Next we smother the extent with hexagon centres, by first asking d3-hexbin for their coordinates and secondly drawing them on a Canvas:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"centers = hexbin.centers()","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"{\n const context = DOM.context2d(w, h);\n\n context.beginPath();\n centers.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHex; \n context.fill();\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"md `You can change the hexagon's radius at your will...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"viewof r = slider({\n min: 4,\n max: 12,\n step: 0.2,\n value: 8,\n title: 'The hex radius'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"md `We could tessellate our extent with hexagons at this point...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"{\n const context = DOM.context2d(w, h/4);\n const canvasHexagon = new Path2D(hexbin.hexagon());\n context.fillStyle = c.fillHex, context.strokeStyle = c.fillHex;\n context.lineWidth = 0.5;\n context.beginPath();\n centers.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r/2).context(context)();\n context.stroke(canvasHexagon);\n context.translate(-d[0], -d[1]);\n });\n context.fill()\n \n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"md `...but there's not much glory in tessellating a rectangle. \n\nInstead, let's say we want to regularly tessellate the US with hexagons. Much more glory in there.\n\nConceptually, the tessellation runs through these steps:\n1. Draw a filled US on Canvas.\n2. Get the position of each pixel the US fills with Canvases own [context.getImageData()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) method.\n3. Compare these pixel coordinates with our centers coordinates and only keep the very centers within the US area: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"{\n const canvas = DOM.canvas(w, h);\n const context = canvas.getContext('2d');\n\n path.context(context);\n \n // Draw the US.\n context.beginPath();\n path(us);\n context.fillStyle = c.fillLandDark;\n context.fill();\n \n // Draw the grid.\n context.beginPath();\n centers.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHex; \n context.fill();\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"md `\n
\n#### 1) Draw the US\n
\nThis one is simple. Here it is:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"image = {\n const canvas = DOM.canvas(w, h);\n const context = canvas.getContext('2d');\n\n path.context(context);\n context.beginPath(), path(us), context.fillStyle = c.fillHexLight\n context.fill();\n\n // return canvas not context.canvas which will produce \n // the wrong imageData scaled up by the devicePixelRatio\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1424,"value":"md `\n
\n#### 2) Get the image data\n
\nNot hard at all:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"imageData = image.getContext('2d').getImageData(0, 0, w, h).data","pinned":true,"hidden":false,"mode":"ojs"},{"id":1428,"value":"md `The result is a Uint8ClampedArray, an array of 8 bit unsigned (no minus) integers clamped to 0-255.\n\nEach pixel is represented by four array elements specifying the R, G, B and alpha value of the pixel:\n\n

\n\nAs said, their values can range form from 0 _none_ to 255 _full_. Even the alpha value. Note, that the R, G, B colour values will only be meaningful if the alpha is greater than 0. So above 2 pixels are black (rgb(0,0,0)) only in name as they are fully transparent with an alpha of 0.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"md `\n
\n#### 3) Only keep image internal centers\n
\nThis one is a simple two lines of code, but it's worth taking apart, as it's smart. \n\nAt this point we have 2 arrays: \n1. the centers array of our center points covering our entire Canvas.\n2. The imageData array with colour and alpha information for each pixel on our Canvas.\n\nIn order to find out which center point is in the image, we just check for each center point coordinate if it has an alpha value greater than 0. Our centers are represented by pixel coordinates, with the first one at [${centers[0][0]}, ${centers[0][1]}],so we can simply look up the corresponding pixel in our imageData array and know the center is in the image, if the alpha is greater than 0. That's it.\n\nAs we're only interested in the alpha, let's first remove the R, G and B values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"imageDataAlpha = imageData.filter((d,i) => i%4 === 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1437,"value":"md `The imageDataAlpha array now has one value per pixel, representing the alpha value of this pixel. That makes ${f(imageDataAlpha.length)} pixel on our canvas image, which is quite right as our Canvas is ${w} pixel wide ${tex `\\times`} ${h} pixel high which makes a total of ${f(w * h)} pixel.\n\nFor each center we can now look up the pixel it lives on and check if it is greater than 0 or not. If it is, we keep that pixel as an _image center_. If the alpha is 0, our center is not touching the image and we disregard it.\n\nTo look up the respective pixel for each center value, we convert the center's _x_ and _y_ values into an imageData index like so:\n\n_Image pixel index = center X + center Y ${tex `\\times`} width_\n\nor in colour:\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"md `And here are all ${f(imageCenters.length)} hexbin center points that lie within our image of the US in data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"imageCenters = {\n return centers.filter(d => imageDataAlpha[Math.floor(d[0]) + Math.floor(d[1]) * w]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2187,"value":"md `...and in blue points:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"{\n const context = DOM.context2d(w, h);\n\n context.beginPath();\n imageCenters.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHex, context.fill();\n\n return context.canvas; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"md `...which we can now use to gloriously tessellate the US:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"{\n const context = DOM.context2d(w, h);\n\n const canvasHex = new Path2D(hexbin.hexagon());\n context.lineWidth = 1;\n context.strokeStyle = c.fillHex;\n \n imageCenters.forEach(d => {\n context.translate(d[0], d[1]);\n context.stroke(canvasHex);\n context.translate(-d[0], -d[1])\n })\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"coverChapter = md `\n
\n## Edge hexagon cover\n
\nApart from tessellating our base geography, d3-hexgrid calculates the actual area per hexagon—the **cover**—so you can encode edge hexagons accurately. Let's look at why and how...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1462,"value":"md `### Why calculating cover is fair\nOften, hexagons of a hexbin map encode the number of points they bin with colour. Number of points is the most simple, you might say ideal, measure to encode because you just count the points and map this number to a colour space. Easy. As an example, let's say we want to show the number of restaurants in the US. Our range goes from 1 (very light blue) to 1500 (dark blue) per hexagon. \n\n Both of the following hexagons have 50 restaurants within them and—this is important—fully lie within the US represented as a grey square. They will be appropriately colour encoded with a very pale blue:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1705,"value":"md `What happens if the hexagon on the right would not be fully inland, but would be an edge hexagon, only partly inland? If we stick to our simple quantity measure and encode number of points with a colour, nothing would change and the hexagon would be filled with the same light blue. Use the slider to move the coastline god-like across the hexagon.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"viewof border = {\n return html ``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1707,"value":"md `That doesn't seem fair to the points as these 50 restaurants have increasingly less space to scramble in. We need a different measure for encoding: **point density**. We can calculate point density by dividing the number of points by the real area in pixel (or miles, kilometers, metres, etc.). And we calculate the real area by detecting the hexagon's **cover**—the area within our base geography—multiplied by the full area of the hexagon.\n\nSee how the point density increases as we move our coastline in:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"{\n const hs = h/6;\n const pr = window.devicePixelRatio || 1;\n const canvas = DOM.canvas(w * pr, hs * pr);\n canvas.setAttribute('style', `width: ${w}px`)\n const context = canvas.getContext('2d');\n context.scale(pr, pr);\n\n const x = scale(pointDensity);\n\n context.strokeStyle = colScale(pointDensity);\n context.beginPath();\n context.moveTo(0, hs/2);\n context.lineTo(x, hs/2);\n context.closePath();\n context.stroke();\n \n context.beginPath();\n context.arc(x, hs/2, 3, 0, 2 * Math.PI);\n context.fillStyle = colScale(pointDensity);\n context.fill()\n \n const formatNum = d3.format(',.1');\n context.textBaseline = 'middle';\n context.font = '14px sans-serif'\n context.fillStyle = colScale(pointDensity);\n context.fillText(formatNum(pointDensity), x + 10, hs/2)\n context.fillStyle = colScale(pointDensity);\n context.globalAlpha = 0.6\n context.fillText('Point density', x + 57, hs/2)\n\n context.scale(1/pr, 1/pr);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"md `Using _point density_ instead of _point quantity_ we can more accurately represent the colour of this hexagon. Click this box and move the coastline again to see how the colour encoding would change with a moving coastline...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1720,"value":"viewof coverCorrect = { \n const form = html`\n \n `\n form.value = form.input.checked;\n\n form.input.addEventListener('click', function() {\n form.value = this.checked;\n });\n\n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"md `\n### How d3-hexgrid calculates cover\nAs said, **cover** is the percentage of area each hexagon is within the base geography—in our example the US mainland. We'll measure it not from 0 to 100 but from 0 to 1.\n\nAll hexagons that are fully within the geography have a cover of 1, so we can disregard them. The first step is then to find all edge hexagons. As it was so useful for the grid detection, we'll also use Canvas to detect edge hexagons. \n\nConceptually, we need all hexagons, whose centres lie within one hexagon radius away from the geography's edge. So, first, we don't draw a filled but a stroked image of our base geography, with a lineWidth of _2 × hexRadius_. In fact we only need the inner border, but strokes in Canvas are centred so in order to get an inner border of _hexRadius_ we need to double the stroke. Here it is:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"imageEdge = {\n const canvas = DOM.canvas(w, h);\n const context = canvas.getContext('2d');\n path.context(context);\n\n context.beginPath();\n path(us);\n context.lineWidth = edgeBand\n context.strokeStyle = c.strokeLandLight, context.stroke();\n \n // return canvas not context.canvas which will produce \n // the wrong imageData scaled up by the devicePixelRatio\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"md `Next, we get the alpha values of this very Canvas, very much like we've done for the grid detection above,:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"imageEdgeDataAlpha = imageEdge.getContext('2d').getImageData(0,0,w,h).data.filter((d,i) => i%4 === 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1839,"value":"md `Again, ${f(imageEdgeDataAlpha.length)} pixels in total with mostly 0's as most of the image pixel are unfilled.\n\nUsing the same algorithm as above, we filter out all centre coordinates without an equivalent in the Canvas' image data. In total there are ${f(imageCenters.length)} centres but only ${f(edgeCenters.length)} edge hexagons—here in dark blue:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"{\n const canvas = DOM.canvas(w,h), context = canvas.getContext('2d');\n path.context(context);\n \n context.beginPath();\n path(us);\n context.lineWidth = edgeBand, context.strokeStyle = c.strokeLandLight, context.stroke();\n\n // All centers.\n context.beginPath();\n imageCenters.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHexLight, context.fill();\n \n // edgeCenters.\n context.beginPath();\n edgeCenters.forEach(d => {\n context.translate(d[0], d[1]);\n d3.symbol().size(r).context(context)();\n context.translate(-d[0], -d[1]);\n });\n context.fillStyle = c.fillHexDark, context.fill();\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1851,"value":"md `You can increase the stroke width of the US to see how the algorithm assumes more edge hexagons:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"viewof edgeBand = slider({\n min: r*2,\n max: r*5, \n step: 1, \n value: r*2, \n title: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"md `Here they are dressed up as fully-fledged hexagons. You can zoom in and pan around to see that most of these indeed cross the edge (_there should be a few false positives as the left and right hex edges are less than_ r _pixel away from the centre._):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"edgeHexes = {\n const pr = window.devicePixelRatio || 1;\n const canvas = DOM.canvas(pr*w,pr*h);\n const context = canvas.getContext('2d');\n canvas.setAttribute('style', `width: ${w}px`);\n\n context.scale(pr,pr);\n \n drawScene(context);\n \n context.scale(1/pr, 1/pr);\n\n d3.select(canvas).call(zoom, pr);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1858,"value":"md `In a next step, the algorithm visits each edge hexagon to calculate its **cover**. Start the visitation by ticking the box:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"viewof check = { \n const form = html`\n \n `\n form.value = form.input.checked;\n\n form.input.addEventListener('click', function() {\n form.value = this.checked;\n });\n\n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1864,"value":"md `While the above two images might help to conceptually understand what it does, below is what the algorithm sees. It clips the hexagon and applies clearly distinguishable colours to the inside and the outside part. The inside pixel will be drawn red, the outside pixel blue. Quite an eye sore, but the algorithm doesn't mind:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2144,"value":"md `Next, it grabs the imageData to get the number of red and blue pixel and simply calculates the ratio of red pixel by all pixels (red + blue), which is the hexagon's **cover**:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"{\n const formatNum = d3.format(',');\n const formatPct = d3.format('.0%');\n\n const total = formatNum(cover.total);\n const inside = formatNum(cover.inside);\n const outside = formatNum(cover.outside);\n const coverRatio = formatPct(cover.cover);\n \n return md `\n| Measure | Measure |\n|----------------------------------------------------|-----------------------------------------------------|\n| Total filled Pixel | ${total} |\n| Inside Pixel | ${inside} |\n| Outside Pixel | ${outside} |\n| Cover | ${coverRatio} |\n`\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"md `That was it. By now, we have a regularly tessellated geography and know the cover for each edge hexagon.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1896,"value":"md `\n
\n## Using d3-hexgrid\n
\nNow, let's put d3-hexgrid to use. Here's what we need:\n\n1. Data to visualise\n2. Geo data\n3. A D3 projection and a D3 geo path generator\n4. A colour scale\n5. d3-hexgrid\n\nAs an example, we'll aim to visualise all Farmers Markets in the US. Here's the point location data, every [Farmers Market](https://www.ams.usda.gov/local-food-directories/farmersmarkets) in the US...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1919,"value":"markets = await d3.json('https://raw.githubusercontent.com/larsvers/data-store/master/farmers_markets_us.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1929,"value":"md `It's an array of objects, one object representing one Market. There's a set of variables for each market, while all we really need for any d3-hexgrid data are longitude/latitude variables represented here as lat and lng properties.\n\nThe second data we need is the base geography. Here's a pre-procesed US GeoJSON, just showing US mainland:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"us = await d3.json('https://raw.githubusercontent.com/larsvers/map-store/master/us_mainland_geo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1959,"value":"md `We opt for the [d3.geoAlbers](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbers) projection and an appropriate path generator. The Albers projection is an equal area projection, which [should be your first choice](https://github.com/larsvers/d3-hexgrid#use-equal-area-projections-for-the-base-geography) when binning geo data in general. d3-hexgrid normalises the space to equally sized units (hexagons in our case) which invites the reader to assume that each area a hexagon covers is also equal. However, many projections distort the area, so it's wise to stick to equal area projections.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"projection = d3.geoAlbers().fitSize([w, h], us)","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1968,"value":"md `To make a hexgrid, we need d3-hexgrid, which we've loaded already below with all other d3 modules as require('d3-hexgrid'). Then, we get a hexgrid instance and configure it with all required settings:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1972,"value":"hexgrid = d3.hexgrid()\n .extent([w, h])\n .geography(us)\n .projection(projection)\n .pathGenerator(path)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1976,"value":"md `
...before calling it with our data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1978,"value":"hex = hexgrid(markets)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1983,"value":"md `
hex is just a normal d3-hexbin generator, with one additional object dangling off it called grid:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1986,"value":"hex.grid","pinned":false,"hidden":false,"mode":"ojs"},{"id":1994,"value":"md `grid holds the layout array, which has one item per hexagon exposing all point locations binned within, as well as \n * the point location count (datapoints),\n * the cover weighted point count (datapointsWt),\n * the point density per hexagon (pointdensity),\n * and cover: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1996,"value":"hex.grid.layout[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2004,"value":"md `_[See here](https://github.com/larsvers/d3-hexgrid#grid-object) for more details and what the gridpoint property can be used for._\n\nNext we need a colour scale. We'll use the [viridis colour scale](https://github.com/d3/d3-scale-chromatic#interpolateViridis) to build an exponential scale (power of ${power}) as we have a heavily right skewed distribution of points with a few outliers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2015,"value":"marketColours = d3.scaleSequential(t => {\n var tNew = Math.pow(t, power);\n return d3.interpolateViridis(tNew);\n}).domain([...hex.grid.extentPointDensity].reverse())","pinned":true,"hidden":false,"mode":"ojs"},{"id":2025,"value":"md `
If you feel inclined you can decrease the scale's exponent and see an increasingly mono-coloured map as most hexagons have only a few markets, and only a few hexagons encapsulate many farmers markets.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2027,"value":"viewof power = slider({\n min: 1,\n max: 10,\n value: 10,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2035,"value":"md `We decide to encode the cover corrected point density rather than the point counts and use the hex.grid.extentPointDensity extent, also from the grid object. We reverse our domain as we want our minimum to map to the lightest yellow and our maximum to map to the darkest purple. D3's viridis colour space maps it the other way around, so we just swap the mapping around.\n\nIn a final step, we use the grid.layout to produce one path per hexagon, draw the hexagon path with d3-hexbin's own hexagon() drawing instructions, translate it into place, and use the colour scale to encode point density accordingly...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2047,"value":"svgMarkets = {\n\tconst svg = DOM.svg(w, h)\n\n d3.select(svg).selectAll('path')\n\t\t.data(hex.grid.layout)\n\t\t.enter()\n\t\t.append('path')\n\t\t.attr('d', hex.hexagon())\n .attr('transform', d => `translate(${d.x} ${d.y})`)\n .style('fill', d => !d.pointDensity ? '#fff' : marketColours(d.pointDensity))\n\t\t.style('stroke', '#ccc');\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"html `
That was it. A regularly tessellated hexbin map with accurate edge encoding... 🐳\n

See more examples with significantly less talk over here, find the plugin on GitHub or on NPM.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"md `------\n#### General`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"h = Math.round(width/3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"f = d3.format(',.0f')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1586,"value":"c = ({\n fillLand: '#f8f8f8',\n fillLandDark: '#eee',\n strokeLand: '#bbb',\n strokeLandLight: '#ddd',\n fillHex: 'cornflowerblue',\n fillHexVeryLight: '#d0dff9',\n fillHexLight: '#a2bff4',\n fillHexDark: '#3c598e',\n strokeHex: '#999'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"md `#### Edge explanation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"colourScale = d3.scaleLinear()\n .domain([1 / compareArea, 0.023])\n .range(['white', c.fillHex])\n .interpolate(d3.interpolateHcl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1725,"value":"function getColourRGB(stringCol) {\n const c = d3.color(stringCol);\n return [c.r, c.g, c.b];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"compareHex = {\n const hexRadius = h/2.1;\n const hexbin = d3.hexbin().extent([[0,0],[w,h]]).radius(hexRadius);\n const hexagon = new Path2D(hexbin.hexagon());\n const hexWidth = hexRadius * Math.sqrt(3);\n const rightHexBorderRight = Math.floor(w * 0.25 + (hexRadius * Math.sqrt(3))/2);\n const rightHexBorderLeft = Math.floor(w * 0.25 - (hexRadius * Math.sqrt(3))/2);\n return { r: hexRadius, hexagon, borderLeft: rightHexBorderLeft, borderRight: rightHexBorderRight }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"compareArea = 3/2 * Math.sqrt(3) * Math.pow(compareHex.r,2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"compareCover = {\n // const canvas = DOM.canvas(w, h); // debug. Also turn this into a viewof.\n const canvas = document.createElement('canvas');\n canvas.width = w, canvas.height = h;\n const context = canvas.getContext('2d');\n \n \n\n context.fillStyle = 'blue'\n context.fillRect(w/2 + border + 15, 0, width, h);\n \n context.globalCompositeOperation = 'destination-atop'\n\n context.save();\n context.translate(w * 0.75, h / 2) \n context.beginPath();\n context.fillStyle = 'red';\n context.fill(compareHex.hexagon);\n context.restore();\n \n const imgData = context.getImageData(w/2, 0, w/2, h).data;\n\n const coverInfo = getCover(imgData);\n\n // canvas.value = coverInfo.cover;\n // return canvas; // debug\n return coverInfo.cover\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1199,"value":"compareAreaUpdated = compareArea * compareCover","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"pointDensity = 50 / compareAreaUpdated","pinned":false,"hidden":false,"mode":"ojs"},{"id":1678,"value":"50 * 1/compareCover","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"hexagon = new Path2D(hexbin.hexagon())","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"/**\n* Changes the pixel colour of darker pixels to the given colour.\n* @param {Object} context The canvas context.\n* @param {Array} data The imaage data.\n* @param {Array} rgb The desired color as an array.\n* @return {undefined} Changes the canvas pixel in place.\n*/\nfunction changePixelColor(context, data, rgb) {\n const [r,g,b] = rgb;\n const imgData = data.data;\n\n for(let i = 3; i < imgData.length; i+=4) { \n if(imgData[i] > 100) {\n let rOrig = imgData[i-3];\n let gOrig = imgData[i-2];\n let bOrig = imgData[i-1];\n \n if(rOrig + gOrig + bOrig < 200) {\n imgData[i-3] = r;\n imgData[i-2] = g;\n imgData[i-1] = b;\n }\n }\n }\n context.putImageData(data, 0,0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"function getCover(data) {\n // Init area count variables.\n let outside = 0, \n inside = 0;\n\n // Find filled pixel with some alpha \n // (>=100) and identify image part.\n for (var pixelIndex = 3; pixelIndex < data.length; pixelIndex+=4) {\n const alpha = data[pixelIndex];\n if (alpha < 100) {\n continue;\n } else {\n const red = data[pixelIndex-3];\n const blue = data[pixelIndex-1];\n red > blue ? inside++ : outside++;\n } \n }\n\n // Calculate cover and add to edge hexagon.\n const imgRatio = inside / (inside + outside);\n \n return {total: inside + outside, inside: inside, outside: outside, cover: imgRatio};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"scale = d3.scaleLinear().domain([50 / compareArea, 50 / (compareArea * 0.03)]).range([3, w])","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"colScale = d3.scaleLinear().domain([50 / compareArea, 50 / (compareArea * 0.03)]).range(['#999', '#000'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"md `#### Edge algo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"scaleFactor = h/r/2.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":" function zoom(el, pixelRatio) {\n\n // Get the context.\n const context = el.node().getContext('2d');\n \n // Build the behaviour and call it on the canvas.\n el.call(d3.zoom().on('zoom', zoomed).scaleExtent([0.5, 5]));\n \n // Zoom handler.\n function zoomed() {\n\n // Grab the transform.\n const t = d3.event.transform;\n\n // Clear the rect on each zoom and save the context state.\n context.clearRect(0, 0, pixelRatio * w, pixelRatio * h);\n context.save();\n\n // Move the copntext's coordinate system into thhe right place.\n context.translate(pixelRatio * t.x, pixelRatio * t.y);\n context.scale(pixelRatio * t.k,pixelRatio * t.k);\n\n // ...well:\n drawScene(context);\n \n // Restore the context to the state before the zoom change, as\n // transforms are always applied from the initial state {0,0,1}.\n context.restore();\n \n } \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"mutable pick = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"viewof dur = slider({\n min: 250,\n max: 2000,\n step: 10,\n value: 750\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"function* time(array, index, duration) {\n const interpol = d3.interpolate(array[index], array[index+1]);\n const ticks = duration * 0.06;\n for(let i = 0; i < ticks; i++) {\n yield interpol(d3.easeExpOut(i/(ticks-1)));\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"position = {\n if(check) {\n for(let i = 0; i < edgeCenters.length-1; i++) {\n mutable pick = i+1;\n yield* time(edgeCenters, i, dur);\n }\n } else {\n yield* time(edgeCenters, mutable pick - 1, dur);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"edgeCenters = imageCenters.filter(d => imageEdgeDataAlpha[Math.floor(d[0]) + Math.floor(d[1]) * w])","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md `#### Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\n 'd3-array',\n 'd3-color',\n 'd3-drag',\n 'd3-ease',\n 'd3-fetch',\n 'd3-format',\n 'd3-geo',\n 'd3-hexbin',\n 'd3-hexgrid',\n 'd3-interpolate',\n 'd3-scale',\n 'd3-scale-chromatic',\n 'd3-selection',\n 'd3-shape',\n 'd3-zoom'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require('topojson@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"import {slider, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"// html ``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}