Wise Fool.
Visioneer.
Published
Edited
Feb 2, 2022
3 stars
covid
data = rivmData // Map RIVM names to more humanly meaningful names
.filter(p => new Date(p.Date) > asFrom) // Filter Early & Often: Only use valid data and from a specific date
.map(
(k, i) => ({
date: new Date(k.Date),
lower: +k.Rt_low,
R: k.Rt_avg === undefined ? undefined : +k.Rt_avg, // Only include Rt_avg/middle if present
upper: +k.Rt_up,
})
)
import {maatregels} from "@martien/covid-19-reproductiegetal"
measures = maatregels.filter(m => m.datum > asFrom)
defaults = ({
width, // make it as wide as the page
height, // use a constant height throughout the notebook
y: {domain: [0.5, 1.5]}, // so all plots have a consistent scale (and height)
grid: true,
})
Plot.plot({
...defaults,
marks: [
Rline,
]
})
Rline = Plot.line(data, {x: "date", y: "R", stroke: "darkslateblue"})
Plot.plot({
...defaults,
marks: [
Plot.ruleY([baseline], {strokeDasharray: "9"}),
Rline,
]
})
Plot.plot({
...defaults,
marks: [
showBollingerBand ? Plot.areaY(data, {x: "date", y1: "lower", y2: "upper", fill:"gainsboro"}) : [],
Plot.ruleY([baseline], {strokeDasharray: "9"}),
Rline,
]
})
final = Plot.plot({
...defaults,
marks: [
showBollingerBand ? Plot.areaY(data, {x: "date", y1: "lower", y2: "upper", fill:"gainsboro"}) : [],
area("green", data),
area("red", data),
Plot.ruleY([baseline], {strokeDasharray: "9"}),
Rline,
Plot.text(measures, {x: "datum", y: d => textY(d), text: d => d.kern, textAnchor: "start"}),
Plot.ruleX(measures, {x: "datum", y1: _ => 1, y2: d => textY(d)}),
],
// caption: html`Figure 1. This chart has a <i>fancy</i> caption.`,
})
// takes color and data
// returns areaY with color
area = (color, data) =>
Plot.areaY(
data,
{
fill: color,
fillOpacity: .2,
x: "date",
y1: _ => baseline,
y2: d => deltaFromBaseline(color, d.R),
}
)
// takes color and R value
// returns:
// R, when color and value agree: green <= 0, red >= 0
// NaN, otherwise.
deltaFromBaseline = (color, R) => ({
green: R <= baseline,
red: R >= baseline
})[color] ? R : NaN
// takes measure
// returns y position
textY = d => 1.3 + (d.positie - 1) / 25
// Kudos to Aaron Kyle Dennis for this workaround.
// See https://observablehq.com/d/488b4fd9235d5431
cors_proxy = "https://observable-cors.glitch.me/"
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.
