The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Feb 23, 2022
2 forks
Importers
178 stars
counter = {
let i = 0;
while (true) {
await Promises.delay(1000);
yield i++;
}
}
sentence = `${counter * 1000} milliseconds since you loaded the page.`
viewof slider = html`<input type="range" min=0 max=10 step=1>`
x = 2 // ** slider
mac = /Mac|iPhone/.test(navigator.platform)
widescreen = width >= 954
key = keys => html`${keys.split(" ").map(key => `<span style="
font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir,
helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial,
sans-serif;
font-size: 14px;
font-weight: 500;
box-shadow: 0 0 0 1px #dedede, 1px 1px 0 1px #e8e8e8;
margin: 0 4px;
min-width: 6px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
white-space: nowrap;
border-radius: .25rem;">${key}</span>`).join("")}`
aside = async file => html`<img src="${await file.url()}" style="
border: 1px solid #c4c4c4;
border-radius: 50%;
float: right;
width: 100px;">`
gallery = async items => html`<div style="display: flex; flex-wrap: wrap;">
${await Promise.all(items.map(async ([file, caption]) => html`<div style="flex: 200px 0 0; text-align: center; padding: 1em;">
<img src="${await file.url()}" style="
display: block;
margin: 0 auto;
border: 1px solid #c4c4c4;
border-radius: 50%;
width: 120px;"/>
${caption}
</div>`))}
</div>`
import {classicVsNextVisualDataflow} from "@observablehq/classic-vs-next-infobox"
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.
