Published
Edited
Jul 6, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = transformData({
statistic: "positive",
transformation: "linear",
derivative: 1,
smoothing: 7
})
Insert cell
domain = Array.from(data.get(keys[0]).keys())
Insert cell
keys = Array.from(data.keys())
Insert cell
latest = domain[domain.length - 1]
Insert cell
series = keys.map(key => ({
key,
latest: data.get(key).get(latest),
color: hsl(hues.get(key)),
highlight: highlights.includes(key),
offset: xOffsets.get(key),
data: domain.map((d, i) => ({
date: dateParse(d),
i,
di: i - xOffsets.get(key),
value: data.get(key).get(d)
}))
}))
Insert cell
xOffsets = mapEach(map =>
Array.from(map.values()).findIndex(d => d > threshold)
)(data)
Insert cell
hasOffset = ({ offset }) => offset !== -1
Insert cell
curves = d3
.cross(range(3, 5, .1), range(.1, .5, .05).reverse())
.map(([l, k]) => {
const L = 5 * 10 ** l;
const x0 = dLogisticFindX0(L, k, 0, threshold);
const fn = dLogistic(x0, L, k);
const peak = [x0, fn(x0)];
const data = range(0, domain.length, .5).map(d => [d, fn(d)]);
return { L, k, x0, peak, data };
})
Insert cell
Insert cell
line = d3
.line()
.x(d => x(d[0]))
.y(d => y(d[1]))
.defined(d => logValid(d[1]))
Insert cell
lineTrunc = d => line(d.filter(([i, d]) => d < 20 * y.domain()[1]))
Insert cell
x = d3
.scaleLinear()
.domain([0, domain.length - 1])
.range([margin.left, width - margin.right])
Insert cell
y = (linOrLog === "linear" ? d3.scaleLinear : d3.scaleLog)()
.domain([threshold, max(data) * 1.1])
.range([height - margin.bottom, margin.top])
Insert cell
max = map =>
d3.max(
d3
.merge(
Array.from(map, ([key, value]) =>
Array.from(value, ([key, value]) => value)
)
)
.filter(logValid)
)
Insert cell
height = width / 2
Insert cell
color = L =>
d3.interpolateRainbow(
d3
.scaleLog()
.domain([5e5, 5e3])
.range([0.2, 1])(L)
)
Insert cell
hues = new Map(keys.map(d => [d, Math.floor(Math.random() * 360)]))
Insert cell
hsl = hue => `hsl(${hue}, 0%, 50%)`
Insert cell
valid = d => d !== null && d !== Infinity && d !== -Infinity && !isNaN(d)
Insert cell
logValid = d => valid(d) && d !== 0
Insert cell
margin = ({ top: 10, right: 0, bottom: 20, left: 0 })
Insert cell
clip = DOM.uid("clip")
Insert cell
// inclusive!
range = (min, max, step) => [...d3.range(min, max, step), max]
Insert cell
d3 = require("d3@5", "d3-array@^2.2")
Insert cell
import {
transformData,
dateParse
} from "@tophtucker/covid-tracking-project-data"
Insert cell
import { mapEach, dLogistic, dLogisticFindX0 } from "@tophtucker/scrapbook"
Insert cell
import { radio, slider, checkbox } from "@jashkenas/inputs"
Insert cell
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