Published
Edited
Oct 22, 2021
"Hello World"
x = 100
y = x * 5
a = {
const output = 1;
return output;
}
z = Promise.resolve(x * 10) // fetch, etc
today = {
const result = await new Promise((resolve) => {
resolve({ today: new Date() });
});
return result.today;
}
counter = {
let value = 1;
while (true) {
await new Promise((resolve) => setTimeout(resolve, 1000)); // wait for 1 second
yield value++;
}
}
<marquee>🦖</marquee>
mutable clicks = 2
handleClick = () => {
mutable clicks++;
}
htl.html`<button onclick=${handleClick}>Click me</button>`
viewof color = Inputs.color({ value: "#24c64d" })
viewof text = Inputs.text({ value: "Hello World" })
viewof size = Inputs.range([50, 400], { value: 200, step: 1 })
viewof zoom = Inputs.range([-100, 100], { value: 0, step: 1 })
viewof angle = Inputs.range([0, 360], { value: 0, step: 1 })
<div style="perspective:800px;width:${y*2}px;height:${x*2}px;display:flex;align-items:center;justify-content:center;">
<div style="background:${color};width:${y}px;height:${x}px;display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 2px 3px #aaa;font-size:${size}%;transform: perspective(500px) translate3d(0, 0, ${zoom}px) rotate(${angle}deg);">${text}</div>
</div>
items = [
{ weight: 100, height: 200, country: "A" },
{ weight: 200, height: 150, country: "A" },
{ weight: 300, height: 100, country: "B" },
{ weight: 50, height: 20, country: "C" }
]
Plot.dot(items, {
x: "weight",
y: "height",
fill: "country"
}).plot()
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.
