2e:null 2f:["$","title",null,{"children":"Hexagonal World (coloring by country) | Bryan Gin-ge Chen | Observable"}] 34:[] 32:{"id":"d1e837397ccac837","slug":"hexagonal-world-coloring-by-country","title":"Hexagonal World (coloring by country)","thumbnail":"4d996b6a043218592ed98690761de13cf3fca3be6271d4146688c6478e598dde","access_level":"public","create_time":"$D2019-02-05T16:28:25.090Z","update_time":"$D2019-02-05T16:40:53.183Z","view_time":null,"first_public_time":"$D2019-02-15T00:08:00.681Z","has_unpublished_edits":null,"fork":{"id":"aa14b1856150505d","slug":"hexagonal-world","title":"Hexagonal World","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":"starter_2024"},"version":426,"publish_version":426,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null}],"members":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"0e370c3a8bfed6b8","slug":"forks","title":"Forks","owner":{"id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`We can similarly construct GeoJSON (in pixels, not geographic coordinates).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`We can now render the GeoJSON using the null projection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"md`We can also now convert it to TopoJSON.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"topology = (j) => topojson.topology({cells:cells(j)}, 1e6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"md`And once in TopoJSON, we can merge the cells to produce continguous shapes!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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