Published
Edited
Dec 7, 2018
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
height = 500
Insert cell
n = 1 // number of layers
Insert cell
m = 200 // number of samples per layer
Insert cell
k = 20 // number of bumps per layer
Insert cell
bumps = {
// Inspired by Lee Byron’s test data generator.
function bump(a, n) {
const x = 1 / (0.1 + Math.random());
const y = 2 * Math.random() - 0.5;
const z = 10 / (0.1 + Math.random());
for (let i = 0; i < n; ++i) {
const w = (i / n - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
return function bumps(n, m) {
const a = [];
for (let i = 0; i < n; ++i) a[i] = 0;
for (let i = 0; i < m; ++i) bump(a, n);
return a;
};
}
Insert cell
stack = d3.stack()
.keys(d3.range(n))
.offset(d3[offset])
.order(d3[order])
Insert cell
parseDate = d3.timeParse("%Y%m%d")
Insert cell
data = Object.assign(
await d3.tsv("https://gist.githubusercontent.com"
+ "/mbostock/3884914/raw"
+ "/428cb24a2922fd5c38a050e7466c18736f8b97ee"
+ "/data.tsv", ({date, high, low}) => ({date: parseDate(date), high: +high, low: +low})),
{y: "°F"}
)
Insert cell
d3 = require("d3@5")
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