Published
Edited
May 17, 2018
1 fork
world = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
landTopo = topojson.feature(world, world.objects.land)
countryTopos = topojson.feature(world, world.objects.countries).features
function countryTopoById(id) {
return countryTopos.filter(c => c.id == id)[0];
}
botswanaTopo = countryTopoById(72)
countryBordersTopo = topojson.mesh(world, world.objects.countries)
projection = d3.geoNaturalEarth1()
.fitExtent([
[mapPad, mapPad], // top left
[mapWidth - mapPad, mapHeight - mapPad] // bottom right
],
{type: "Sphere"}) // shape to fit
.precision(0.1) // controls the smoothness of curves
path = d3.geoPath(projection)
svg`
<svg width=${mapWidth} height=${mapHeight}>
<path d="${path({type: "Sphere"})}" fill="none" stroke="#000"></path>
<path d="${path(landTopo)}" fill="rgba(0,200,50,0.6)"></path>
<path d="${path(countryBordersTopo)}" fill="none" stroke="#fff" stroke-width="0.5px"></path>
<path d="${path(botswanaTopo)}" fill="rgba(0,123,230,0.5)"></path>
</svg>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
