31:[] 2f:{"title":"Hexagonal World (coloring by country)","cells":[{"id":0,"value":"md`# Hexagonal World (coloring by country)\n\nInspired by [this thread](https://talk.observablehq.com/t/extending-the-hexagonal-world-notebook/1646).\n\nUsing [*context*.isPointInPath](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath) to test whether points in a grid are on land.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof r = {\n const form = html``;\n form.i.oninput = () => form.value = form.i.valueAsNumber;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"{\n const offscreenContext = DOM.context2d(width, height, 1);\n const offscreenPath = d3.geoPath(projection, offscreenContext);\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n\n // Initialize the context’s path with the desired boundary.\n for (const c of countries){\n offscreenContext.beginPath();\n offscreenPath(c);\n // hacky random color string\n context.fillStyle = '#' + (Math.random().toString(16) + \"000000\").substring(2, 8);\n // Iterate over the grid and test whether points are inside.\n for (let j = 0, y = j * dy; y < height + r; y += dy, ++j) {\n for (let x = (j & 1) * dx / 2; x < width + dx / 2; x += dx) {\n if (offscreenContext.isPointInPath(x, y)) {\n context.beginPath();\n hexagonPath(context, x, y, r);\n context.fill();\n }\n }\n yield context.canvas;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"function hexagonPath(context, x, y, r) {\n context.moveTo(x, y - r);\n for (let a = 1; a < 6; ++a) {\n const angle = a * Math.PI / 3;\n context.lineTo(x + Math.sin(angle) * r, y - Math.cos(angle) * r);\n }\n context.closePath();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`We can similarly construct GeoJSON (in pixels, not geographic coordinates).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"function cells(j) {\n const offscreenContext = DOM.context2d(width, height, 1);\n const offscreenPath = d3.geoPath(projection, offscreenContext);\n\n const rings = [];\n\n // Initialize the context’s path with the desired boundary.\n offscreenContext.beginPath();\n offscreenPath(countries[j]);\n\n // Iterate over the grid and test whether points are inside.\n\n for (let j = 0, y = j * dy; y < height + r; y += dy, ++j) {\n for (let x = (j & 1) * dx / 2; x < width + dx / 2; x += dx) {\n if (offscreenContext.isPointInPath(x, y)) {\n rings.push(hexagonPoints(x, y, r));\n }\n }\n }\n\n return {\n type: \"MultiPolygon\",\n coordinates: rings.map(ring => [ring])\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"function hexagonPoints(x, y, r) {\n const points = [[x, y - r]];\n for (let a = 1; a < 6; ++a) {\n const angle = a * Math.PI / 3;\n points.push([x + Math.sin(angle) * r, y - Math.cos(angle) * r]);\n }\n points.push([x, y - r]);\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"md`We can now render the GeoJSON using the null projection.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"// The following works but is slow and useless\n\n// {\n// const context = DOM.context2d(width, height);\n// const path = d3.geoPath(null, context);\n// context.beginPath();\n// for (let j = 0; j < countries.length; j++) {\n// path(cells(j));\n// context.fillStyle = \"#eee\";\n// context.fill();\n// context.stroke();\n// }\n// return context.canvas;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`We can also now convert it to TopoJSON.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"topology = (j) => topojson.topology({cells:cells(j)}, 1e6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`And once in TopoJSON, we can merge the cells to produce continguous shapes!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"merge = j => {\n const top = topology(j);\n return topojson.merge(top, [top.objects.cells]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"{\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(null, context);\n context.beginPath();\n for (let j = 0; j