styledDiv(
"color: cornflowerblue; border: 1px solid lightgray; border-radius: 5px; margin: 20px; padding: 5px;",
html`Example`
)
scrollableDiv(
120,
html`<span style="font-size: 50px">Large text that would take too much space in the notebook and is therefore better put into a scrollable container</span>`
)
scrollXDiv(
html`<div style="width: ${width + 35}px; text-align: right;">Hi!</div>`
)
background("cornflowerblue", html`Example`)
border("2px solid cornflowerblue", html`Example`)
grid(
"1fr 1fr 1fr",
"",
"20px",
"<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>"
)
{
let i = 0;
yield i;
while (true) {
await delay(1000);
yield ++i;
}
}
unique([1, 2, 3, 1, 3, 4, 5])
unique([{ a: 1 }, { a: 1 }, { a: 2 }])
{
const array = get2dArray(5, 5, (row, col) => Math.random() * 10);
return print2dArray(array, (d) => d.toFixed(1));
}
{
const array = get2dArray(100, 100, (row, col) => row * 100 + col);
return print2dArray(array);
}
{
const array = get2dArray(5, 100, (row, col) => row * 5 + col);
return print2dArray(array, undefined, false);
}
normalizeNdArray([1, 2, 3, 4])
normalizeNdArray([
[
[1, 2],
[3, 4]
],
[
[1, 2],
[3, 4]
]
])
matrixColumnSum([
[1, 2],
[3, 4]
])
matrixColumnMedian([
[1, 2, 7],
[4, 5, 6],
[3, 8, 9]
])
getColorLightness("hsl(0, 100%, 42%)")
exampleColor = `rgb(${~~(255 * Math.random())}, ${~~(
255 * Math.random()
)}, ${~~(255 * Math.random())})`
getColorLightness(
exampleColor
)
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.
