Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Buttons TimelineSpring Ruler TimelineIntervals TimelineUnbind two synchronized inputsInput: draw points on imageToggle inputVideo Time ZoomPoints TimelineIntervals Timeline - SVGThumbnails TimelineTimeline controlsRuler TimelineStack TimelineInputs + setterselectScaleChromaticLog sliderInput: Draw an arrow on an imageInput: Draw an arrow on a mapDetached video controlsInvisible Capture AreaPointer trace on imagePointer traceInput: Two-variables inputInput: move skeleton jointsInput: draw a box on image
Store and Synchronized Views
Also listed in…
State
createStore = initStore => {
const keys = Object.keys(initStore);
const s = Object.assign(dispatch(...keys), {
...initStore,
keys: () => keys
});
keys.forEach(k => {
s.on(`${k}.store`, d => {
s[k] = d;
});
});
return s;
}
store = createStore({ x: 20, y: 60 })
function createControl(
store,
key,
dom = html`<input type=range>`,
invalidation = disposal(dom)
) {
// Create the control
const control = dom;
const dispatchId = `${key}.input-control-${randomString()}`;
control.value = store[key];
// Listen to the store changes (store -> control)
store.on(dispatchId, function(d) {
if (this !== control) {
// The change has not been made by this control
control.value = d;
}
});
invalidation.then(() => store.on(dispatchId, null));
// Mutate the store on input (store <- control)
control.oninput = function() {
store.call(key, control, this.value);
};
return control;
}
createControl(store, 'x')
createControl(store, 'x')
createControl(store, 'y')
createControl(store, 'y', html`<input type=number min=0 max=100 step=1>`)
storeGetter = (store, field, invalidation) => {
const view = new View(store[field]);
const dispatchId = `${field}.store-getter-${randomString()}`;
store.on(dispatchId, d => (view.value = d));
invalidation.then(() => store.on(dispatchId, null));
return view;
}
viewof x = storeGetter(store, 'x', invalidation)
x
viewof y = storeGetter(store, 'y', invalidation)
y
stateGetter = (store, invalidation) => {
const keys = store.keys();
const init = keys.reduce((a, c) => {
a[c] = store[c];
return a;
}, {});
const view = new View(init);
for (const k of keys) {
const dispatchId = `${k}.state-getter-${randomString()}`;
store.on(dispatchId, d => {
view.value[k] = d;
view.dispatchEvent(new CustomEvent("input", { detail: view.value }));
});
invalidation.then(() => store.on(dispatchId, null));
}
return view;
}
viewof state = stateGetter(store, invalidation)
state
viewof d = {
// Create the control
const d = XYPad(store.x, store.y);
// Listen to the store changes (store -> XYPad)
store.on(`x.d`, x => (d.x = x));
store.on(`y.d`, y => (d.y = y));
invalidation.then(() => store.on(`x.d`, null));
invalidation.then(() => store.on(`y.d`, null));
// Mutate the store on input (store <- XYPad)
const updateX = () => store.call('x', this, d.x);
const updateY = () => store.call('y', this, d.y);
d.addEventListener("inputX", updateX);
d.addEventListener("inputY", updateY);
invalidation.then(() => d.removeEventListener("input", updateX));
invalidation.then(() => d.removeEventListener("input", updateY));
return d;
}
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.
