31:T49d,map = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background", "white"); if (type == "Squares") { svg .selectAll("path") .data(squaregrid(mystep)) .join("path") .attr("d", d3.geoPath()) .attr("fill", "#d179a1") .attr("stroke", "white") .attr("stroke-width", 1.5); } if (type == "Triangles") { svg .selectAll("path") .data(trianglegrid(mystep)) .join("path") .attr("d", d3.geoPath()) .attr("fill", "#d179a1") .attr("stroke", "white") .attr("stroke-width", 1.5); } if (type == "Hexagons") { svg .selectAll("path") .data(hexgrid(mystep)) .join("path") .attr("d", d3.geoPath()) .attr("fill", "#d179a1") .attr("stroke", "white") .attr("stroke-width", 1.5); } if (type == "Random") { svg .selectAll("path") .data(voronoigrid(mystep)) .join("path") .attr("d", d3.geoPath()) .attr("fill", "#d179a1") .attr("stroke", "white") .attr("stroke-width", 1.5); } return svg.node(); }32:T531,trianglegrid = mystep => { let triangletop = (p, size) => { let h = (Math.sqrt(3) / 2) * size; let p1 = [p[0] + size / 2, p[1]]; let p2 = [p[0], p[1] - h]; let p3 = [p[0] - size / 2, p[1]]; return [p1, p2, p3, p1]; }; let trianglebottom = (p, size) => { let h = (Math.sqrt(3) / 2) * size; let p1 = [p[0] + size / 2, p[1]]; let p2 = [p[0], p[1] + h]; let p3 = [p[0] - size / 2, p[1]]; return [p1, p2, p3, p1]; }; let size = mystep / Math.sqrt(3); let h = (Math.sqrt(3) / 2) * mystep; // build grid let y = d3.range(0, height + size, h).reverse(); if (y.length % 2) { y.unshift(d3.max(y) + h); } let x = d3.range(0, width + size, mystep); let grid = x.map((x, i) => y.map(y => [x, y])).flat(); //let grid = y.map((y, i) => x.map(x => [x, y])).flat(); grid = grid.map((d, i) => { return i % 2 == 1 ? [d[0] + mystep / 2, d[1]] : d; }); let nb = grid.length; grid = grid.concat(grid); // build object let result = grid.map((d, i) => { return { type: "Feature", geometry: { type: "Polygon", //coordinates: [triangletop(d, mystep)] coordinates: i < nb ? [triangletop(d, mystep)] : [trianglebottom(d, mystep)] }, properties: { index: i } }; }); return result; }33:[] 2f:{"title":"Let's Make Grids","cells":[{"id":0,"value":"md`# Let's Make Grids`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof mystep = Range([20, 50], {\n step: 1,\n value: 35,\n label: \"Step\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"viewof type = Radio([\"Squares\", \"Hexagons\", \"Triangles\", \"Random\"], {\n value: \"Triangles\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"voronoigrid(mystep)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1537,"value":"squaregrid(mystep)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`**1. Dots**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"regulardots = mystep => {\n // build grid\n let y = d3.range(0 + mystep / 2, height, mystep).reverse();\n let x = d3.range(0 + mystep / 2, width, mystep);\n let grid = x.map((x, i) => y.map(y => [x, y])).flat();\n // build object\n let result = grid.map((d, i) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: d\n },\n properties: {\n index: i\n }\n };\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`**2. Squares**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"squaregrid = mystep => {\n // build grid\n let y = d3.range(0 + mystep / 2, height, mystep).reverse();\n let x = d3.range(0 + mystep / 2, width, mystep);\n let grid = x.map((x, i) => y.map(y => [x, y])).flat();\n\n let s = mystep / 2;\n // build object\n let result = grid.map((d, i) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n [\n [d[0] - s, d[1] + s],\n [d[0] + s, d[1] + s],\n [d[0] + s, d[1] - s],\n [d[0] - s, d[1] - s],\n [d[0] - s, d[1] + s]\n ]\n ]\n },\n properties: {\n index: i\n }\n };\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`**3. Hexagons**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`See https://www.redblobgames.com/grids/hexagons/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"hexdots = mystep => {\n let w = mystep;\n let size = w / Math.sqrt(3);\n let h = 2 * size * (3 / 4);\n\n // build grid\n\n let y = d3.range(0, height + size, h).reverse();\n if (y.length % 2) {\n y.unshift(d3.max(y) + h);\n }\n let x = d3.range(0, width + size, w);\n let grid = x.map((x, i) => y.map(y => [x, y])).flat();\n grid = grid.map((d, i) => {\n return i % 2 == 1 ? [d[0] + w / 2, d[1]] : d;\n });\n\n // build object\n let result = grid.map((d, i) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: d\n },\n properties: {\n index: i\n }\n };\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"hexgrid = mystep => {\n let w = mystep;\n let size = w / Math.sqrt(3);\n let h = 2 * size * (3 / 4);\n\n // build grid\n let y = d3.range(0, height + size, h).reverse();\n if (y.length % 2) {\n y.unshift(d3.max(y) + h);\n }\n let x = d3.range(0, width + size, w);\n let grid = x.map((x, i) => y.map(y => [x, y])).flat();\n grid = grid.map((d, i) => {\n return i % 2 == 1 ? [d[0] + w / 2, d[1]] : d;\n });\n let s = mystep / 2;\n // build object\n let result = grid.map((d, i) => {\n let hex = [];\n for (let i = 0; i < 6; i++) {\n let ang = (Math.PI / 180) * (60 * i - 30);\n hex.push([d[0] + size * Math.cos(ang), d[1] + size * Math.sin(ang)]);\n }\n\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [[hex[0], hex[1], hex[2], hex[3], hex[4], hex[5], hex[0]]]\n },\n properties: {\n index: i\n }\n };\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"md`**4. Triangles**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"md`**5. Random Dots**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"randomdotsd = mystep => {\n let grid = [];\n let nb = Math.round((width / mystep) * (height / mystep));\n for (let i = 0; i < nb; i++) {\n grid.push([Math.random() * width, Math.random() * height]);\n }\n // build object\n let result = grid.map((d, i) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: d\n },\n properties: {\n index: i\n }\n };\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"md`**6. Delaunay**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"delaunaygrid = mystep => {\n let grid = [];\n let nb = Math.round((width / mystep) * (height / mystep));\n for (let i = 0; i < nb; i++) {\n grid.push([Math.random() * width, Math.random() * height]);\n }\n\n let delaunay = d3.Delaunay.from(grid, d => d[0], d => d[1]);\n let triangles = Array.from(delaunay.trianglePolygons());\n\n // build object\n let result = triangles.map((d, i) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [d]\n },\n properties: {\n index: i\n }\n };\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`**7. Voronoi**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"voronoigrid = mystep => {\n let grid = [];\n let nb = Math.round((width / mystep) * (height / mystep));\n for (let i = 0; i < nb; i++) {\n grid.push([Math.random() * width, Math.random() * height]);\n }\n\n let voronoi = d3.Delaunay.from(grid, d => d[0], d => d[1]).voronoi([\n 0,\n 0,\n width,\n height\n ]);\n\n // build object\n let result = grid.map((d, i) => {\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [voronoi.cellPolygon(i)]\n },\n properties: {\n index: i\n }\n };\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"md`**8. Do It Yourslef**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1447,"value":"md`**

Warning, work in progress.
**All this is not yet stable. If you import these functions, you have to know that they may change.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"md`- To import the function to build **square grids**, do: \n~~~js\nimport { squaregrid } from \"@neocartocnrs/grids\"\n~~~\n\n- To import the function to build **triangle grids**, do: \n~~~js\nimport { trianglegrid } from \"@neocartocnrs/grids\"\n~~~\n\n- To import the function to build **hexagonal grids**, do: \n~~~js\nimport { hexgrid } from \"@neocartocnrs/grids\"\n~~~\n\n- To import the function to build **random grids (voronoi)**, do: \n~~~js\nimport { voronoigrid } from \"@neocartocnrs/grids\"\n~~~\n\n*The step value represents the distance between the centroids of the cells. Note also that you have to define height & width in your notebook *\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1522,"value":"md`** 9. Remarks**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1524,"value":"md`Geocontains can be very slow. A possible optimization would be to use geoContainsCache(). See the discussion in the forum. https://talk.observablehq.com/t/intersect-a-regular-grid-and-a-projected-world-map/4928/5`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"import { Range, Radio } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@6\", \"d3-geo-voronoi\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1532,"value":"squaregrid(mystep)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}