Passionate about viz & systems thinking. Stanford CS 2017
a = `I show up first, depend on the value of "b" defined later: ${b}`
b = '"Cell b" here! Wow, observable knew to run me first. 🧠!'
"Implicitely, this naked string gets 'returned' from this cell and Observable displays it"
42
immuteyTheObservableVariable = "Haha, I'm still in JS land"
immuteyTheObservableVariable + ' 😊'
new Promise(resolve =>
setTimeout(
() =>
resolve(
`${new Date()} -- Async code is native to Observable: it just waits patiently for it to resolve. Re-run this cell...`
),
1000
)
)
const whoops = "I forgot that left of = is Observable Land, no JS-style variable declarations allowed 😛"
outputReturned = {
const x = 40;
const y = 2;
return x + y;
}
outputYielded = {
const x = 40;
const y = 2;
yield x + y;
}
{
yield 1;
yield 2;
yield 3;
yield "Yowza, 1,2, and 3 were yielded so fast I didn't even see the numbers!";
const p = new Promise(resolve =>
setTimeout(
() =>
resolve(
'If you yield a promise, Observable waits for it to fetch, then displays it 🐶 '
),
2000
)
);
yield p;
}
opacity = {
let opacity = 0;
while (true) {
if (opacity > 1) {
opacity = 0;
}
opacity += 0.01;
yield opacity;
}
}
html`<h1 style="opacity: ${opacity}">Weeeee, I love generatorsssss</h1>`
md`Which brings us to our last point: when inside JS Land, Observable leaves you a few functions floating in the global namespace, most prominently: \`md()\` and \`html()\``
html
md
html(["<h2>You can use regular () style function calls</h2>"])
html`<cool-kids style="color: BlueViolet">... but the cool kids use template literals</cool-kids>`
_ = require("lodash")
_.camelCase('I love lodash')
d3 = require("d3@6")
{
const color = d3
.scaleLinear()
.domain([0, 1])
.range(['red', 'blue'])(opacity);
yield html`<div style="color: ${color}">D3 scales numbers into colors, wowow</div>`;
}
import { slider } from '@jashkenas/inputs'
html`<h1 style="opacity: ${sliderOutput}">Weeeee ... can't let generators have all the fun. Slider time!</h1>`
viewof sliderOutput = slider()
import { chart } from '@observablehq/notebook-visualizer'
chart
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.
