chart = {
const scale = 3
const path = d3.geoPath().projection(
d3.geoTransform({
point(x, y) {
return this.stream.point(...convertPoint(x, y))
}
})
)
const svg = d3.select(DOM.svg(mapSize.width, mapSize.height))
const states = svg.append('g')
states
.append('path')
.datum(northeast)
.attr('fill', '#ddd')
.attr('d', path)
states
.append('path')
.datum(topojson.mesh(us, us.objects.northeast, (a, b) => a !== b))
.attr('fill', 'none')
.attr('stroke', 'white')
.attr('stroke-linejoin', 'round')
.attr('d', path)
svg
.append('g')
.selectAll('circle')
.data(data)
.join('circle')
.attr('transform', d => `translate(${convertPoint(...projection([d.longitude, d.latitude]))})`)
.attr('fill', d => d.color)
.attr('opacity', 0.4)
.attr('r', 3)
return svg.node()
}
convertPoint = (x, y) => [
(x - northeastExtent.x) * mapSize.width / northeastExtent.width,
(y - northeastExtent.y) * mapSize.height / northeastExtent.height,
]
northeast = topojson.merge(us, us.objects.northeast.geometries)
projection = d3.geoAlbersUsa().scale(1280).translate([480, 300])
us = {
const us = await d3.json('https://unpkg.com/us-atlas@1/us/10m.json')
const northeastStates = '09 23 25 33 34 36 42 44 50'.split(' ')
us.objects.northeast = {
type: 'GeometryCollection',
geometries: us.objects.states.geometries.filter(d =>
northeastStates.includes(d.id)
)
}
return us
}
data = priceChopperStores.map(s => ({
latitude: +s.location.latitude,
longitude: +s.location.longitude,
color: colors.priceChopper,
state: s.address.province,
})).concat(wegmansStores.map(s => ({
latitude: +s.Latitude,
longitude: +s.Longitude,
color: colors.wegmans,
state: s.State,
}))).concat(hannafordStores.map(s => ({
latitude: s.lat,
longitude: s.lng,
color: colors.hannaford,
state: s.state,
}))).filter(s => 'ME NH NY VT MA PA CT RI NJ'.includes(s.state))
topojson = require("topojson-client@3")
d3 = require("d3@5")
// see https://observablehq.com/d/709f2ea37f387ef4 for API call
priceChopperStores = await fetch('https://gist.githubusercontent.com/j-f1/120f5c82df9831c1deae16257326ef4e/raw/83c63dd926555a75a52209eda371a186e23a67d3/price-chopper-stores.json').then(res => res.json())
// see https://observablehq.com/d/6244cbb1818fad7e for scraper call
wegmansStores = await fetch('https://gist.githubusercontent.com/j-f1/120f5c82df9831c1deae16257326ef4e/raw/83c63dd926555a75a52209eda371a186e23a67d3/wegmans-stores.json').then(res => res.json())
hannafordStores = await fetch('https://gist.githubusercontent.com/j-f1/120f5c82df9831c1deae16257326ef4e/raw/c64b6a78a1efa9b62cbb81c2b7c40719e4cc345c/hannaford-stores.json').then(res => res.json())
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.
