2b:null 2c:["$","title",null,{"children":"Learning D3 - Day 3 | Shaun Lebron | Observable"}] 31:[] 2f:{"id":"efa505e7f248bdae","slug":"learning-d3-day-3","title":"Learning D3 - Day 3","thumbnail":"2941f7fd63b639d3d2851a80dfe6c064bfe400997a2200ddb87e0cacfe4cec40","access_level":"public","create_time":"$D2018-05-03T01:05:57.351Z","update_time":"$D2018-05-17T01:20:31.955Z","view_time":null,"first_public_time":"$D2018-05-03T05:09:17.887Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":"starter_2024"},"version":357,"publish_version":357,"role":null,"authored":false,"authors":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null}],"members":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Learning D3 - Day 3","cells":[{"id":0,"value":"md`# Learning D3 - Day 3\n\nUsing [this](https://bl.ocks.org/mbostock/4180634) as reference to learn how to draw maps.\n\n## Getting shape data\n\n

\nPulling world geometry from [world-atlas](https://github.com/topojson/world-atlas).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`## Extracting drawable shapes\n\n

\nWe use a \\`-Topo\\` naming convention to denote shapes that can be drawn by d3.geo. We create these shapes using \\`topojson\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"landTopo = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"countryTopos = topojson.feature(world, world.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"function countryTopoById(id) {\n return countryTopos.filter(c => c.id == id)[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"botswanaTopo = countryTopoById(72)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"countryBordersTopo = topojson.mesh(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`## Drawing\n

\nBefore we can draw our shapes, we have to map the topo coordinates from ${tex`(lat,lon)`}) to screen coordinates ${tex`(x,y)`}—by choosing one of many kinds of projections.\n\nSince we want to draw them in SVG, the projected shapes must them be formatted in a way that SVG understands. Thus, we create a path string generator that does both the _projecting_ and the _formatting_ in one step.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"mapWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"mapHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"mapPad = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"projection = d3.geoNaturalEarth1()\n .fitExtent([\n [mapPad, mapPad], // top left\n [mapWidth - mapPad, mapHeight - mapPad] // bottom right\n ],\n {type: \"Sphere\"}) // shape to fit\n .precision(0.1) // controls the smoothness of curves","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"