Published
Edited
Apr 28, 2022
dataset = FileAttachment("nyc.json").json()
householdIncome = FileAttachment("household_income.json").json()
width = 500
height = 600
nyLat = 40.7128
nyLng = 74.0060
projection = d3.geoMercator().fitSize([width, height], dataset)
pathGenerator = d3.geoPath().projection(projection)
{
const margin = 0
const height = 500 - margin * 2
const width = 1000 - margin * 2
const container = d3.select(DOM.svg(width + margin * 2, height + margin * 2))
const svg = container.append('g')
.attr('transform',`translate(${margin},${margin})`)
svg.selectAll('path')
.data(dataset.features)
.enter()
.append('path')
.attr('d', d => {
return pathGenerator(d)
})
.attr('fill', d => {
return d3.interpolateBuPu(d.properties.boroughCode / 5)
})
.attr('stroke', '#999999')
return container.node()
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
