casePlotWithOverlay(data, blurred)
As you can see in the chart above, an added benefit is that the value at the end of the series doesn’t “drop” (it “knows” that the base is clamped on the right-hand-side). Array-blur also knows how to smooth “a little” (try sigma between 0 and 0.3).
arrayBlur = require("array-blur@^1.2.1")
blurred = arrayBlur
.blur()
.radius(gaussianDistributionScale / 1.3) // ~1.3: ratio between sigma and radius
.value(({ ["actuals.newCases"]: d }) => d)(data)
normalDistributionGenerator = (location = 0, scale = 1) => {
return (x) => {
const left = 1 / (scale * Math.sqrt(2 * Math.PI))
const rightTop = -((x - location) ** 2)
const rightBottom = 2 * scale ** 2
return left * Math.exp(rightTop / rightBottom)
}
}
aq.addWindowFunction(
'kde',
{
create: (scale = 1, distributionGenerator = normalDistributionGenerator) => ({
init: state => state,
value: (w, f) => {
const normal = distributionGenerator(w.index, scale)
return d3.range(w.i0, w.i1).reduce((acc, i) => acc + w.value(i, f) * normal(i))
},
}),
param: [1, 1],
},
// In case this cell gets run multiple times, we allow it to override itself.
// Unfortunately, cells using this function will not be updated until manually rerun.
{ override: true }
)
casePlotWithOverlay = (data, overlayKey) => Plot.plot({
y: {
tickFormat: 's',
label: 'New Cases'
},
marks: [
Plot.areaY(data, {
x: 'date',
y: 'actuals.newCases',
fill: overlayKey ? '#CCC' : '#000'
}),
overlayKey ? Plot.line(data, {
x: 'date',
y: overlayKey,
stroke: '#069'
}) : null
],
height: 150
})
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.
