baseline = getRandomWalk(50, 100, d3.randomNormal(baselineMean, baselineSd))
shocks = getShocks(shocksN, shocksDecay, d3.randomNormal(shockMean, shockSd))
samples = getSamples(4, 3)
// https://observablehq.com/@tophtucker/mandelbrots-binomial-time-bending
// e.g. getRandomWalk(1000, 5, d3.randomNormal())
getRandomWalk = (n, initial, delta) =>
d3
.range(n - 1)
.map(d => delta())
.reduce(
(acc, cur) =>
acc.concat([
[acc[acc.length - 1][0] + 1, acc[acc.length - 1][1] + (cur)]
]),
[[0, initial]]
)
getShocks = (n, decay, rand) => d3.range(n).map(() => {
const multiplier = 1 - decay;
let value = rand();
let index = d3.randomInt(0, baseline.length)();
const arr = [
[index - 1, 0],
[index, value]
];
for (; Math.abs(value) > 0.1;) {
arr.push([(index += 1), (value *= multiplier)]);
}
return arr;
})
getSamples = (n, m) =>
d3.range(m).flatMap((m) =>
d3
.shuffle(combined.slice())
.slice(0, n)
.sort((a, b) => a[0] - b[0])
.map((d) => [...d, m])
)
shocksCombined = Array.from(
d3
.rollup(
shocks.flat(),
(arr) => [arr[0][0], d3.sum(arr, (d) => d[1])],
(d) => d[0]
)
.values()
)
.filter((d) => d[0] >= 0 && d[0] < baseline.length)
.sort((a, b) => a[0] - b[0])
combined = Array.from(
d3
.rollup(
[baseline, ...shocks].flat(),
(arr) => [arr[0][0], d3.sum(arr, (d) => d[1])],
(d) => d[0]
)
.values()
)
.filter((d) => d[0] >= 0 && d[0] < baseline.length)
.sort((a, b) => a[0] - b[0])
options = ({
margin: 0.5,
marginTop: 25,
height: 200,
style: { fontSize: 13 },
x: { domain: d3.extent(baseline, (d) => d[0]), label: null }
})
yExtent = d3.extent(combined, d => d[1])
yRadius = (yExtent[1] - yExtent[0]) / 2
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.
