globe = {
var c = DOM.context2d(s, s);
var canvas = c.canvas;
var projection = d3.geoOrthographic().scale(radius).translate([s / 2, s / 2]);
projection.rotate([rotation, 0]);
var path = d3.geoPath(projection, c);
// Draw the seas.
c.lineWidth = 1.5;
c.fillStyle = "aliceblue";
c.beginPath(), c.arc(s / 2, s / 2, radius, 0, 2 * Math.PI), c.fill(), c.stroke();
// Draw the land.
c.lineWidth = 0.35;
c.fillStyle = "mintcream";
c.beginPath(), path(world), c.fill(), c.stroke();
// Draw the earthquakes.
let color = d3.color(quakeColor);
color.opacity = 0.25;
c.fillStyle = color;
path.pointRadius(quakeRadius);
quakes.features.forEach(quake => {c.beginPath(), path(quake), c.fill();});
return canvas;
}
quakeRadius = {
const scale = d3.scaleSqrt().domain([0, 100]).range([0, quakeSize]);
return function(quake) {
return scale(Math.exp(quake.properties.mag));
}
}
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.
