Public
Edited
Jun 26, 2024
2 forks
2 stars
Insert cell
Insert cell
Insert cell
// animated_graph = {
// let f = (a, b) => (t) => Math.sin(t) + Math.sin(a * t + b);

// let w = width;
// let h = 200;
// let canvas = d3.create("canvas").attr("width", w).attr("height", h);
// let ctx = canvas.node().getContext("2d");
// let [xmin, xmax, ymin, ymax] = [-100, 100, -2, 2];
// let x_scale = d3.scaleLinear().domain([xmin, xmax]).range([0, w]);
// let y_scale = d3.scaleLinear().domain([ymin, ymax]).range([h, 0]);

// for (; ; global.t += 0.0004) {
// let a = Math.sin(global.t);
// let b = 166 * global.t;

// ctx.clearRect(0, 0, w, h);
// ctx.beginPath();
// ctx.strokeStyle = "black";
// ctx.lineWidth = 1.2;
// ctx.moveTo(x_scale(xmin), y_scale(f(a, b)(xmin)));
// for (let dx = 0.1, x = xmin + dx; x <= xmax; x += dx) {
// ctx.lineTo(x_scale(x), y_scale(f(a, b)(x)));
// }
// ctx.stroke();
// ctx.closePath();

// yield canvas.node();

// if (!running) {
// break;
// }
// }
// }
Insert cell
global = ({ t: 10 * Math.random() })
Insert cell
{
w}
Insert cell
global
Insert cell
{
let pts = d3
.range(-100, 100, 0.2)
.map((x) => [x, Math.sin(x) + Math.sin(1.07 * x)]);
return Plot.plot({
marks: [Plot.line(pts)]
});
}
Insert cell

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.
Learn more