Maps — and other representations of the world.
SPL = import("https://cdn.skypack.dev/spl.js@0.1.0-beta.1?min")
spl = SPL.default()
db = fetch(
"https://data.london.gov.uk/download/london_boroughs/9502cdec-5df0-46e3-8aa1-2b5c5233a31f/london_boroughs.gpkg"
)
.then((response) => response.arrayBuffer())
.then((d) => spl.db(d))
boroughs = db.exec("select name, geom from london_boroughs").get.objs
srid = db.exec("select srid(geom) from london_boroughs").get.flat
// this projection takes "already projected" data and sends it to our image coordinates
projection = d3
.geoIdentity()
.reflectY(true)
.fitExtent(
[
[20, 20],
[width - 20, height - 20]
],
{
type: "MultiPolygon",
coordinates: boroughs.map(({ geom }) => geom.coordinates)
}
)
path = d3.geoPath(projection)
height = width * 0.75
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.
