MIT CS Graduate student in MIT Visualization Group.
Previously undergraduate member of @uwplse and @uwsampl.
Public
Edited
Jan 2, 2024
1 fork
// An implementation of the observer pattern
class Observable {
constructor(initialValue) {
this._value = initialValue;
this.observers = [];
}
read() {
return this._value;
}
write(newValue) {
if (newValue !== this._value) {
this._value = newValue;
this.notifyObservers();
}
}
// Method to add an observer
subscribe(observer) {
this.observers.push(observer);
}
// Method to notify all observers about the value change
notifyObservers() {
this.observers.forEach(observer => observer(this._value));
}
}
name = new Observable("Josh")
function component(state) {
console.log("Hello " + state)
}
name.subscribe(component)
// When you click this button, it will call name.read()
// We can use `read` to inspect the value of the Observable, but this isn't necessary for correct execution
viewof nameValue = Inputs.button("Read name", { value: null, reduce: () => name.read() })
nameValue
// When you submit a name in this field, it will be written to the `name` Observable.
viewof updatedName = Inputs.text({placeholder: "Enter your name", submit: true, autocomplete: false})
name.write(updatedName)
logTable(10)
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.
