viewof state = new Atom({ size: 100, hue: 0 })
state
root = [
"div",
ctx.ui.root,
[
slider,
{
min: 100,
max: 300,
step: 5,
value: state.size,
oninput: size => viewof state.resetIn("size", size)
},
`Font Size: ${state.size}%`
],
[
slider,
{
min: 0,
max: 360,
step: 10,
value: state.hue,
oninput: hue => viewof state.resetIn("hue", hue)
},
`Hue: ${state.hue}`
],
[
"span",
{
style: {
color: `hsl(${state.hue},100%,50%)`,
"font-size": `${state.size}%`
}
},
"Hello world"
]
]
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.
