md`The current time is ${new Date(now).toLocaleTimeString()}.`
slow_tick = {
// can't use Observable's `now` here, need to create new Date objects for some reason..
const tick_ms = 3000
yield new Date().getTime();
while(true) yield Promises.delay(tick_ms, new Date().getTime());
}
viewof chosen_input = html`<input type=${input_type}>`
hello_button = {
const button = html`<button>say hello`;
button.onclick = () => console.log('hello!');
return button;
}
viewof meter = html`
<meter min="0" max="100"
low="33" high="66" optimum="80"
value="${centillator}"
>`
meter
viewof progress = html`<progress max="100" value="${centillator}">`
progress
viewof ranged_value = html`<input type=range min=0 max=1 step=.01 value=.25>`
ranged_value
viewof selected_value = html`
<select>
<option value="">(select one)</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>`
selected_value
viewof textarea_value = html`<textarea cols=25 rows=12 placeholder='jot anything!'>`
textarea_value
function* errorView() { // from: https://talk.observablehq.com/t/error-reporting/3771/6
let resolve, reject;
const p = new Promise((res, rej) => {
resolve = res, reject = rej;
}),
timer = Promises.delay(5000).then(() => {
throw Error('time\'s up!');
}),
yep = Object.assign(html`<button>Resolve`, {
onclick() { resolve('Done!') }
}),
nope = Object.assign(html`<button>Reject`, {
onclick() { reject(Error('Not gonna happen')) }
});
yield html`<div>Stand by, we're "loading" (5sec max). ${yep} ${nope}`;
yield Promise.race([p, timer]).then(data => html`<div>${data}`)
}
errorView()
{
const r = 5, lim = 128;
const context = DOM.context2d(lim, lim);
for (let radius = r; radius < lim; radius += r) {
context.beginPath();
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.stroke();
}
return context.canvas;
}
dot`digraph { a -> b; a -> c; }`
html`${['d','b','9','7','5','3','1'].map((v,i) => {
const color = `#${v.repeat(3)}`;
return html`<div title="${color}" style="display:inline-block; width:50px; height:50px; background:${color};">`
})}`
svg`<svg width="100" height="100"><circle cx="50" cy="50" r="35" fill="#57f" />`
centillator = Math.round(Math.sin(now*.001) * 50 + 50)
dot = require("@observablehq/graphviz")
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.
