The end-to-end solution for building and hosting better data apps, dashboards, and reports.
This is English, not JavaScript.
{ throw new Error("oopsie"); }
{ const local = "I am a local variable."; }
local // not defined
a + 2 // a is defined below
a = 1
c1 = c2 - 1
c2 = c1 + 1
b = Math.random()
b * b // updates automatically!
{ invalidation.then(() => console.log("I was invalidated.")); }
hello = new Promise(resolve => {
setTimeout(() => {
resolve("hello there");
}, 30000);
})
hello.split(/\s+/g) // implicit await
c = {
yield 1;
yield 2;
yield 3;
}
c
foo = 2
{ foo = 3; } // not allowed
dup = 1
dup = 2
{
let sum = 0;
for (let i = 0; i < 10; ++i) {
sum += i;
}
return sum;
}
label = {foo: "bar"}
object = ({foo: "bar"})
block = { return {foo: "bar"}; }
viewof text = htl.html`<input value="edit me">`
text
mutable thing = 0
++mutable thing // mutates thing
thing // a reactive reference
mutable thing // a non-reactive reference
width // try resizing the window
viewof input = Inputs.text({label: "Input", value: "Edit me"})
input
import {ramp} from "@mbostock/ramp"
ramp(d3.interpolateBrBG)
numbers = Float64Array.from({length: 1000}, d3.randomNormal())
height = 250
import {chart as histogram} with {numbers as data, height} from "@d3/histogram@261"
histogram
_ = import("https://cdn.skypack.dev/lodash-es@4")
_.camelCase("lodash was here")
lodash = require("lodash@4")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.