viewof inp = Inputs.radio(["a", "b", "c"], { value: "a" })
transitionGenerator(viewof inp)
trans
viewof trans = Inputs.input([])
transitionFilter(transitionGenerator(viewof inp), viewof trans)
position = ({ a: [1, 2, 3], b: [4, 5, 6], c: [7, 8, 9] })
transitionInterpolate(trans, (state) => position[state])
// View, Object -> (() -> Object)*
transitionGenerator = function* (
view,
{ time = 1000, easing = Easing.Linear.None, states = getStates(view) } = {}
) {
if (!view.value) {
throw "Input must have a value set.";
}
const getWeights = makeGetWeights(states);
const getTransition = makeGetTransition(states);
// initalize tween
let start = getWeights(view.value);
let tween = new TWEEN.Tween(start);
// listen to input, invoke tween when it changes
const inputted = () => {
tween
.stop()
.to(getWeights(view.value), time)
.easing(easing)
.start(undefined, true);
};
view.addEventListener("input", inputted);
while (true) {
// `start` is mutable, updated by the tween
tween.update();
yield getTransition(start);
}
// when generator disposed, remove listener
return () => view.removeEventListener("input", inputted);
}
transitionFilter = function* (generator, view) {
while (true) {
const value = generator.next().value;
if (!_.isEqual(view.value, value)) {
// see https://observablehq.com/@observablehq/synchronized-inputs
view.value = value;
view.dispatchEvent(new Event("input", { bubbles: true }));
}
yield value;
}
return null;
}
transitionInterpolate = function (transition, callbackFn) {
return transition
.filter((x) => x.weight > 0)
.map((x) => math.multiply(callbackFn(x.state), x.weight))
.reduce((acc, val) => math.add(acc, val));
}
Easing = TWEEN.Easing
states = ["alpha", "bravo", "charlie"]
getWeights = makeGetWeights(states)
weights = getWeights("bravo")
getTransition = makeGetTransition(states)
getTransition([0, 0.5, 0.5])
// String[] -> (Number[] -> Object[])
makeGetTransition = function (states) {
// Number[] -> Object[]
return function (weights) {
return weights.map((x, i) => ({ state: states[i], weight: x }));
};
}
viewof inpt = Inputs.radio(states)
getStates(viewof inpt)
// Input -> String[]
getStates = function (input) {
// seems potentially brittle - is there a more-robust way?
return Array.from(input.children[0].children).map((x) => x.innerText);
}
TWEEN = import(
"https://unpkg.com/@tweenjs/tween.js@20.0.3/dist/tween.esm.js?module"
)
math = import("https://cdn.skypack.dev/mathjs@11.8.2?")
import { changeTable } from "@ijlyttle/change-log"
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.
