path = d3.geoPath(
d3.geoTransform({
point(x, y) {
this.stream.point(longitudeScale(x), latitudeScale(y));
}
})
)
color = (logScale
? d3.scaleSequentialSymlog(d3.interpolateOrRd).constant(0.001)
: d3.scaleSequential(d3.interpolateOrRd)
)
.domain([
0,
d3.max(
Array.from(numCases.entries()).map(
([name, cases]) => cases / populations.get(name)
)
)
])
.nice()
numCases = {
const parser = new DOMParser();
const el = parser.parseFromString(
await fetch(
'https://j-f1-cors-proxy.glitch.me/https://coronavirus.health.ny.gov/county-county-breakdown-positive-cases'
).then(res => res.text()),
'text/html'
);
const updated = d3.timeParse("Last Update: %B %-d, %Y | %-I:%M%p")(
el.querySelector('main .paragraph [class$=title]').textContent
);
const rows = [...el.querySelector('main table tbody').children].slice(1, -1);
return Object.assign(
new Map(
rows.map(row => [
row.children[0].textContent.trim(),
parseInt(row.children[1].textContent.replace(/[^\d]/g, ''))
])
),
{ updated }
);
}
populations = {
const parser = new DOMParser();
const el = parser.parseFromString(
await fetch(
'https://j-f1-cors-proxy.glitch.me/https://www.health.ny.gov/statistics/vital_statistics/2017/table02.htm'
).then(res => res.text()),
'text/html'
);
const rows = [...el.querySelector('#content table tbody').children];
return new Map(
[rows[3], ...rows.slice(11)].map(row => [
row.children[0].textContent.trim().replace('St ', 'St. '),
parseInt(row.children[1].textContent.replace(/[^\d]/g, ''))
])
);
}
nyCounties = {
const allCounties = us.objects.counties.geometries.filter(
c => (countyCodes[c.id] || {}).stateAbbr === 'NY'
);
return allCounties
.filter(d => !nyc.has(d.properties.name))
.concat(
Object.assign(
topojson.mergeArcs(
us,
allCounties.filter(d => nyc.has(d.properties.name))
),
{ properties: { name: 'New York City' } }
)
);
}
longitudeScale = d3
.scaleLinear()
.domain(ranges[0])
.range([
0,
(500 * (ranges[0][1] - ranges[0][0])) / (ranges[1][1] - ranges[1][0])
])
latitudeScale = d3
.scaleLinear()
.domain(ranges[1])
.range([
0,
500
])
countyFeatures = nyCounties.map(obj => topojson.feature(us, obj))
ranges = [0, 1].map(i =>
d3.extent(
countyFeatures
.map(c =>
d3.extent(
c.geometry.coordinates.flat(
c.geometry.type === 'MultiPolygon' ? 2 : 1
),
c => c[i]
)
)
.flat()
)
)
nyc = new Set(['Bronx', 'New York', 'Queens', 'Kings', 'Richmond'])
countyCodes = d3.json(
'https://raw.githubusercontent.com/jgoodall/us-maps/7c857f6/reference/county-codes.json'
)
format = ({ num: d3.format(','), percent: d3.format('.3%') })
topojson = require("topojson-client@3")
proj4 = require('proj4')
d3 = require('d3@5')
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.
