A globe that spins. Uses world-110m from TOPOJSON World Atlas. Inspired by This Is a Globe.
This was the first stop along the way for creating a more involved map. I was so amazed at how little code was required to get this to show up.
forked from curran‘s block: Spinning Globe
forked from curran‘s block: Simplified Globe
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//unpkg.com/topojson-client@3"></script>
<script src="//unpkg.com/topojson-simplify@3"></script>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
const path = d3.select('svg').append('path');
const projection = d3.geoOrthographic();
const geoPath = d3.geoPath().projection(projection);
d3.json('world-110m.json', (error, world) => {
const presimplified = topojson.presimplify(world);
const simpleWorld = topojson.simplify(presimplified, 11);
const land = topojson.feature(simpleWorld, simpleWorld.objects.land);
console.log(JSON.stringify(land))
d3.timer(t => {
projection.rotate([t * 0.05, Math.sin(t * 0.0005) * 45]);
path.attr('d', geoPath(land));
});
});
</script>
</body>