Published
Edited
Apr 8, 2021
Insert cell
md`# Vaccination progress bars

Blue is percentage of the population that have received the first dose.

Red is second dose.

Numbers are from the most recent date reported by the CDC.

https://cdc-vaccination-history.datasette.io/cdc?sql=with+foop+as+%28select+max%28Date%29%2C+LongName%2CAdministered_Dose1_Pop_Pct%2CAdministered_Dose2_Pop_Pct+from+daily_reports+group+by+Location%29%0D%0Aselect+*+from+foop+order+by+Administered_Dose1_Pop_Pct+desc`
Insert cell
html`${bits.join('')}`
Insert cell
bits = data.map(
d => `<div>
<p>${d.name}</p>
<div>
<div style="background-color: blue; color: white; font-size: 0.7em; padding: 3px; width: ${
d.dose1
}%;">${d.dose1 || "&nbsp;"}%</div>
</div>
<div style="background-color: red; color: white; font-size: 0.7em; padding: 3px; width: ${
d.dose2
}%;">${d.dose2 || "&nbsp;"}%</div>
</div>
`
)
Insert cell
key = "Administered_Dose2_Pop_Pct"
Insert cell
url = "https://cdc-vaccination-history.datasette.io/cdc.json?_shape=array&sql=with+foop+as+%28select+max%28Date%29 as date%2C+LongName as name%2CAdministered_Dose1_Pop_Pct as dose1%2CAdministered_Dose2_Pop_Pct as dose2+from+daily_reports+group+by+Location%29%0D%0Aselect+*+from+foop+order+by+dose2+desc"
Insert cell
data = (await fetch(url)).json()
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