Public
Edited
Dec 19, 2022
projection = d3.geoNaturalEarth1()
map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context).pointRadius(1);
context.beginPath();
path(outline);
context.fillStyle = "#fff";
context.fillRect(0, 0, width, height);
context.strokeStyle = "white";
geojson.features.forEach((feature, idx) => {
context.beginPath();
context.fillStyle = color(idx);
path(feature);
context.fill();
context.stroke();
});
context.beginPath();
path(outline);
context.strokeStyle = "#ccc";
context.stroke();
yield context.canvas;
}
color = d3
.scaleSequential(d3.interpolateYlOrRd)
.domain([0, geojson.features.length])
geojson = ({
type: "FeatureCollection",
features: coords.map(([lat, lon]) => {
const lon0 = lon - lonRes / 2;
const lon1 = lon + lonRes / 2;
const lat0 = lat - latRes / 2;
const lat1 = lat + latRes / 2;
return {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[lon0, lat0],
[lon0, lat1],
[lon1, lat1],
[lon1, lat0],
[lon0, lat0]
]
]
}
};
})
})
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
coords = d3.cross(latitudes, longitudes)
longitudes = d3.range(-180 + lonRes / 2, 180, lonRes)
lonRes = 5
latitudes = d3.range(-90 + latRes / 2, 90, latRes)
latRes = 2.5
import { outline, graticule } from "@d3/world-map"
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.
