31:[] 2f:{"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"},{"id":7,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":161,"value":"landTopo = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"countryTopos = topojson.feature(world, world.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"function countryTopoById(id) {\n return countryTopos.filter(c => c.id == id)[0];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"botswanaTopo = countryTopoById(72)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"countryBordersTopo = topojson.mesh(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":58,"value":"mapWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"mapHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"mapPad = 50","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":30,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}