Published
Edited
May 18, 2022
{
var canvas = null;
if(d3.select("canvas#canvas-wind").empty()){
canvas = DOM.canvas(width, 100);
d3.select(canvas).attr("id", "canvas-wind");
}
else{
canvas = d3.select("canvas#canvas-wind").node();
}
var context = canvas.getContext('2d');
context.fillStyle = "rgba(0, 0, 0, 0.95)";
context.lineWidth = 1;
context.strokeStyle = '#1f4693';
var x = 0, dx = 0.2;
while(true){
var prev = context.globalCompositeOperation;
context.globalCompositeOperation = "destination-in";
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = prev;
context.beginPath();
var xt = x + dx;
if(xt > Math.PI * 10){
xt = Math.PI * 10;
dx = -0.2;
}
else if(xt < 0){
xt = 0;
dx = 0.2;
}
context.moveTo(scalex(x), scaley(Math.sin(x)));
context.lineTo(scalex(x+dx), scaley(Math.sin(x+dx)));
context.moveTo(scalex(x), scaley(-Math.sin(x)));
context.lineTo(scalex(x+dx), scaley(-Math.sin(x+dx)));
context.stroke();
x = xt;
yield 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.
