Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy
map = svg`<svg viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;">${tiles.map(d => svg`
<path fill="none" stroke="#000" stroke-width="0.75" d="${path(d.data.buildings)}"></path>
`)}
</svg>`
// <path fill="#eee" d="${path(filter(d.data.water, d => !d.properties.boundary))}"></path>
// <path fill="none" stroke="#aaa" d="${path(filter(d.data.water, d => d.properties.boundary))}"></path>
projection = d3.geoMercator()
.center([-122.3321, 47.6072])
.scale((1 << 23) / (2 * Math.PI))
.translate([width / 2, height / 2])
.precision(0)
tiles = Promise.all(tile().map(async d => {
d.data = await d3.json(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=NznU3WTwQ86gckiDphBTNg`); // Sign up for an API key: https://www.nextzen.org
return d;
}))
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
function filter({features}, test) {
return {type: "FeatureCollection", features: features.filter(test)};
}
path = d3.geoPath(projection)
height = 600
d3 = require("d3-geo@1", "d3-selection@1", "d3-fetch@1", "d3-tile@0.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.
