The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Jan 25, 2023
14 forks
Importers
189 stars
Also listed in…
JavaScript in Observable
yield 42
42
{
let i = 0;
while (true) {
yield Promises.delay(1000, ++i);
}
}
{
let i = 0;
while (true) {
await Promises.delay(1000);
yield ++i;
}
}
tick = {
while (true) {
yield Promises.delay(1000);
}
}
tick, md`This number updates once per second: \`${Math.random()}\``
{
const div = html`<div style="transition:background 250ms linear;height:33px;">`;
yield div;
while (true) {
div.style.background = "red";
yield Promises.delay(1000, div);
div.style.background = "green";
yield Promises.delay(1000, div);
div.style.background = "blue";
yield Promises.delay(1000, div);
}
}
minutes = {
let i;
yield i = 0;
while (true) yield Promises.delay(60000, ++i);
}
minutes // Shift-Enter or hit play to rerun this cell.
{
let i = 0;
while (true) {
yield ++i;
}
}
{
yield 1;
yield 2;
yield 3;
return "ignored"; // It’s ignored!
}
yield* [1, 2, 3]
yield* new Set([1, 2, 3])
{
while (true) {
yield* range(0, 100);
}
}
input = html`<input type=range>`
Generators.observe(next => {
// Yield the input’s initial value.
next(input.value);
// Define an event listener to yield the input’s next value.
const inputted = () => next(input.value);
// Attach the event listener.
input.addEventListener("input", inputted);
// When the generator is disposed, detach the event listener.
return () => input.removeEventListener("input", inputted);
})
Generators.input(input)
viewof value = html`<input type=range>`
value
{
try {
for (let i = 0; i < 100; ++i) {
yield i;
}
} finally {
console.log("terminated!");
}
}
function* range(start, stop) {
start = Math.floor(start);
stop = Math.ceil(stop);
while (start < stop) yield start++;
}
range(0, 100)
width
now
Math.sin(now / 1000)
height = 300
import {canvas} with {height} from "@mbostock/connected-particles-iii"
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.
