30:[] 2e:{"title":"Hexagonal World","cells":[{"id":0,"value":"md`# Hexagonal World\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 offscreenContext.beginPath();\n offscreenPath(topojson.feature(world, world.objects.land));\n\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}","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":"cells = {\n const offscreenContext = DOM.context2d(width, height, 1);\n const offscreenPath = d3.geoPath(projection, offscreenContext);\n\n // Initialize the context’s path with the desired boundary.\n offscreenContext.beginPath();\n offscreenPath(topojson.feature(world, world.objects.land));\n\n // Iterate over the grid and test whether points are inside.\n const rings = [];\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":"{\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(null, context);\n context.beginPath();\n path(cells);\n context.fillStyle = \"#eee\";\n context.fill();\n context.stroke();\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 = topojson.topology({cells}, 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 = topojson.merge(topology, [topology.objects.cells])","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 path(merge);\n context.fillStyle = \"#eee\";\n context.fill();\n context.stroke();\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"dx = r * 2 * Math.sin(Math.PI / 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"dy = r * 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"height = {\n const [[minX, minY], [maxX, maxY]] = d3.geoPath(projection).bounds({type: \"Sphere\"});\n return Math.round(maxY - minY + dy);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"projection = d3.geoEqualEarth().fitWidth(width, {type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"topojson = require(\"topojson-server@3\", \"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}