Maps — and other representations of the world.
function walkOnSpheres(point, steps = 3) {
let closest;
while (steps--) {
// Find the closest point in the reference shapes (uses d3-geo-voronoi).
closest = vertices[voronoi.find(...point)];
// Pick a point at random on the circle centered on point
// and with a radius extending to closest. For this, we
// define a rotation centered on that point, with a random
// angle, and apply it to the closest point (uses attitude).
point = attitude.axis(point).angle(Math.random() * 360)(closest);
}
return closest;
}
color = d3.scaleOrdinal(d3.shuffle(d3.quantize(d3.interpolateSpectral, 60)))
d3 = require("d3@7", "d3-geo-projection@4", "d3-geo-voronoi@2", "d3-geo-polygon@1.9")
attitude = require("attitude").then((d) => d())
voronoi = d3.geoVoronoi(vertices)
vertices = countries.features.flatMap((f, i) => {
const c = d3.geoCentroid(f);
return geoVertices(f, i).map((d) => [...d3.geoInterpolate(d, c)(0.03), d[2]]);
})
world = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.1.0/world/110m.json"
)
land = topojson.feature(world, world.objects.land)
countries = topojson.feature(world, world.objects.countries)
import { geoVertices, contains } from "@fil/distance-to-shore"
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.
