30:[{"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}] 2e:{"title":"Regular grids","cells":[{"id":1628,"value":"# Regular grids","pinned":false,"hidden":false,"mode":"md"},{"id":1899,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":3615,"value":"","pinned":true,"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":"ojs"},{"id":3450,"value":"See on a map","pinned":false,"hidden":false,"mode":"md"},{"id":2092,"value":"viewof type = Inputs.select(\n [\"square\", \"diamond\", \"hexbin\", \"triangle\", \"arbitrary\"],\n { label: \"Type\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2362,"value":"viewof step = Inputs.range([20, 100], { label: \"step\", step: 1, value: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3378,"value":"{\n 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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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":"viewof type2 = Inputs.select([\"h3\", \"square_sph\"], { label: \"Type\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3383,"value":"viewof step2 = Inputs.range([5, 15], {\n label: \"Step in degrees (square_sph only)\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3443,"value":"viewof h3level = Inputs.radio([0, 1, 2, 3], {\n label: \"level (h3 only)\",\n value: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2082,"value":"{\n 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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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":"{\n 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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3528,"value":"It works also on a sphere","pinned":false,"hidden":false,"mode":"md"},{"id":3430,"value":"{\n 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 return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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":"{\n 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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3640,"value":"{\n 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 return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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 \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":3645,"value":"{\n let svg = viz.create({\n projection: \"EqualEarth\"\n });\n svg.path({ data: world, fill: \"#CCC\" });\n svg.plot({\n step: 30,\n type: \"gridchoro\",\n data: world,\n var: \"pop\"\n });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}