Published
Edited
Sep 27, 2019
1 fork
4 stars
md `# D3 + Nextzen NYC Map with Latitude and Longitude Data Points of Citi Bike Stations`
d3 = require("d3-geo@1","d3-contour@1", "d3-scale-chromatic@1", "d3-selection@1", "d3-fetch@1", "d3-tile@0.0", "d3-scale@1", "d3-time-format@1", "d3-array@1", "d3-format@1", "d3-transition@1", "d3-ease@1", "d3-collection@1", "d3-shape@1", "d3-axis@1")
height = 700
width = 700
projection = d3.geoMercator()
.center([-73.9375, 40.7324])
.scale((550000) / (2 * Math.PI))
.translate([width / 2, height / 2])
// .precision(0)
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 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=SnTep4kMQwW3uGZ96LaCLg`); // Sign up for an API key: https://www.nextzen.org
return d;
}))
path = d3.geoPath(projection)
dateParse = d3.timeParse("%Y-%m-%d")
color = d3.scaleOrdinal(d3.schemeCategory10)
map = {
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height)
.style("background-color","#fff")
.style("font", "10px sans-serif");
const water = svg.selectAll(".tile")
.data(tiles)
.enter().append("path")
.style("fill", "steelblue")
.style("fill-opacity", .35)
.attr("d", (d) => { return path(d.data.water) })
.style("stroke-width", 1)
.style("stroke-opacity", .5)
const earth = svg.selectAll(".tile")
.data(tiles)
.enter().append("path")
.style("fill", "#fffdf9")
.style("fill-opacity", 1)
.attr("d", (d) => { return path(d.data.earth) });
const roads = svg.selectAll(".tile")
.data(tiles)
.enter().append("path")
.style("fill", "none")
.attr("d", (d) => { return path(d.data.roads) })
.style("stroke-width", .1)
.style("stroke-opacity", .5)
.style("stroke", "000");
const bubbles = svg.selectAll(".bubble")
.data(dataCitibikeStations)
.enter().append("circle")
.attr("class", "bubble")
.attr("transform", (d) => {
const [x, y] = projection([d.lon, d.lat]);
return `translate(${x},${y})`
})
.style("fill", (d) => 'red')
.style("stroke", (d) => '#ff9')
.style("stroke-width", .25)
.style("fill-opacity", .25)
.attr("r", 2)
return svg.node()
}
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.
