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.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></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 land = topojson.feature(world, world.objects.land);
d3.timer(t => {
projection.rotate([t * 0.05, Math.sin(t * 0.0005) * 45]);
path.attr('d', geoPath(land));
});
});
</script>
</body>