map = {
const context = this ? this.getContext("2d") : DOM.context2d(width , width - (width/2));
//https://chartio.com/resources/tutorials/how-to-resize-an-svg-when-the-window-is-resized-in-d3-js/
const render = function() {
const path = d3.geoPath(projection, context);
const rotate = projection.rotate();
const backpath = d3.geoPath(backprojection.rotate([rotate[0]+180, -rotate[1], -rotate[2]]), context);
context.clearRect(-0, -0, width, width);
//
context.beginPath(), path({type:"Sphere"}),
context.fillStyle = '#fcfcfc', context.fill();
//
context.beginPath(), backpath(land),
context.fillStyle = backColor, context.fill();
//
context.beginPath(), backpath(d3.geoGraticule()()),
context.lineWidth = .1, context.strokeStyle = '#aaa', context.stroke();
//
context.beginPath(), path(d3.geoGraticule()()),
context.lineWidth = .2, context.strokeStyle = '#111', context.stroke();
//Globe Land
context.beginPath(), path(land),
context.globalAlpha = 0.9,
context.lineWidth = 1, context.strokeStyle = '#000000', context.stroke(),
context.fillStyle = frontColor, context.fill(),
context.globalAlpha = 1;
//Globe Land projected (outside surface)
//Atmopsher blue halo
context.beginPath(), path({type: "Sphere"}),
context.lineWidth = 15, context.strokeStyle = "rgba(80,205,255,0.2)", context.stroke();
//Globe outline
context.beginPath(), path({type: "Sphere"}),
context.lineWidth = 2, context.strokeStyle = "rgba(0,0,0,0.9)", context.stroke();
}
// no need to specify render() here, it's taken care of by the loop below.
context.canvas.inertia = d3.geoInertiaDrag(d3.select(context.canvas), null, projection);
const timer = d3.timer(function() {
var rotate = projection.rotate();
rotate[0] += velocity * 10;
projection.rotate(rotate);
render();
});
invalidation.then(() => (timer.stop(), timer = null, d3.select(context.canvas).on(".drag", null)));
return context.canvas;
}
atmosphearprojection = {
var raw = d3.geoSatelliteRaw(-1 * projection.distance(), projection.tilt() * Math.PI / 180)
return d3.geoProjection(function(a,b) {
return raw(-a,b);
})
.clipAngle(180 - projection.clipAngle())
//scale & position, default [5, 5] [width-5, width-5]
.fitExtent([[frameoffsetx, frameoffsety], [5 , 5 - (width/2)]], {type: "Sphere"});
}
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.
