Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Feb 21, 2019
3 forks
13 stars
{
const svg = d3.select(DOM.svg(width, height))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 0.5);
while (true) {
yield svg.node();
svg.append("path")
.attr("d", line(dampenedRandomWalk()))
.attr("stroke-dasharray", strokeNone)
.transition()
.ease(d3.easeLinear)
.duration(750)
.attrTween("stroke-dasharray", strokeIn)
.transition()
.attrTween("stroke-dasharray", strokeOut)
.remove();
}
}
function dampenedRandomWalk() {
let target = 0.5;
let value = Math.random();
let values = [value];
for (let i = 0; i < n; ++i) {
values.push(value += (Math.random() - 0.5) * noise + (target - value) * decay);
}
return values;
}
function strokeNone() {
return `0 ${this.getTotalLength()}`;
}
function strokeIn() {
const l = this.getTotalLength();
return d3.interpolate(`0 ${l}`, `${l} 0`);
}
function strokeOut() {
const l = this.getTotalLength();
return d3.interpolate(`0 0 ${l}`, `0 ${l} 0`);
}
line = d3.line().x((d, i) => i / n * width).y(d => d * height)
n = 200
height = 500
d3 = require("d3@5")
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.
