“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” ― Antoine de Saint-Exupéry
Public
Edited
Jul 19, 2024
Paused
Comments locked
{
await visibility();
yield Object.assign($(hello), {
style: "--qb-semaphore: --qb-success"
});
}
{
await visibility();
yield Object.assign($(hello), {
className: ["fade--in"].join(" "),
style: "--qb-semaphore: --qb-success"
});
}
{
await visibility();
yield Object.assign($(hello), {
className: ["fade--in"].join(" "),
style: "--qb-semaphore: --qb-warning"
});
}
{
await visibility();
yield Object.assign($(hello), {
style:
"--qb-semaphore: --qb-warning; --qb-animation-hook: --fade-in ease-in-out 3s"
});
}
{
await visibility();
yield Object.assign($(hello), {
style: "--qb-semaphore: --qb-danger"
});
}
{
await visibility();
yield Object.assign($(hello), {
style:
"--qb-semaphore: --qb-danger; --qb-animation-hook: --fade-in cubic-bezier(.2, .65, .6, 1) infinite alternate 3s"
});
}
((elt) => elt && (elt.style.setProperty("--qb-waypoint", waypoint), waypoint))(
mutable probe
)
ident = "--qb-states"
states = colors
.slice()
.reverse()
.map((x) =>
Object.fromEntries([
["color", x + ""],
["background-color", Object.assign(Object.create(x), { opacity }) + ""]
])
)
colors = [d3.color("red"), d3.color("orange"), d3.color("green")].concat(
toggle ? [d3.color("blue")] : []
)
mutable probe = null
available = CSS.supports("(--css: variables)")
hello = html`<span>Hello, World!`
$ = (elt) => elt.cloneNode(true)
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.
