Published
Edited
Oct 6, 2021
6 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = aq.fromCSV(
await (await fetch(`https://api.covidactnow.org/v2/states.timeseries.csv?apiKey=${API_KEY}`)).text()
).derive({
averageDeaths: aq.rolling(d => op.average(d['actuals.newDeaths']), [-6, 0]),
})
Insert cell
problemStatesByHospitalization = new Set(
data.groupby('state')
// Calculate the maximum hospitalizations for every state
.derive({
maxHospitalizations: d => op.max(d['actuals.hospitalBeds.currentUsageCovid'])
})
// Filter to only the rows that are the max hospitalization row for each state
.filter(d => op.equal(d['actuals.hospitalBeds.currentUsageCovid'], d.maxHospitalizations))
// Filter to only the rows that occurred in the date range
.filter(aq.escape(d => d.date > dateRange[0] && d.date < dateRange[1]))
.select('state')
.objects()
.map(d => d.state)
)
Insert cell
problemStatesByDeath = new Set(
data.groupby('state')
// Calculate the maximum daily average deaths for every state
.derive({
maxDeaths: d => op.max(d.averageDeaths)
})
// Filter to only the rows that are the max death row for each state
.filter(d => op.equal(d.averageDeaths, d.maxDeaths))
// Filter to only rows that occurred in the date range
.filter(aq.escape(d => d.date > dateRange[0] && d.date < dateRange[1]))
.select('state')
.objects()
.map(d => d.state)
)
Insert cell
Insert cell
ONE_WEEK_AGO = d3.timeDay.floor(d3.timeWeek.offset(new Date(), -1))
Insert cell
TODAY = d3.timeDay.floor(new Date())
Insert cell
CHART_WIDTH = {
if (width > 800) return Math.floor(width / 3) - 5
if (width > 500) return Math.floor(width / 2) - 5
return width
}
Insert cell
dateRange = [
d3.timeParse('%Y-%m-%d')(settings.start),
d3.timeParse('%Y-%m-%d')(settings.end),
]
Insert cell
settingsPristine = +dateRange[0] === +ONE_WEEK_AGO && +dateRange[1] === +TODAY
Insert cell
flexGrid = (arr, emptyMessage) => arr.length > 0 ?
htl.html`<div style="display: flex; flex-wrap: wrap;">
${arr.map(el => htl.html`<div>${el}</div>`)}
</div>` :
htl.html`${emptyMessage}`
Insert cell
pluralize = (singular, count, plural) => {
if (count === 1) return singular
if (plural !== undefined) return plural
return singular + 's'
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more