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
Articles Related
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
- external data with Javascript - Promise Function
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
- Cells can be defined as Generator
i = {
let i = 0;
while (true) {
yield ++i;
}
}