The end-to-end solution for building and hosting better data apps, dashboards, and reports.
count = {
let i = 0;
while (true) yield Promises.delay(1000, ++i);
}
doubleCount = count * 2
evenCount = {
yield count % 2 === 0 ? count : this;
}
counter = {
let i = 0;
while (true) {
if (i % 2 === 0) mutable counterEven = i;
if (i % 5 === 0) mutable counterFives = i;
yield Promises.delay(1000, ++i);
}
}
mutable counterEven = 0
mutable counterFives = 0
reactiveWalls
viewof reactiveWalls = {
var c = DOM.context2d(w, h);
var ball = {x: w / 2, y: h / 2, r: 8, dx: 2, dy: 2};
var wall = null;
while (true) {
ball.x += ball.dx, ball.y += ball.dy;
c.fillStyle = "black";
c.fillRect(0, 0, w, h);
c.beginPath();
c.fillStyle = "red";
c.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
c.fill();
if (ball.x - ball.r < 0) wall = "left", ball.dx = 2;
if (ball.x + ball.r > w) wall = "right", ball.dx = -2;
if (ball.y - ball.r < 0) wall = "top", ball.dy = 2;
if (ball.y + ball.r > h) wall = "bottom", ball.dy = -2;
c.canvas.value = wall;
yield c.canvas;
}
}
mutable wall = null
mutableWalls = {
var c = DOM.context2d(w, h);
var ball = {x: w / 2, y: h / 2, r: 8, dx: -2, dy: -2};
while (true) {
ball.x += ball.dx, ball.y += ball.dy;
c.fillStyle = "black";
c.fillRect(0, 0, w, h);
c.beginPath();
c.fillStyle = "blue";
c.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
c.fill();
if (ball.x - ball.r < 0) mutable wall = "left", ball.dx = 2;
if (ball.x + ball.r > w) mutable wall = "right", ball.dx = -2;
if (ball.y - ball.r < 0) mutable wall = "top", ball.dy = 2;
if (ball.y + ball.r > h) mutable wall = "bottom", ball.dy = -2;
yield c.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.
