File | Date | Author | Commit |
---|---|---|---|
README.md | 2022-12-07 |
![]() |
[407feb] Update README.md |
const height = 700
const scl = Math.min(width, height)/2.5; // scale globe
const tRotation = 30000; //30s per rotation
const svg = d3.select(DOM.svg(width, height))
// map projection
const projection = d3.geoOrthographic()
.scale(scl)
.translate([ width/2, height/2 ]);
// path generator
const path = d3.geoPath()
.projection(projection);
// pause button
var rotationOn = true;
svg.append("text")
.attr("x", width/2)
.attr("y", height - 10)
.text("PAUSE")
.attr("text-anchor", "middle")
.style("font-family", "sans-serif")
.on("mouseover", function() { d3.select(this).style("text-decoration", "underline") })
.on("mouseout", function() { d3.select(this).style("text-decoration", "none") })
.on("click", function() {
rotationOn = !rotationOn;
d3.select(this).text(rotationOn ? "PAUSE" : "PLAY")
})
// add circle for background
var bgCircle = svg.append("circle")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", projection.scale())
.style("fill", "#bfd7e4")
// create one path per TopoJSON feature
svg.append("path")
.datum(topojson.feature(world, world.objects.countries))
.attr("d", path)
.style("fill", "#eaeaea")
.style("stroke", "#ccc")
.style("stroke-width", "0.3px")
// vars for timer
var tNew, dt, steps, pos, tOld, oldPos;
tOld = 0;
oldPos = 0;
// start timer
d3.timer(myTimer);
// function that rotates the earth
function myTimer(now) {
if (rotationOn) {
tNew = now;
dt = tOld - tNew;
steps = dt * 360 / tRotation;
pos = oldPos - steps //the earth rotates towards the east
if (pos <= -180) {pos = pos+360}
projection.rotate([pos, 0]);
svg.selectAll("path").attr("d", path)
tOld = tNew;
oldPos = pos;
}
else {
tOld = now;
}
}
return svg.node()
}