The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
JavaScript in Observable
Edited
May 11, 2023
15 forks
287 stars
Insert cell
Insert cell
Insert cell
Insert cell
This is English, not JavaScript.
Insert cell
Insert cell
{ throw new Error("oopsie"); }
Insert cell
Insert cell
{ const local = "I am a local variable."; }
Insert cell
local // not defined
Insert cell
Insert cell
a + 2 // a is defined below
Insert cell
a = 1
Insert cell
Insert cell
c1 = c2 - 1
Insert cell
c2 = c1 + 1
Insert cell
Insert cell
b = Math.random()
Insert cell
b * b // updates automatically!
Insert cell
Insert cell
{ invalidation.then(() => console.log("I was invalidated.")); }
Insert cell
Insert cell
hello = new Promise(resolve => {
setTimeout(() => {
resolve("hello there");
}, 30000);
})
Insert cell
Insert cell
hello.split(/\s+/g) // implicit await
Insert cell
Insert cell
c = {
yield 1;
yield 2;
yield 3;
}
Insert cell
c
Insert cell
Insert cell
Insert cell
foo = 2
Insert cell
Insert cell
{ foo = 3; } // not allowed
Insert cell
Insert cell
dup = 1
Insert cell
dup = 2
Insert cell
Insert cell
Insert cell
{
let sum = 0;
for (let i = 0; i < 10; ++i) {
sum += i;
}
return sum;
}
Insert cell
Insert cell
label = {foo: "bar"}
Insert cell
Insert cell
object = ({foo: "bar"})
Insert cell
block = { return {foo: "bar"}; }
Insert cell
Insert cell
viewof text = htl.html`<input value="edit me">`
Insert cell
text
Insert cell
Insert cell
mutable thing = 0
Insert cell
++mutable thing // mutates thing
Insert cell
Insert cell
thing // a reactive reference
Insert cell
mutable thing // a non-reactive reference
Insert cell
Insert cell
width // try resizing the window
Insert cell
viewof input = Inputs.text({label: "Input", value: "Edit me"})
Insert cell
input
Insert cell
Insert cell
import {ramp} from "@mbostock/ramp"
Insert cell
ramp(d3.interpolateBrBG)
Insert cell
Insert cell
numbers = Float64Array.from({length: 1000}, d3.randomNormal())
Insert cell
height = 250
Insert cell
import {chart as histogram} with {numbers as data, height} from "@d3/histogram@261"
Insert cell
histogram
Insert cell
Insert cell
_ = import("https://cdn.skypack.dev/lodash-es@4")
Insert cell
_.camelCase("lodash was here")
Insert cell
Insert cell
lodash = require("lodash@4")
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