// x0: initial value
// T: doubling time
exp = (x0, T) => t => x0 * 2 ** (t / T)
curves = d3
.range(1, 8)
.map(T => range(0, domain.length, 1).map((d, i) => [i, exp(threshold, T)(d)]))
// inclusive!
range = (min, max, step) => [...d3.range(min, max, step), max]
domain = Array.from(data.get(series[0]).keys())
latest = domain[domain.length - 1]
series = Array.from(data.keys())
data = getCovidDataGrouped({
statistic: "positive",
transformation: "linear",
derivative: 0,
smoothing: 7
})
dataFinal = getCovidDataGrouped({
statistic: "positive",
transformation: "linear",
derivative: 1,
smoothing: 7
})
keyframes = [
{
title: html`Start with cumulative positive test results`,
statistic: "positive",
transformation: "linear",
derivative: 0,
smoothing: 1
},
{
title: html`Take day-to-day change`,
statistic: "positive",
transformation: "linear",
derivative: 1,
smoothing: 1
},
{
title: html`Make each point the average of the last seven`,
statistic: "positive",
transformation: "linear",
derivative: 1,
smoothing: 7
},
{
title: html`Align the first day they pass ${threshold} cases`,
statistic: "positive",
transformation: "linear",
derivative: 1,
smoothing: 7,
seriesTransform: d => `translate(${-x(xOffsets.get(d))}, 0)`
},
{
// title: html`Draw solutions of ${tex`f'(x)=cf(x)`} of the form ${tex`2^{x/T}`} for integer ${tex`T`}s`,
title: html`Draw constant growth rate curves`,
statistic: "positive",
transformation: "linear",
derivative: 1,
smoothing: 7,
curves: curve => curve.attr("opacity", 1)
},
{
title: html`Warp vertically to make them straight`,
statistic: "positive",
transformation: "linear",
derivative: 1,
smoothing: 7,
yScale: d3
.scaleLog()
.base(2)
.domain([threshold, max(dataFinal)])
.range([height - margin.bottom, margin.top])
}
]
logY = d3
.scaleLog()
.domain([threshold, max(dataFinal)])
.range([height - margin.bottom, margin.top])
logY(10)
height - margin.bottom
keyframeData = keyframes.map(getCovidDataGrouped)
xOffsets = mapEach(map =>
Array.from(map.values()).findIndex(d => d > threshold)
)(dataFinal)
dataFinal
threshold = 10
expSolveForX = (x0, T) => y => (T * Math.log(y / (x0 / 2))) / Math.LN2 - T
duration = 1750
line = d3
.line()
.x(d => x(d[0]))
.y(d => y(d[1]))
.defined(d => valid(d[1]))
lineTrunc = d => line(d.filter(([i, d]) => d < 20 * y.domain()[1]))
x = d3
.scaleLinear()
.domain([0, domain.length - 1])
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([0, max(data)])
.range([height - margin.bottom, margin.top])
height = width / 2
max = map =>
d3.max(
d3
.merge(
Array.from(map, ([key, value]) =>
Array.from(value, ([key, value]) => value)
)
)
.filter(valid)
)
hues = new Map(series.map(d => [d, Math.floor(Math.random() * 360)]))
valid = d => d !== null && d !== Infinity && d !== -Infinity && !isNaN(d)
logValid = d => valid(d) && d !== 0
margin = ({ top: 10, right: 20, bottom: 0, left: 0 })
d3 = require("d3@5")
import { mapEach, draft } from "@tophtucker/scrapbook"
import {
transformData,
getCovidDataGrouped,
dateParse
} from "@tophtucker/covid-tracking-project-data"
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.
