Data scientist and front-end developer at Jetpack.ai
tiles = Promise.all(
tile().map(async (d) => {
const tileData = await getTileData(...d);
d.layers = new VectorTile(new Protobuf(tileData)).layers;
return d;
})
)
geojson(tiles[1], tiles[1].layers.transportation_name)
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
projection = d3
.geoMercator()
.center([4.3517, 50.85])
.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("https://unpkg.com/@mapbox/vector-tile@2.0.3/index.js?module")
).VectorTile
Protobuf = require("pbf@4/dist/pbf.js")
d3 = require("d3-geo@3", "d3-fetch@3", "d3-tile@1")
pmtiles = import("https://cdn.skypack.dev/pmtiles@2.7.0")
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.
