The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Apr 9, 2022
176 forks
Importers
71 stars
1 + 1 // Edit me!
{
let sum = 0;
for (let i = 0; i < 100; ++i) {
sum += i;
}
return sum;
}
color = "red" // Edit me!
`My favorite color is ${color}.`
object = ({open: [atob("c2VzYW1l")]})
html`<span style="background:yellow;">
My favorite language is <i>HTML</i>.
</span>`
md`Hi Mom! It’s me, *Markdown*.`
html`My favorite color is <i style="background:${color};">${color}</i>.`
cars = fetch("https://raw.githubusercontent.com/vega/vega/v4.3.0/docs/data/cars.json")
.then(response => response.json())
he = require("he@1")
he.encode("foo © bar ≠ baz 𝌆 qux")
function greet(subject) {
return `Hello, ${subject}!`;
}
greet("world")
c = {
for (let i = 0; true; ++i) {
yield i;
}
}
{
const height = 33;
const context = DOM.context2d(width, height);
for (let i = 0; i < width; ++i) {
const t = i / width;
const r = Math.floor(255 * Math.sin(Math.PI * (t + 0 / 3)) ** 2);
const g = Math.floor(255 * Math.sin(Math.PI * (t + 1 / 3)) ** 2);
const b = Math.floor(255 * Math.sin(Math.PI * (t + 2 / 3)) ** 2);
context.fillStyle = `rgb(${r},${g},${b})`;
context.fillRect(i, 0, 1, height);
yield context.canvas;
}
}
tick = {
while (true) {
const date = new Date(Math.ceil(Date.now() / 1000) * 1000);
await Promises.when(date);
yield date;
}
}
slider = html`<input type=range>`
sliderValue = Generators.input(slider)
viewof d = html`<input type=range>` // Edit me! Try type=text.
import {tweet} from "@mbostock/tweet"
tweet("958726175123128321")
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.
