{
const height = 400,
ctx = DOM.context2d(width, height);
const curve = d3.curveNatural,
xLimit = width * 0.5,
pad = 1,
heightAmplifier = 150;
const xDelta = 4,
yDelta = 4;
const line = d3
.line()
.context(ctx)
.defined((d) => d[0] > xLimit)
.curve(curve),
zone = d3
.area()
.context(ctx)
.y1((d) => d[1] - pad)
.y0(height)
.curve(curve),
area = d3.area().context(ctx).curve(curve),
color = d3.scaleSequential(d3.interpolateBlues).domain([0, height]);
ctx.save();
for (let y = height; y >= 0; y -= yDelta) {
const points = d3
.range(0, width, xDelta)
.map((x) => [x, y + heightAt(x, y) * heightAmplifier]);
ctx.beginPath();
ctx.fillStyle = color(y);
zone(points);
ctx.fill();
ctx.beginPath();
line(points);
ctx.stroke();
ctx.beginPath();
area(points);
ctx.clip();
yield ctx.canvas;
}
ctx.restore();
ctx.fillStyle = "white";
ctx.fillText("Thanks for watching!", 10, height - 15);
return ctx.canvas;
}
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.
