31:[{"id":"faa7d894d0bd37edc506251f20129a4ad6cc8b943d69c44b79a913ca2218fa4da9a2d321aa9321fc492b0493f5d40c87c800d8b55b3c73fc1a54bb4b4c998743","href":"https://static.observableusercontent.com/files/faa7d894d0bd37edc506251f20129a4ad6cc8b943d69c44b79a913ca2218fa4da9a2d321aa9321fc492b0493f5d40c87c800d8b55b3c73fc1a54bb4b4c998743","name":"kisspng-globe-world-map-orange.png","type":"image/png","lastModified":1733323669393.971,"size":639088}] 2f:{"title":"Map projections","cells":[{"id":0,"value":"# Map projections","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"Ever since antiquity, cartographers have been faced with the thorny question of how to draw a three-dimensional world in two dimensions on a sheet of paper or a screen. In other words, how do you go from sphere to plane? Try peeling an orange and laying its peel flat on the table in front of you. ","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"orange = FileAttachment(\"kisspng-globe-world-map-orange.png\").image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"There are a thousand and one ways of doing this, and whatever your technique, there will be breaks and deformations. In the end, the image of the orange laid flat on the table will be nothing more than a distorted orange, far removed from the original spherical object.","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"## 1 - d3.js projections","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"Thanks to the d3.js library, you have access to a host of projection functions. These are available in the following libraries","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"d3 = require(\"d3\", \"d3-geo-projection\", \"d3-geo-polygon\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":96,"value":"To know the names of these projections, have a look at the documentation for these libraries.","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"- d3.geo https://d3js.org/d3-geo/projection\n- d3-geo-projection https://github.com/d3/d3-geo-projection\n- d3-geo-polygon https://github.com/d3/d3-geo-polygon","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"In `geoviz`, you can use them with the projection parameter in the create() function.","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"{\n let svg = viz.create({\n projection: d3.geoInterruptedHomolosine(),\n width: 600\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"## 2 - geoviz projections","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"Instead of loading the d3 libraries, these are integrated into the geoviz library. You can use them by typing `InterruptedHomolosine` instead of `d3.geoInterruptedHomolosine()`. These are exactly the same projections. ","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"{\n let svg = viz.create({ projection: \"Dodecahedral\", width: 600 });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"## 3 - projection parameters","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"Projections are configurable. It is therefore easy to change the projection center and other parameters. These parameters may vary from one projection to another. ","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"viewof longitude = Inputs.range([-180, 180], {\n label: \"Longitude\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"{\n let svg = viz.create({\n projection: `NaturalEarth1.rotate([${longitude}, 0])`,\n width: 600\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof lobes = Inputs.range([4, 10], {\n label: \"Lobes\",\n step: 1,\n value: 6\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n let svg = viz.create({\n projection: viz.proj.geoGingery().lobes(lobes),\n width: 600\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"## 4 - Globe view","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"To display a globe, all you need to do is use an `orthographic` projection centered on the point of your choice. Then, by setting the `zoomable` parameter to `versor`, you can rotate the globe. ","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"{\n let svg = viz.create({\n projection: viz.proj.geoOrthographic().rotate([30, -30]),\n zoomable: \"versor\",\n width: 400\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 30, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"## 5 - Strings","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"To simplify your code, the geoviz library also lets you use projections as strings. `d3.geoMercator()` becomes `\"Mercator\"` ; `d3.geoOrthographic()` becomes `\"Orthographic\"`. If you forget to capitalize at the beginning, that's okay. For example: ","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"{\n let svg = viz.create({\n projection: \"bertin1953\",\n width: 400\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"In this string, you can also pass the usual parameters.","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"{\n let svg = viz.create({\n projection: \"Orthographic.rotate([0, 90])\",\n width: 400\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"## 6 - The particular case of tiles","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"To use raster tiles, you must use Mercator projection. You have the choice. You can set the projection parameter as `d3.geoMercator()`, `viz.proj.geoMercator()`, `\"Mercator\"` ou `\"mercator\"`. To make the map zoomable, use `zoomable: true`.","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"{\n let svg = viz.create({\n projection: \"mercator\",\n zoomable: true,\n width: 500,\n responsive: false,\n margin: [-50, 0, -150, 0]\n });\n svg.tile({ type: \"outline\" });\n svg.plot({ type: \"prop\", data: world, var: \"pop\", fill: \"#38896F\", k: 25 });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"Note that with the draw() function, the projection is automatically set to \"mercator\" if you use a tile layer. So you don't need to define the projection. The function takes care of that for you.","pinned":false,"hidden":false,"mode":"md"},{"id":183,"value":"viz.draw({\n params: {\n zoomable: true,\n responsive: false,\n width: 500,\n margin: [-50, 0, -150, 0]\n },\n layers: [\n { type: \"tile\" },\n { type: \"prop\", data: world, var: \"pop\", fill: \"#38896F\", k: 25 }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"## 7 - projection: \"none\"","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"If you don't define a projection, layers are displayed as they are. In this case, you must specify the display domain and you can't use the outline and graticule layers. ","pinned":true,"hidden":false,"mode":"md"},{"id":198,"value":"{\n let svg = viz.create({\n width: 600,\n responsive: false,\n domain: world\n });\n svg.plot({ type: \"path\", data: world, fill: \"#38896F\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"With the draw function, the domain is automatically calculated according to the layers to be displayed.","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"viz.draw({\n params: { width: 600, responsive: false },\n layers: [{ type: \"path\", data: world, fill: \"#38896F\" }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"## 8 - proj4js","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"[`Proj4js`](https://github.com/proj4js/proj4js) is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations. Originally a port of PROJ (then known as PROJ.4) and GCTCP C (Archive) it is a part of the MetaCRS group of projects. Using this library, you can use any projection system just like in a GIS. ","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"In `geoviz`, we proceed as follows: ","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"lambert93 = viz.tool.proj4d3(\n await require(\"proj4\"),\n `+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"{\n let svg = viz.create({\n projection: lambert93,\n domain: france,\n responsive: false,\n width: 500\n });\n svg.plot({ type: \"path\", data: france, fill: \"#38896F\" });\n svg.plot({ type: \"header\", text: \"LAMBERT-93\", fill: \"#38896F\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"## 9 - Tissot's indicatrix","pinned":false,"hidden":false,"mode":"md"},{"id":387,"value":"A good way to visualize projection-related deformations is to use the Tissot's indicatrix. In geoviz, all you have to do is use the tissot function and, if necessary, set the step. If the circles remain round but have different surfaces, then the projection is conformal. If the circles are deformed but all have the same area, then the projection is equivalent. If the circles are unshaped and do not all have the same area, the projection is said to be aphylactic. ","pinned":false,"hidden":false,"mode":"md"},{"id":389,"value":"{\n let svg = viz.create({\n projection: viz.proj.geoNaturalEarth1().rotate([longitude, 0]),\n width: 600,\n responsive: false\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({\n type: \"tissot\",\n fill: \"#38896F\",\n step: 25\n });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"## 10 - project and unproject","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"`geoviz` is designed to work with geoJSON files in latitude and longitude. Sometimes, however, it may be more practical to project geometries before representing them. In this case, you can use the tool.project() function","pinned":false,"hidden":false,"mode":"md"},{"id":327,"value":"worldNaturalEarth1 = viz.tool.project(world, {\n projection: d3.geoNaturalEarth1(),\n width: 100\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"Let's see new coordinates","pinned":false,"hidden":false,"mode":"md"},{"id":333,"value":"Inputs.table(worldNaturalEarth1.features.map((d) => d.geometry))","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"To display it with `geoviz`, just set use the coords to `\"svg\"`","pinned":false,"hidden":false,"mode":"md"},{"id":342,"value":"viz.plot({\n type: \"path\",\n coords: \"svg\",\n data: worldNaturalEarth1,\n fill: \"#38896F\"\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"The reverse operation can be performed with the tool.unproject() function","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"world2 = viz.tool.unproject(worldNaturalEarth1, {\n projection: d3.geoNaturalEarth1()\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"viz.plot({\n type: \"path\",\n coords: \"geo\",\n data: world2,\n fill: \"#38896F\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {\n style,\n world,\n disclaimer,\n france,\n europe,\n viz\n} from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}