Paleogeography Maps: Drifting ContinentsBreathing Earth 🌍Video reprojection on a mapAnalemmaGreat circle: shortest distance between two locations on Earth 🌏Dynamic Peirce quincuncial projection with great-circle pathInterrupted maps (various projections)Interrupted Transverse Mercator ProjectionInterrupted Transverse Sinusoidal ProjectionInterrupted Transverse Hammer Projection (vs Transverse Sinusoidal)Dodecahedral projectionIcosahedral projectionIcosahedral raster reprojectionIcosahedral raster reprojection (elevation)🌡 Temperature Contour Density Map🧭 Earthʼs Magnetic Field DeclinationSVG Map with d3.contours()Map with Contours and Contour LabelsMap with Graticule Labels
Peirce quincuncial projection and great-circle path
// We don't display this map
map = {
const context = DOM.context2d(width, height);
const projection = d3.geoPeirceQuincuncial().fitSize([width, height], {type: "Sphere"}).precision(0.1);
const path = d3.geoPath(projection, context);
path.pointRadius(0.8);
context.beginPath(), path(graticule), context.strokeStyle = "#ddd", context.stroke();
context.beginPath(), path(land), context.fillStyle = color_land, context.fill();
context.beginPath(), path(countries), context.strokeStyle = color_boundaries, context.stroke();
context.beginPath(), path(add_lakes), context.fillStyle = color_lakes, context.fill();
context.beginPath(), path(routes), context.strokeStyle = color_routes, context.point= "1", context.stroke();
context.canvas.style.display="none";
return context.canvas;
}
d3 = require("d3@5", "d3-geo@1", "d3-geo-projection@2")
graticule = d3.geoGraticule10()
world = FileAttachment("world-50m.json").json()
land = topojson.feature(world, world.objects.land)
countries = topojson.feature(world, world.objects.countries)
lakes = FileAttachment("world-110m_withlakes.topo.json").json()
add_lakes = topojson.feature(lakes, lakes.objects.lakes)
routes = FileAttachment("great_circle.topo.json").json()
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.
