31:[{"id":"90832df81640f98a64ca736774e2716e246dbe271b4e8524ce1cd0cc23f75644b77a1e76190c0fca7d1d7955bddee876972feb56271f2674b93d16c60af4fd62","href":"https://static.observableusercontent.com/files/90832df81640f98a64ca736774e2716e246dbe271b4e8524ce1cd0cc23f75644b77a1e76190c0fca7d1d7955bddee876972feb56271f2674b93d16c60af4fd62","name":"grid_calculation.png","type":"image/png","lastModified":1761317664345.729,"size":53298},{"id":"a480326527efa5238140db46713b4c087789b6e74fbb819d2ee907d80b0f66435f9ac2f26228681b35f2290d861332fc86b9bbce03d9140e27e6c35f9cc0ddae","href":"https://static.observableusercontent.com/files/a480326527efa5238140db46713b4c087789b6e74fbb819d2ee907d80b0f66435f9ac2f26228681b35f2290d861332fc86b9bbce03d9140e27e6c35f9cc0ddae","name":"Screenshot from 2025-10-24 10-48-09.png","type":"image/png","lastModified":1761295709496.222,"size":83763},{"id":"36d086b2f9f733d1051c57fa41d40361eddc724ba03490fe8fd456cbdcd2cb614bb63aceef24da22257479c4e6196952b473050a34613f5b6d23257121af2537","href":"https://static.observableusercontent.com/files/36d086b2f9f733d1051c57fa41d40361eddc724ba03490fe8fd456cbdcd2cb614bb63aceef24da22257479c4e6196952b473050a34613f5b6d23257121af2537","name":"émotic-ne-faisant-une-remarque-38348380.webp","type":"image/webp","lastModified":1761295546040.481,"size":13714}] 2f:{"title":"Regular grids","cells":[{"id":1628,"value":"# Regular grids","pinned":false,"hidden":false,"mode":"md"},{"id":3646,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":1899,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"## 1 - Planar regular grids","pinned":false,"hidden":false,"mode":"md"},{"id":1954,"value":"The grid() function allows to create regular grids in the svg document. It takes 4 parameters: The type, step, width and height.","pinned":false,"hidden":false,"mode":"md"},{"id":3445,"value":"For example : ","pinned":false,"hidden":false,"mode":"md"},{"id":3447,"value":"viz.tool.grid({ type: \"square\", data: world })","pinned":true,"hidden":true,"mode":"js"},{"id":3450,"value":"See on a map","pinned":false,"hidden":false,"mode":"md"},{"id":2092,"value":"let type = view(Inputs.select(\n [\"square\", \"diamond\", \"hexbin\", \"triangle\", \"arbitrary\"],\n { label: \"Type\" }\n))","pinned":false,"hidden":false,"mode":"js"},{"id":2362,"value":"let step = view(Inputs.range([20, 100], { label: \"step\", step: 1, value: 30 }))","pinned":false,"hidden":false,"mode":"js"},{"id":3378,"value":"let svg = viz.create({\n projection: \"EqualEarth\",\n domain: world,\n zoomable: true\n });\n\n let grid = svg.grid({\n type: type,\n step: step\n });\n\n svg.path({ data: world, fill: \"#CCC\" });\n svg.path({\n coords: \"svg\", // Because the grid is in SVG coordinates\n data: grid,\n fill: \"#38896F\",\n stroke: \"#38896F\",\n fillOpacity: 0.3,\n strokeWidth: 0.4,\n tip: true\n });\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":3434,"value":"## 2 - Spherical grids","pinned":false,"hidden":false,"mode":"md"},{"id":3438,"value":"The grid() function allows also to create spherical grids. ","pinned":false,"hidden":false,"mode":"md"},{"id":3381,"value":"let type2 = view(Inputs.select([\"h3\", \"square_sph\"], { label: \"Type\" }))","pinned":false,"hidden":false,"mode":"js"},{"id":3383,"value":"let step2 = view(Inputs.range([5, 15], {\n label: \"Step in degrees (square_sph only)\",\n step: 1,\n value: 10\n}))","pinned":false,"hidden":false,"mode":"js"},{"id":3443,"value":"let h3level = view(Inputs.radio([0, 1, 2, 3], {\n label: \"level (h3 only)\",\n value: 1\n}))","pinned":true,"hidden":false,"mode":"js"},{"id":2082,"value":"let svg = viz.create({\n projection: \"Orthographic.rotate([30,-30])\",\n margin: 25,\n domain: world,\n width: 600,\n responsive: false,\n zoomable: \"versor\"\n });\n\n let grid = svg.grid({\n type: type2,\n step: step2,\n level: h3level\n });\n\n svg.path({ data: world, fill: \"#CCC\" });\n svg.path({\n data: grid,\n fill: \"#38896F\",\n stroke: \"#38896F\",\n fillOpacity: 0.3,\n strokeWidth: 0.4,\n tip: true\n });\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":3474,"value":"## 3 - Count dots in cells","pinned":false,"hidden":false,"mode":"md"},{"id":3496,"value":"Counting points in grids is very easy with geoviz. You just need to fill in the data attribute with your geojson points. If you fill in the var attribute, you can sum up the values of a stock data. For example, the population of a city. With geoviz, you can then represent this data with proportional circles, either on a regular grid on the plane or on the sphere. ","pinned":false,"hidden":false,"mode":"md"},{"id":3500,"value":"\n let svg = viz.create({\n projection: \"EqualEarth\",\n domain: world\n });\n\n let grid = svg.grid({\n type: \"hex\",\n step: 20,\n data: cities,\n var: \"population\"\n });\n\n //svg.path({ data: world, fill: \"#CCC\" });\n svg.path({\n data: grid,\n fill: \"#CCC\",\n stroke: \"white\",\n fillOpacity: 0.6,\n coords: \"svg\"\n });\n svg.plot({\n type: \"prop\",\n coords: \"svg\", // Because the grid is in SVG coordinates\n data: grid,\n var: \"population\",\n fill: \"#38896F\",\n stroke: \"#38896F\",\n k: 8,\n leg_title: \"Number of inh.\",\n fillOpacity: 0.9,\n strokeWidth: 0.2,\n tip: true\n });\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":3490,"value":"## 4 - Gridded maps","pinned":false,"hidden":false,"mode":"md"},{"id":3519,"value":"If your input data are polygons, then the values are **distributed proportionally to the intersecting area**. ","pinned":false,"hidden":false,"mode":"md"},{"id":3596,"value":"grid_calculation = FileAttachment(\"grid_calculation.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3598,"value":"You can choose two stocks and calculate the ratio. ","pinned":false,"hidden":false,"mode":"md"},{"id":3388,"value":"let svg = viz.create({\n projection: \"EqualEarth\",\n domain: world\n });\n\n let grid = svg.grid({\n type: \"diamond\",\n step: 10,\n data: world,\n var: [\"gdp\", \"pop\"],\n ratio: true,\n ratio_factor: 1\n });\n\n svg.path({ data: world, fill: \"#CCC\" });\n svg.plot({\n type: \"choro\",\n coords: \"svg\", // Because the grid is in SVG coordinates\n data: grid,\n var: \"ratio\",\n fill: \"#38896F\",\n stroke: \"#38896F\",\n fillOpacity: 0.9,\n strokeWidth: 0.2,\n leg_title: \"GDP per capita\",\n tip: true\n });\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":3528,"value":"It works also on a sphere","pinned":false,"hidden":false,"mode":"md"},{"id":3430,"value":"let svg = viz.create({\n projection: \"Orthographic\",\n\n zoomable: \"versor\"\n });\n\n let grid = svg.grid({\n type: \"h3\",\n level: 2,\n data: world,\n var: [\"gdp\", \"pop\"],\n ratio: true,\n ratio_factor: 1\n });\n\n svg.outline();\n svg.graticule({ stroke: \"white\" });\n svg.path({ data: world, fill: \"#CCC\" });\n svg.plot({\n type: \"choro\",\n data: grid,\n var: \"ratio\",\n fill: \"#38896F\",\n stroke: \"#38896F\",\n fillOpacity: 0.9,\n strokeWidth: 0.2,\n leg_title: \"GDP per capita\",\n tip: true,\n colors: \"SunsetDark\",\n filter: svg.effect.shadow({\n stdDeviation: 2,\n fill: \"black\",\n fillOpacity: 0.7,\n dx: 5,\n dy: 5\n })\n });\n\n display(svg.render())","pinned":false,"hidden":false,"mode":"js"},{"id":3582,"value":"emoticNeFaisantUneRemarque38348380 = FileAttachment(\n \"Screenshot from 2025-10-24 10-48-09.png\"\n).image({ width: 150 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3586,"value":"### Here, calculations are based on country data. This is therefore not a very accurate representation of the distribution of the world's population. However, it is possible to use other data sources.\n\n**See**: *https://observablehq.com/@neocartocnrs/mapping-gw4*","pinned":false,"hidden":false,"mode":"md"},{"id":3621,"value":"## 4 - The plot function","pinned":false,"hidden":false,"mode":"md"},{"id":3623,"value":"With the plot function, you can directly build thematic grids","pinned":false,"hidden":false,"mode":"md"},{"id":3626,"value":"let svg = viz.create({\n projection: \"EqualEarth\"\n });\n svg.path({ data: world, fill: \"#CCC\" });\n svg.plot({\n type: \"gridchoro\",\n data: cities,\n var: \"population\",\n tip: true\n });\n\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":3640,"value":"let svg = viz.create({\n projection: \"EqualEarth\"\n });\n svg.path({ data: world, fill: \"#CCC\" });\n svg.plot({\n step: 10,\n type: \"gridprop\",\n data: cities,\n var: \"population\",\n fill: \"#38896F\",\n tip: true\n });\n\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":1892,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1894,"value":"import {\n style,\n world,\n disclaimer,\n aus,\n aus_roads,\n usa,\n africa,\n france,\n cities,\n viz\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":1905,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}