File AttachmentsSlideViews are Mutable ValuesGenerator Cells, Functions and ObjectsCustom GeneratorsNotebook VisualizerHello and Welcome!Synchronized ViewsIntroduction to PromisesIntroduction to ViewsIntroduction to HTMLIntroduction to DataIntroduction to GeneratorsDownloading and Embedding Notebooks(2nd) Tutorial 1: Lunch calculator(0th) Observable: The User Manual
(1st) Five-Minute Introduction
runcode = md`## How to write code in cell
An Observable notebook consists of cells. **Each cell is a snippet of JavaScript**. You can see (and edit!) the code for any cell by clicking the menu ${menuSvg} in the left margin.`
2 * 3 * 7
{
let sum = 0;
for (let i = 0; i <= 100; ++i) {
sum += i;
}
return sum;
}
cellReference = md `## Cell reference`
color = "cornflowerblue"
`My favorite color is ${color}.`
html`<span style="background:yellow;">
My favorite language is <i>HTML</i>.
</span>`
md`My favorite language is *Markdown*.`
html`My favorite color is <i style="background:${color};">${color}</i>.`
status = new Promise(resolve => {
setTimeout(() => {
resolve({resolved: new Date});
}, 2000);
})
status
d3 = require("d3-fetch@1")
countries = (await d3.tsv("https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.tsv"))
.sort((a, b) => b.pop_est - a.pop_est) // Sort by descending estimated population.
.slice(0, 10) // Take the top ten.
cellGenerators = md `## Cell as generators`
i = {
let i = 0;
while (true) {
yield ++i;
}
}
`The current value of i is ${i}.`
promiseGen = md `## How promise and generator work together`
date = {
while (true) {
yield new Promise(resolve => {
setTimeout(() => resolve(new Date), 1000);
});
}
}
sliderComb = md `## Combine promise, generator, dom together`
slider = html`<input type=range>`
Generators
sliderValue = Generators.input(slider)
viewof value = html`<input type=range>`
value
importCellGraph = md `## How to import cell (a graph) from another notebook`
import {viewof selection as cars} from "@d3/brushable-scatterplot"
viewof cars
cars
import {toggle, pin, video, key, signinNote, seriesNavigation, menuSvg} from "@embracelife/tutorial-utilities"
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.
