p = d3.line()([[10, 60], [40, 90], [60, 10], [190, 10]])
walk = {
replay;
const data = [];
for (let i = 0, v = 2; i < 50; ++i) {
v += Math.random() - 0.5;
v = Math.max(Math.min(v, 4), 0);
data.push({step: i, value: v});
yield data;
}
}
walkX = d3.scaleLinear()
.domain([0, 49])
.range([10, width - 10])
walkY = d3.scaleLinear()
.domain([0, 4])
.range([200 - 10, 10])
line = d3.line()
.x(d => walkX(d.step))
.y(d => walkY(d.value))
line(walk)
// Using d3.shuffle to simulate unordered data
svg`<svg width=${width} height=200>
<path d="${line(d3.shuffle(walk.slice()))}"
stroke="black" stroke-width="0.3" fill="none">
</svg>`
ball = {
replay2;
// Start at the center of the field.
let vx = width / 2, vy = 250;
const data = [];
for (let i = 0; i < 1000; i++) {
// Random walk with large or small steps.
const l = Math.random() < 0.05 ? 100 : 10;
data.push({
step: i,
x: vx += l * (Math.random() - 0.5),
y: vy += l * (Math.random() - 0.5)
});
yield data;
}
}
// The x and y accessors retrieve the corresponding attributes
// shorthand equivalent to d3.line().x(d => d.x).y(d => d.y)
footballLine = d3.line(d => d.x, d => d.y)
footballLine(ball)
badwalk = walk.map(d => ({
step: d.step,
value: Math.random() < 0.2 ? null : d.value,
real: d.value
}))
lc = d3.line()
.curve(d3[curve])
.x(d => walkX(d.step))
.y(d => walkY(d.value))
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.
