Notebooks 2.0 is here.
File AttachmentsSlideGenerator 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
Views are Mutable Values
ordinary_viewof = md`## simple viewof + slider`
viewof x = html`<input type=range>`
x
{
viewof x.value = Math.random() * 100;
viewof x.dispatchEvent(new CustomEvent("input"));// without it x won't be updating
}
x
{
for (let i = 1; i <= 50; ++i) {
viewof x.value = i;
viewof x.dispatchEvent(new CustomEvent("input"));
yield;
}
}
x // The same x as above (and below)!
{
const form = html`<form onsubmit="return false;">
<button name=inc>increment</button>
<button name=dec>decrement</button>
</form>`;
form.inc.onclick = () => {
++viewof x.value;
viewof x.dispatchEvent(new CustomEvent("input"));
};
form.dec.onclick = () => {
--viewof x.value;
viewof x.dispatchEvent(new CustomEvent("input"));
};
return form;
}
{
const input = html`<input type=range min=0 max=100 step=1>`;
input.oninput = () => {
viewof x.value = input.valueAsNumber;
viewof x.dispatchEvent(new CustomEvent("input"));
};
const update = () => input.value = viewof x.value;
viewof x.addEventListener("input", update);
invalidation.then(() => viewof x.removeEventListener("input", update));
return update(), input;
}
x // The same x as above (and below)!
{
const input = html`<input type=number min=0 max=100 step=1>`;
input.oninput = () => {
viewof x.value = input.valueAsNumber;
viewof x.dispatchEvent(new CustomEvent("input"));
};
const update = () => input.value = viewof x.value;
viewof x.addEventListener("input", update);
invalidation.then(() => viewof x.removeEventListener("input", update));
return update(), input;
}
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.
