MIT CS Graduate student in MIT Visualization Group.
Previously undergraduate member of @uwplse and @uwsampl.
Public
Edited
Jan 2, 2024
1 fork
function greet(lastCommaFirst) {
const firstSpaceLast = lastCommaFirst.split(',')
.map(s => s.trim())
.reverse()
.join(" ");
console.log(`Hello ${firstSpaceLast}!`)
}
greet("Pollock, Josh")
greet("Pollock , Josh")
greet("Pollock,Josh")
logTable(10)
// 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));
}
}
lastCommaFirst = new Observable("Pollock, Josh")
function parseName(lastCommaFirst) {
return lastCommaFirst.split(',')
.map(s => s.trim())
.reverse()
.join(" ")
}
lastCommaFirst.subscribe((lastCommaFirst) => parseName(lastCommaFirst));
function pipe(x /* Observable<T> */, f /* (x: T) => U */) /* Observable<U> */ {
// initialize a new output observable with the current value of f(x)
const obs = new Observable(f(x.read()));
// whenever the input observable changes...
x.subscribe((value) => {
// update the output observable with the new value of f(x)
obs.write(f(value));
})
return obs;
}
firstSpaceLast = pipe(lastCommaFirst, (lastCommaFirst) => parseName(lastCommaFirst))
// run this cell to see the latest value of firstSpaceLast
firstSpaceLast.read()
greeting = pipe(firstSpaceLast, (firstSpaceLast) => `Hello ${firstSpaceLast}!`)
greeting.subscribe((greeting) => console.log(`greeting: ${greeting}`))
// When you submit a name in this field, it will be written to the `name` Observable.
// If you only change the whitespace, you won't see a new console log!
viewof updatedName = Inputs.text({value: "name, your", placeholder: "Enter your last, first name", submit: true, autocomplete: false})
lastCommaFirst.write(updatedName)
logTable(10)
function greetSplit(lastCommaFirst) {
const first = lastCommaFirst.split(',')[1].trim();
const last = lastCommaFirst.split(',')[0].trim();
console.log(`Hello ${first} ${last}!`)
}
first = pipe(lastCommaFirst, (lastCommaFirst) => lastCommaFirst.split(',')[1].trim())
last = pipe(lastCommaFirst, (lastCommaFirst) => lastCommaFirst.split(',')[0].trim())
function combineLatest(...inputs) {
const observables = inputs.slice(0, -1);
const fn = inputs[inputs.length - 1];
/* NEW! */
// store the latest value for each observable
let latestValues = observables.map(obs => obs.read());
// initialize a new output observable
const obs = new Observable(fn(...latestValues));
// every time an observable changes...
observables.forEach((observable, index) => {
observable.subscribe((value) => {
/* NEW! */
// push the update to latestValues
latestValues[index] = value;
// update the output observable
obs.write(fn(...latestValues));
});
});
return obs;
}
greetingSplit = combineLatest(first, last, (first, last) => `Hello ${first} ${last}!`)
greetingSplit.subscribe((greetingSplit) => console.log(`greetingSplit: ${greetingSplit}`))
// When you submit a name in this field, it will be written to the `name` Observable.
// If you only change the whitespace, you won't see a new console log!
Inputs.bind(Inputs.text({value: "name, your", placeholder: "Enter your last, first name", submit: true, autocomplete: false}), viewof 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.
