map = svg`<svg viewBox="0 0 ${width} ${height}">${tiles.map(d => svg`
<path fill="#eee" d="${path(geojson(d, d.layers.water, d => !d.properties.boundary))}"></path>
<path fill="none" stroke="#aaa" d="${path(geojson(d, d.layers.water, d => d.properties.boundary))}"></path>
<path fill="none" stroke="#000" stroke-width="0.75" d="${path(geojson(d, d.layers.transportation))}"></path>
`)}
</svg>`
tiles = Promise.all(tile().map(async d => {
d.layers = new VectorTile(new Protobuf(await d3.buffer(`https://tiles-c.basemaps.cartocdn.com/vectortiles/carto.streets/v1/${d[2]}/${d[0]}/${d[1]}.mvt`))).layers;
return d;
}))
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
projection = d3.geoMercator()
.center([-122.4183, 37.7750])
.scale(Math.pow(2, 21) / (2 * Math.PI))
.translate([width / 2, height / 2])
.precision(0)
path = d3.geoPath(projection)
function geojson([x, y, z], layer, filter = () => true) {
if (!layer) return;
const features = [];
for (let i = 0; i < layer.length; ++i) {
const f = layer.feature(i).toGeoJSON(x, y, z);
if (filter.call(null, f, i, features)) features.push(f);
}
return {type: "FeatureCollection", features};
}
height = 600
VectorTile = (await import("@mapbox/vector-tile@2")).VectorTile
Protobuf = (await import("pbf@4")).default
d3 = require("d3-geo@3", "d3-fetch@3", "d3-tile@1")
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.
