Published
Edited
Dec 2, 2021
1 star
{
const height = width;
const context = DOM.context2d(width, height);
// create a rotated projection (centered on the Ferro meridian)
const projection = d3
.geoMercator()
.rotate([18.160792, 0])
.clipExtent([[-1, -1], [width + 1, height + 1]])
.fitWidth(width, sphere);
let path = d3.geoPath(projection, context);
// draw landforms using the rotated projection
context.clearRect(0, 0, width, height);
context.beginPath(), path(land), context.fill();
// then draw the graticule and meridian using an unrotated projection
path = d3.geoPath(projection.rotate([0, 0]), context);
context.lineWidth = 0.75;
context.strokeStyle = "#aaa";
context.globalAlpha = 0.3;
context.beginPath(), path(graticule), context.stroke();
context.lineWidth = 2.0;
context.beginPath(), path(equator), context.stroke();
context.globalAlpha = 0.8;
context.strokeStyle = "#e00";
context.beginPath(), path(meridian), context.stroke();
return context.canvas;
}
graticule = d3.geoGraticule10()
equator = ({
type: "LineString",
coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]
})
meridian = ({
type: "LineString",
coordinates: [[0, 90], [0, 0], [0, -90]]
})
sphere = ({ type: "Sphere" })
land = topojson.feature(world, world.objects.land)
world = fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json").then(response => response.json())
topojson = require("topojson-client@3")
d3 = require("d3-geo@1")
height = width
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.
