File AttachmentsSlideViews are Mutable ValuesGenerator Cells, Functions and ObjectsCustom GeneratorsNotebook VisualizerHello and Welcome!Introduction 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
Synchronized Views
viewof x = html`<input type=range>`
x
class View {
constructor(value) {
Object.defineProperties(this, {
_list: {value: [], writable: true},
_value: {value, writable: true}
});
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.dispatchEvent({type: "input", value});
}
addEventListener(type, listener) {
if (type != "input" || this._list.includes(listener)) return;
this._list = [listener].concat(this._list);
}
removeEventListener(type, listener) {
if (type != "input") return;
this._list = this._list.filter(l => l !== listener);
}
dispatchEvent(event) {
const p = Promise.resolve(event);
this._list.forEach(l => p.then(l));
}
}
viewof y = new View(42)
y
{
const input = html`<input type=range min=0 max=100 step=1>`;
input.oninput = () => viewof y.value = input.valueAsNumber;
const update = () => input.value = viewof y.value;
viewof y.addEventListener("input", update);
invalidation.then(() => viewof y.removeEventListener("input", update));
return update(), input;
}
function bind(input, view) {
input.value = view.value;
input.oninput = () => view.value = input.valueAsNumber;
function update({value}) {
if (!isNaN(value) && input.valueAsNumber !== value) {
input.value = value;
}
}
view.addEventListener("input", update);
return Generators.disposable(input, () => {
view.removeEventListener("input", update);
});
}
bind(html`<input type=range min=0 max=100 step=1>`, viewof y)
bind(html`<input type=number min=0 max=100 step=1>`, viewof y)
y
bind(html`<input type=range min=0 max=100 step=1>`, viewof y)
import {slider} from "@embracelife/inputs"
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.
