Web developer and autodidact with an interest in creative coding.
bookMutable = loadNotebook('@observablehq/introduction-to-mutable-state', {invalidation})
bookInputs = loadNotebook('@observablehq/hello-inputs', {invalidation})
bookMutable.width
2 * (await bookMutable.width)
yield* bookMutable.width
{
for await(const value of bookMutable.width) {
yield 2 * value;
}
}
iterate(bookMutable.width, value => 2 * value)
yield* bookMutable.from('width', 'counterFives')
{
for await(const [theWidth, counter] of bookMutable.from('width', 'counterFives')) {
yield `width × 2: ${2 * theWidth}, counter: ${counter}`;
}
}
iterate(
bookMutable.from('width', 'counterFives'),
([theWidth, counter]) => `width × 2: ${2 * theWidth}, counter: ${counter}`
)
htl.html`<button ${{
onclick: () => bookMutable['mutable counterEven'] = 999 // This is async.
}}>Set counterEven value to 999`
yield* bookMutable.counterEven
yield* bookMutable.counter
bookMutable['mutable counterEven']
bookInputs.counter = 3
bookInputs['viewof sport']
yield* bookInputs.sport
yield* bookInputs.selectedAthletes
viewof localInput = Inputs.radio(['golf', 'judo'], {value: 'golf', label: 'Local'})
// Overridden viewof
yield* bookInputs.with({'viewof sport': viewof localInput}).selectedAthletes
bookInputs['viewof weight']
Inputs.bind(
Inputs.range([0, 200], {step: 1}),
await bookInputs['viewof weight'],
invalidation
)
yield* bookInputs.weight
yield* bookMutable.with({
count: iterate(bookInputs.weight)
}).doubleCount
`${bookInputs}`
`${bookInputs.sports}`
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.