Published
Edited
Aug 8, 2020
point1 = p(70, 150, 2, xScale(0), lift, now / 1000)
point2 = p(70, 150, 2, xScale(1), lift, now / 1000)
points2 = d3.range(n).map(d => p(15, 1, 1.5, xScale2(d), lift, now / 1000))
xScale3 = d3.scalePoint(d3.range(n), [0, width]).padding(0)
points3 = d3.range(n).map((d, i) => {
let xy = p(20, 0.5, 2, xScale3(d), lift, now / 1000);
if (i === 0) xy[0] = 0;
if (i === n - 1) xy[0] = width;
return xy;
})
{
const ctx = DOM.context2d();
ctx.canvas.width = width;
ctx.canvas.height = height;
ctx.fillStyle = 'lightskyblue';
ctx.beginPath();
line.context(ctx)(points3);
ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.closePath();
ctx.fill();
ctx.fillStyle = '#999';
points3.forEach(point => {
ctx.beginPath();
ctx.arc(point[0], point[1], 5, 0, 2 * Math.PI);
ctx.fill();
});
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.
