Exploring the politics of a digitally networked world.
map = {
// This is changed in React APP
const ctx = this ? this.getContext("2d") : DOM.context2d(410, 410);
// This is changed in React APP
const render = function() {
const path = d3.geoPath(projection, ctx);
const rotate = projection.rotate();
const backpath = d3.geoPath(
backprojection.rotate([rotate[0] + 180, -rotate[1], -rotate[2]]),
ctx
);
// ctx.clearRect(0, 0, 400, 400);
// Light gray tint for entire globe
ctx.beginPath(),
path({ type: "Sphere" }),
(ctx.fillStyle = '#fcfcfc'),
ctx.fill();
// Land reflection on back of globe
ctx.beginPath(), backpath(land), (ctx.fillStyle = backColor), ctx.fill();
// Graticule reflection on back of globe
ctx.beginPath(),
backpath(d3.geoGraticule()()),
(ctx.lineWidth = .1),
(ctx.strokeStyle = '#97b3f6'),
ctx.stroke();
// Graticule on front of globe
ctx.beginPath(),
path(d3.geoGraticule()()),
(ctx.lineWidth = .1),
(ctx.strokeStyle = '#1046c6'),
ctx.stroke();
// Land on front of globe
ctx.beginPath(),
path(land),
(ctx.fillStyle = frontColor),
ctx.fill(),
(ctx.globalAlpha = 0.9),
(ctx.lineWidth = 0.5),
(ctx.strokeStyle = backColor),
ctx.stroke(),
(ctx.globalAlpha = 1);
// I'm not sure what this does
ctx.beginPath(),
path({ type: "Sphere" }),
(ctx.lineWidth = .1),
(ctx.strokeStyle = frontColor),
ctx.stroke();
};
// no need to specify render() here, it's taken care of by the loop below.
ctx.canvas.inertia = d3.geoInertiaDrag(
d3.select(ctx.canvas),
null,
projection
);
const timer = d3.timer(function() {
var rotate = projection.rotate();
rotate[0] += velocity * 20;
projection.rotate(rotate);
render();
});
invalidation.then(
() => (
timer.stop(), (timer = null), d3.select(ctx.canvas).on(".drag", null)
)
);
return ctx.canvas;
}
projection = d3
.geoOrthographic()
.rotate([95, -26, 10])
.precision(0.1)
.fitExtent([[5, 5], [400, 400]], { type: "Sphere" })
backprojection = d3.geoProjection((a,b) => {
return d3.geoOrthographicRaw(-a,b);
})
.clipAngle(90)
.translate(projection.translate())
.scale(projection.scale())
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.
