Observable

> Observable

1 - 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

3 - Note

3.1 - Key Shortcut

  • Shift + Return to evaluate

3.2 - 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.`
Advertising

3.3 - Loading

status = new Promise(resolve => {
  setTimeout(() => {
    resolve({resolved: new Date});
  }, 2000);
})
  • library (require returns a promise)
d3 = require("[email protected]")
countries = (await d3.tsv("https://unpkg.com/[email protected]/world/110m.tsv"))
    .sort((a, b) => b.pop_est - a.pop_est) // Sort by descending estimated population.
    .slice(0, 10) // Take the top ten.

3.4 - Function

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

3.5 - Embedded

4 - Documentation / Reference

Advertising
observable/observable.txt · Last modified: 2019/02/16 17:40 by gerardnico