Published unlisted
Edited
Fork of Simple D3
Importers
Insert cell
# Vaccination Delivery Rates
Insert cell
Insert cell
data = vaccinations.map(d => {
return {
...d,
Date: parser(d.Date), // number of reviews (comments) on that story
Distributed: +d.Distributed,
Administered: +d.Administered,
Rate: Math.round((d.Administered * 100) / d.Distributed)
}
})
Insert cell
Inputs.table(data) //, {columns: ["Date","Location", "Distributed", "Administered"]}
Insert cell
parser = d3.timeParse("%m/%d/%Y")
Insert cell
data
Insert cell
state_data = data.filter(d => states_arr.includes(d.Location))
Insert cell
vax_table
.groupby('Location')
.view(5)
Insert cell
vax_table = aq.from(state_data)
Insert cell
vals = vax_table
.groupby('Date')
.rollup({ rate: op.mean('Rate') })
Insert cell
Insert cell
plot_plot = Plot.plot({
x: {domain: [new Date("2020-12-30"), new Date("2021-02-11")],grid:false, ticks:10},
y: {domain: [0, 100]}, grid: true,
width:width,
marginLeft:60,
marks:[
Plot.line(state_data, {x: "Date", y:"Rate", z:"Location", stroke:"lightgrey"}),
Plot.line(vals.objects(),{x: 'Date', y:'rate', stroke:"rgb(46, 114, 101)", strokeWidth:3}), //#2e7265 hex and rgb values are accepted
]
})
Insert cell
states_arr = us.usaStates.map(d => d.abbreviation)
Insert cell
the_series = tidy(
state_data,
groupBy(
'Location',
groupBy.entries({
mapEntry: ([key, values]) => ({ name: key, values }),
mapLeaf: (d => d.Rate < 100 ? d.Rate : 100)
})
)
)
Insert cell
tidy_dates = state_data.map(d => d.Date)
Insert cell
dates_col = {
const new_format = d3.timeFormat("%Y-%m-%d")
return tidy_dates.map(k => new_format(k))
}
Insert cell
dates_set = [...new Set(dates_col)]
Insert cell
dates_arr = (Array.from(dates_set))
Insert cell
final_dates = dates_arr.map(d3.utcParse("%Y-%m-%d"))
Insert cell
final_data = ({ y: 'Deployment %', series: the_series, dates: final_dates })
Insert cell
import {data as ref_data} from "@caupolicandiaz/d/05f1d8b8dc90a213"
Insert cell
import { LineChart } from '@d3/multi-line-chart'
Insert cell
LineChart(state_data, {
width,
x: (d) => d.Date,
y: (d) => d.Rate,
z: (d) => d.Location
})
Insert cell
## Appendix
Insert cell
import { aq, op } from '@uwdata/arquero'
Insert cell
import {
tidy,
pivotLonger,
groupBy,
mutate,
distinct,
map,
summarize,
mean,
total
} from '@pbeshai/tidyjs'
Insert cell
us = import('https://cdn.skypack.dev/typed-usa-states@2.0.1?min')
Insert cell
d3 = require("d3@6")
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