Published
Edited
Nov 8, 2019
Insert cell
md`# Observable Tutorials`
Insert cell
cell_operation = 2 * 3 * 7
Insert cell
cell_create_obj = ({"subjects": ["life", "the universe", "everything"]})
Insert cell
cell_block_return = {
let sum = 0;
for (let i = 1; i <= 10; ++i) sum += i;
return sum; // pure function; or without it to use side effect
}
Insert cell
raw_html = document.createTextNode("Hello, I am text!")
Insert cell
create_dom_html = html`Hello, I am <i>italicized</i>!`
Insert cell
create_md = md`Hello, I am *Markdown*!`
Insert cell
create_svg = html`<svg width=50 height=50>
<circle cx=25 cy=25 r=20 fill=red></circle>
</svg>`
Insert cell
create_canvas = {
const canvas = document.createElement("canvas");
canvas.width = 50;
canvas.height = 50;
const context = canvas.getContext("2d");
context.arc(25, 25, 20, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
return canvas;
}
Insert cell
Insert cell
x = 1
Insert cell
y = 2
Insert cell
x + y
Insert cell
Insert cell
local_variable_x = {
const x = 1337; // This defines a local x, masking the cell above.
return x;
}
Insert cell
{
let i = -1;
while (true) {
yield Promises.delay(1000, ++i);
}
}
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