29:null 2a:["$","title",null,{"children":"Tutorial: show a map of Bolivia | Sylvain Lesage | Observable"}] 2f:Taf8,md`## Download the data We download the data of departments from GeoBolivia: - go to the [GeoServer module](https://geo.gob.bo/geoserver) - clic on [Previsualización de capas](https://geo.gob.bo/geoserver/web/?wicket:bookmarkablePage=:org.geoserver.web.demo.MapPreviewPage) - search for departamentos - on the row of fondos:departamento1, use the selectbox to pick "WFS -> GeoJSON" - copy the URL: https://geo.gob.bo/geoserver/fondos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=fondos:departamento1&maxFeatures=50&outputFormat=application%2Fjson - in a terminal (we assume you use GNU/Linux), use wget to download it, replacing maxFeatures=50 by maxFeatures=10000: wget -O /tmp/departamentos.geojson "https://geo.gob.bo/geoserver/fondos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=fondos:departamento1&maxFeatures=10000&outputFormat=application%2Fjson" The file /tmp/departamentos.geojson weights 13M. It's very heavy for only 9 polygons. For that reason, we need to simplify the geometry in order to use it in a web notebook. We may verify that its SRS (Spatial Reference System) is EPSG:4326, also known as WGS84, expressed in decimal degrees. ## Prepare the data We use the following command to simplify the geometry, using a precision of 0.02º of latitud and longitud, which gives an good compromise between a sufficient precision and a low weight (155KB) ogr2ogr -f GeoJSON -simplify 0.02 /tmp/departamentos_14polygons_simplified_002.geojson /tmp/departamentos.geojson Note that the operation also changed the representation, from MULTIPOLYGON to POLYGON. The list of polygons is given by: ogrinfo -al -geom=NO /tmp/departamentos_14polygons_simplified_002.geojson and it shows 14 polygons instead of the 9 departments, because it includes some lakes, that the value 0 for the CODE_DEP attribute. We remove them with: ogr2ogr -f GeoJSON -where "COD_DEP != '0'" /tmp/departamentos_simplified_002.geojson /tmp/departamentos_14polygons_simplified_002.geojson Note that the file is now only 112KB. We can load the file /tmp/departamentos_simplified_002.geojson to http://geojson.io to verify that everything is OK. In order to use the file in the Observable notebooks, we [versionned it in a git repository](https://github.com/severo/data/blob/master/20180331/departamentos_simplified_002.geojson), and it's available at the following address: https://raw.githubusercontent.com/severo/data/master/20180331/departamentos_simplified_002.geojson. ## Map First, we load the file and make it available through the departamentos variable. Note that we need to import the d3 library, but that the order is not important, see the last block. `30:[] 2d:{"id":"8a826ccb592cbea9","slug":"tutorial-show-a-map-of-bolivia","title":"Tutorial: show a map of Bolivia","thumbnail":"22e3869069ad6d149f29a1a4fb76d1b23f2b2745e7c4ab4265c2d281c3f3f68d","access_level":"public","create_time":"$D2018-03-31T19:31:13.738Z","update_time":"$D2018-08-12T19:01:29.743Z","view_time":null,"first_public_time":"$D2018-04-01T00:39:15.660Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":159,"publish_version":159,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"2d81fbab1f65b674","slug":"bolivia","title":"Bolivia","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"title":"Tutorial: show a map of Bolivia","cells":[{"id":0,"value":"md`# Tutorial: show a map of Bolivia`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"{\n const width = 400;\n const height = 400;\n \n const svg = d3.select(DOM.svg(width, height));\n \n const projection = d3.geoMercator()\n .fitSize([width, height], departamentos)\n\n const path = d3.geoPath()\n .projection(projection);\n\n svg.append(\"path\")\n .attr(\"d\", path(departamentos))\n .style(\"fill\", \"#FFEC84\")\n .style(\"stroke\", \"white\");\n \n return svg.node(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"departamentos = d3.json(\"https://raw.githubusercontent.com/severo/data/master/20180331/departamentos_simplified_002.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`Now we will show the 9 departments of Bolivia on a map, using d3. For this, we need to define a projection, in this case we use the Mercator projection.\n\nNote that we use the fitSize function, [introduced in d3v4](https://stackoverflow.com/a/40940028/7351594), to zoom on Bolivia.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"chart = {\n const width = 400;\n const height = 400;\n \n const svg = d3.select(DOM.svg(width, height));\n \n const projection = d3.geoMercator()\n .fitSize([width, height], departamentos)\n\n const path = d3.geoPath()\n .projection(projection);\n\n svg.append(\"path\")\n .attr(\"d\", path(departamentos))\n .style(\"fill\", \"#FFEC84\")\n .style(\"stroke\", \"white\");\n \n return svg.node(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## [Load d3]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3', 'd3-geo-polygon', 'd3-geo-projection')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"