Tech Lead at Taktile.
Formerly Firebase, Google
profile = juice((name, age) => html`Your name is ${name} your age is ${age}`, {
name: "[0]", // we index into the ...arguments array
age: "[1]"
})
viewof example = profile("tom", 21) // profile now constructs a reactive component
Inputs.bind(Inputs.range([0, 99]), viewof example.age) // so you can do granular biunding
viewof stateLostExample = dynamicRange()
stateLostExampleUpdater = {
let i = 0;
const banner = "Label updates break the slider :( ";
while (true) {
yield Promises.delay(100);
stateLostExample.label = (banner + banner).substring(i, i + 15);
i = (i + 1) % banner.length;
}
}
dynamicRange = juice(Inputs.range, {
label: "[1].label",
min: "[0][0]", // "range" is first arg (index 0), the min is the 1st arg of the range array
max: "[0][1]", // "range" is first arg, the max is the 2nd paramater of that array
result: "[1].value" // "result" can be set in the options.value, options being the 2nd arg (index 0)
})
viewof dynamicRangeExample = dynamicRange([-1, 1], { label: "dynamic range" })
dynamicRangeExample
viewof dynamicRangeMin = dynamicRange([-1, 1], {
label: "dynamic range min",
value: -1
})
viewof dynamicRangeMax = dynamicRange([-1, 1], {
label: "dynamic range max",
value: 1
})
minMaxConstraints = {
// We want dynamicRangeMax to constrain the dynamic range's max and min
Inputs.bind(viewof dynamicRangeExample.max, viewof dynamicRangeMax.result);
Inputs.bind(viewof dynamicRangeExample.min, viewof dynamicRangeMin.result);
// Of course, the max of the min should also be constrained by the max too
Inputs.bind(viewof dynamicRangeMin.max, viewof dynamicRangeMax.result);
Inputs.bind(viewof dynamicRangeMax.min, viewof dynamicRangeMin.result);
}
dynamicSelect = juice(Inputs.select, {
label: "[1].label",
options: "[0]", // "options" is first arg (index 0) of Inputs.select
result: "[1].value" // "result" can be set in the options.value, options being the 2nd arg (index 0)
})
viewof exampleSelect = dynamicSelect([], { label: "play a card" })
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.