Observable

About

Cells is the notebook are named and are then variable hosting a function or a value (as javascript does)

Cells can be:

  • expressions
  • blocks. { }
  • an object literal ({ })

Example a cell named letters:

letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

You needn’t define named cells before you reference them: order your cells however you like, and Observable will automatically execute them in topological order. Out-of-order execution is especially helpful for improving the narrative flow of your notebook.

If a cell contains a yield statement, the runtime creates a generator function instead of a normal function. Likewise if the definition uses await, the runtime creates an async function

Note

Key Shortcut

  • Shift + Return to evaluate

Language

  • Html
html`<span style="background:yellow;">
  My favorite language is <i>HTML</i>.

<!-- Referencing other cells -->  
html`My favorite color is <i style="background:${color};">${color}</i>.`
</span>`
  • Markdown.
md`My favorite language is *Markdown*.`
// Since all cells in Observable are JavaScript—a “Markdown cell” is just a JavaScript cell
md`My favorite number is ${Math.random() * 100 | 0}.`
md`I like Markdown for prose, but ${tex`\KaTeX`} for math.`
md`A sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} is a chart inline with prose.`

Loading

status = new Promise(resolve => {
  setTimeout(() => {
    resolve({resolved: new Date});
  }, 2000);
})
  • library (require returns a promise)
d3 = require("d3-fetch@1")
countries = (await d3.tsv("https://unpkg.com/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.

Function

i = {
  let i = 0;
  while (true) {
    yield ++i;
  }
}

Embedded

Documentation / Reference

Task Runner