2b:["$","title",null,{"children":"Let's make an extruded map | Nicolas Lambert | Observable"}] 30:[] 2e:{"id":"e6e611e5e574c6c1","slug":"lets-make-an-extruded-map","title":"Let's make an extruded map","thumbnail":"e426f26f6aabd5d8038d814e22caa8136492d46283fd5666b7431cf4a428dcba","access_level":"public","create_time":"$D2021-07-27T16:52:12.568Z","update_time":"$D2021-07-29T07:54:27.373Z","view_time":null,"first_public_time":"$D2021-07-29T07:52:29.638Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":474,"publish_version":474,"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":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Let's make an extruded map","cells":[{"id":0,"value":"# Let's make an extruded map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":322,"value":"html`

Population density, 2019

On this map, the height of the countries is proportional to their population density. By extension, their volume represents the number of inhabitants.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"**1. Data Import & handling**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":117,"value":"world = d3.json(\n \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/World/world_countries.topojson\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"countries = {\n let result = { type: \"FeatureCollection\", features: [] };\n topojson\n .feature(world, world.objects.world_countries_data)\n .features.filter((d) => d.properties.PopTotal != null)\n .forEach((e) => {\n result.features.push({\n type: e.type,\n properties: {\n id: e.properties.ISO3,\n name: e.properties.NAMEen,\n pop: e.properties.PopTotal,\n area: (d3.geoArea(e) / 12.56637) * 510072000\n },\n geometry: e.geometry\n });\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"**2. deckgl **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":421,"value":"col = \"#bc8bd9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"params = ({\n data: countries,\n opacity: 1,\n stroked: false,\n filled: true,\n extruded: true,\n wireframe: true,\n fp64: true,\n getElevation: (f) => (f.properties.pop / f.properties.area) * 1500,\n getFillColor: Object.values(d3.color(col)).slice(0, -1),\n getLineColor: (f) => [255, 255, 255],\n pickable: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"layer = new deck.GeoJsonLayer(params)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"deckgl = {\n return new deck.DeckGL({\n container,\n initialViewState: {\n latitude: 40,\n longitude: 30,\n zoom: 3,\n maxZoom: 3,\n pitch: 60\n },\n controller: true,\n getTooltip\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":363,"value":"deckgl.setProps({ layers: [layer] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":410,"value":"getTooltip = {\n return ({ object }) => {\n return (\n object &&\n `${object.properties.name}\nPopulation: ${Math.round(object.properties.pop / 1000000)} million inh.\nArea: ${Math.round(object.properties.area / 1000)} thousands km²`\n );\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"** Dependencies**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":121,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"deck = require.alias({\n // optional dependencjei\n h3: {},\n s2Geometry: {}\n})(\"deck.gl@latest/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body" 2a:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/lets-make-an-extruded-map;307;"}