31:[{"id":"7d645ec0f1f029c1a948cbf5a1e9c2288a3e7e564bd5b1bb7e79e3625fdbf067b191232c5f72fb27def532d0b19083843b3daaf67a7d827bca0b75efe476ee0f","href":"https://static.observableusercontent.com/files/7d645ec0f1f029c1a948cbf5a1e9c2288a3e7e564bd5b1bb7e79e3625fdbf067b191232c5f72fb27def532d0b19083843b3daaf67a7d827bca0b75efe476ee0f","name":"CNTR_RG_03M_2024_4326.geojson","type":"application/geo+json","lastModified":1772035950334.685,"size":14339267}] 2f:{"title":"Simplify","cells":[{"id":0,"value":"# Simplify","pinned":false,"hidden":false,"mode":"md"},{"id":448,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"Here is a world countries base map from [Eurostat](https://ec.europa.eu/eurostat/fr/web/gisco/geodata/administrative-units/countries) website.","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"let file = FileAttachment(\"CNTR_RG_03M_2024_4326.geojson\")","pinned":true,"hidden":true,"mode":"js"},{"id":9,"value":"let cntr_rg_03m_2024_4326 = file.json()","pinned":true,"hidden":true,"mode":"js"},{"id":180,"value":" const size = (await file.blob()).size;\n display(md`It is very detailed and weighs ${(size / 1024 / 1024).toFixed(\n 2\n )} Mo.`);\n","pinned":false,"hidden":false,"mode":"js"},{"id":67,"value":"When zooming, it is **quite slow** because there are so **many points** to move.","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"let svg = viz.create({ projection: \"EqualEarth\", zoomable: true });\n let a = await svg.path({\n data: cntr_rg_03m_2024_4326,\n fill: \"#38896F\"\n });\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":95,"value":"## Static simplification","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"In `geoviz`, you can automatically simplify it by setting the attribute `simplify: true`. Doing so simplifies the base map, making it lighter without significantly altering its appearance. And **zooming is much faster**.","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"To fix display issues related to geometries, you have several parameters at your disposal. First, `rewind = true` allows you to resolve rewind-related problems. In addition, you can use `rewindPole = true` to specifically reverse polygons near the poles. You can also clip polygons using the outline with the `clipOutline` parameter.","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"let rewind = view(Inputs.toggle({ label: \"rewind\", value: true }))","pinned":false,"hidden":false,"mode":"js"},{"id":14,"value":"let svg = viz.create({ projection: \"EqualEarth\", zoomable: true });\n let a = await svg.path({\n data: cntr_rg_03m_2024_4326,\n simplify: true,\n rewind: rewind,\n fill: \"#38896F\"\n });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":76,"value":"You can also assign any value to control your level of simplification. Like this : `simplify: a number`","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"let svg = viz.create({ projection: \"EqualEarth\", zoomable: true });\n let a = await svg.path({\n data: cntr_rg_03m_2024_4326,\n simplify: 0.001,\n fill: \"#38896F\",\n rewind: true\n });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":93,"value":"## Dynamic simplification","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"You can specify `simplify : [val1, val2]` to have a level of simplification that vary according the zoom level. The fisrt value allows to simplify the basemap. This is how it will appear when we zoom in the most. The second value applies a second simplification. This is how the base map will appear before zooming in. These two values allow for two successive simplifications. They represent two states of the base map corresponding to the smallest and largest zoom levels. Between these two states, the base map takes on an intermediate appearance.","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"let svg = viz.create({ projection: \"EqualEarth\", zoomable: true });\n await svg.path({\n data: cntr_rg_03m_2024_4326,\n simplify: [0.05, 0.01],\n fill: \"#38896F\",\n rewind: true\n });\n svg.header({\n text: \"🪄 As you zoom in or out, the map is dynamically simplified 🪄\"\n });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":119,"value":"It works also with `zoomable:\"versor\"` !","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"let svg = viz.create({ projection: \"EqualEarth\", zoomable: \"versor\" });\n await svg.path({\n data: cntr_rg_03m_2024_4326,\n simplify: [0.05, 0.01],\n fill: \"#38896F\",\n rewind: true\n });\n svg.header({\n text: \"🪄 As you zoom in or out, the map is dynamically simplified 🪄\"\n });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":142,"value":"## Other remarks","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"### 1- Async","pinned":false,"hidden":false,"mode":"md"},{"id":234,"value":"The simplification function is asynchronous, so don’t forget to use `await`.","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"### 2 - Plot","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"Simplification works with the `plot` function for all layer types based on the path mark (e.g., `\"choro\"`, `\"typo\"`, etc.).","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"let svg = viz.create({\n projection: \"Peirce\",\n zoomable: \"versor\",\n width: 700\n });\n await svg.plot({\n type: \"typo\",\n data: world,\n var: \"region\",\n simplify: [1, 0.1],\n fill: \"#38896F\",\n clipOutline: 0.01,\n tip: true\n });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":352,"value":"### 3 - Draw","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"All of this also works with the draw() function, which is similar to how the Bertin library operates.","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"viz.draw({\n params: { projection: \"Peirce\", width: 700, zoomable: \"versor\" },\n layers: [\n { type: \"outline\" },\n {\n type: \"graticule\",\n stroke: \"white\",\n step: 20,\n strokeWidth: 1.1,\n strokeDasharray: [3, 5]\n },\n {\n type: \"choro\",\n data: world,\n var: \"gdppc\",\n simplify: [1, 0.1],\n clipOutline: 0.01,\n tip: true\n }\n ]\n})","pinned":true,"hidden":false,"mode":"js"},{"id":362,"value":"### 4 - cleangeometry","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"Simplification and geometry-correction operations are also available outside of the drawing functions. You can use them with `tool.cleanGeometry()` using the same parameters.","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"const newbasemap = viz.tool.cleangeometry(world, { rewind: true, simplify: 0.1 })","pinned":true,"hidden":true,"mode":"js"},{"id":80,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"import { style, world, disclaimer, viz } from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":41,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}