Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
map = svg`<svg viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;">${tile().map(([x, y, z]) => {
const buildings = svg`<path>`;
const water = svg`<path fill="none" stroke="cyan" stroke-width="0.5">`;
fetch(`https://tile.nextzen.org/tilezen/vector/v1/512/all/${z}/${x}/${y}.json?api_key=${key}`)
.then(response => response.json())
.then(data => {
buildings.setAttribute("d", path(data.buildings));
water.setAttribute("d", path({
type: "FeatureCollection",
features: data.water.features.filter(d => d.properties.boundary)
}));
});
return svg`${buildings}${water}`;
})}</svg>`
projection = d3.geoMercator()
.center([-122.4183, 37.7750])
.scale(Math.pow(2, 21) / (2 * Math.PI))
.translate([width * 0.60, height * 0.15])
tile = d3.tile()
.tileSize(512)
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
.zoomDelta(2)
key = "jdPwBXkWSB-v5_CPQYDiIQ" // Sign up for an API key: https://www.nextzen.org
path = d3.geoPath(projection)
width = 954
height = Math.round(width * 2)
d3 = require("d3-geo@1", "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.
