2e:["$","title",null,{"children":"Handle geometries | Nicolas Lambert | Observable"}] 33:[] 31:{"id":"2936f9c2a8324d98","slug":"handle-geometries","title":"Handle geometries","thumbnail":"7ea749b0ce126ff5bc2ce47907c483e27e6b7e6f42769da780cd3133dd26af65","access_level":"public","create_time":"$D2023-12-14T13:35:12.323Z","update_time":"$D2026-09-04T11:55:53.514Z","view_time":null,"first_public_time":"$D2023-12-15T12:20:51.814Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":336,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bfb3f0e24e42a069","slug":"geoviz","title":"geoviz","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Handle geometries","cells":[{"id":0,"value":"# Handle geometries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"The `geoviz` library provides a number of tools to help you handle geometries. Theses functions are grouped together in viz.tool.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"viz.tool","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Find below somme examples. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"## 1 - merge","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"Making a thematic map often consists in linking a basemap and an attribute data table. This *merge* operation is often the starting point of any map. In `geoviz`, you can use the tool.merge() function. The function takes 4 arguments : geom, geom_id, data and data_id. If data_id and geom_id are the same, you cane use id.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"let result = viz.tool.merge({\n geom: geometries,\n geom_id: \"ISO3_CODE\",\n data: stats,\n data_id: \"countrycode\"\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"the function returns a new feature collection containing both statistical data and geometries. It also returns a diagnostic to assess the quality of the join. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"To retrieve the new geojson, just write:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"let world = result.featureCollection","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"## 2 - featurecollection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"tool.featurecollection() is a smart tool which lets you reconstruct a feature collection from geometries, features or an array containing latitudes and longitudes. Find bellow some examples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"viz.tool.featurecollection(world.features)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viz.tool.featurecollection(world.features[0])","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"viz.tool.featurecollection(world.features[0].geometry)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viz.tool.featurecollection(citieslatlong, { lat: \"lat\", lon: \"lng\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"## 3 - geotable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"Because of their structure, geoJON files are often quite complicated to handle. The tool.geotable() function converts them into a flat format. Simply specify the field name in which you wish to store geometries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"world_table = viz.tool.geotable(world)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"Inputs.table(world_table)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"In this format, geoJSON is much easier to modify. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"let world_table2 = world_table.map((d) => ({\n id: d.CNTR_ID,\n name: d.CNTR_NAME,\n pop: d.pop,\n gdp: d.gdp,\n gdppc: d.gdp / d.pop,\n geom: d.geometry\n}))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"You can now rebuild the feature collection with the tool.featurecollection() function seen above. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"let world2 = viz.tool.featurecollection(world_table2, { geometry: \"geom\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"## 4 - rewind","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"A recurrent problem with geoJSON files is that they are sometimes written in the wrong way. As a result, the display goes wrong. The tool.rewind() function can be used to solve this problem. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"Here's an example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"let svg = viz.create({\n domain: usa,\n projection: d3.geoEquirectangular()\n });\n svg.path({ data: usa, fill: \"#38896F\" });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"You can fix it like this","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"const usa2 = viz.tool.rewind(usa);\n let svg = viz.create({ domain: usa2, projection: d3.geoEquirectangular() });\n svg.path({ data: usa2, fill: \"#38896F\" });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"## 5 - centroid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"The tool.centroid function calculates polygon centroids. In the case of multi-polygons, the point is set at the center of the largest polygon. To avoid this, specify largest = false. If your basemap is not in longitude latitude, specify latlong = false.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"viz.tool.centroid(world2)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"## 6 - Project and unproject geometries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"let worldNaturalEarth = viz.tool.project(world2, {\n projection: d3.geoNaturalEarth1()\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"Let's see new coordinates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"Inputs.table(\n worldNaturalEarth.features.map((d) => d.geometry),\n { width: 500 }\n)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"To display it with `geoviz`, just set use the coords to `\"svg\"`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"let svg = viz.create({\n domain: worldNaturalEarth\n });\n svg.path({ datum: worldNaturalEarth, fill: \"#38896F\", coords: \"svg\" });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"The reverse operation can be performed with the tool.unproject() function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"viz.tool.unproject(worldNaturalEarth, { projection: d3.geoNaturalEarth1() })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"## 7 - Simplify geometries (and other 🪄 stuffs)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"See: https://observablehq.com/@neocartocnrs/dynamic-simplify?collection=@neocartocnrs/geoviz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"import {\n style,\n disclaimer,\n stats,\n geometries,\n citieslatlong,\n usa,\n viz\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 32:"$31:body" 2d:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/handle-geometries;307;"}