Published
Edited
Feb 23, 2022
2 forks
Importers
178 stars
Insert cell
Insert cell
Insert cell
Insert cell
counter = {
let i = 0;
while (true) {
await Promises.delay(1000);
yield i++;
}
}
Insert cell
Insert cell
sentence = `${counter * 1000} milliseconds since you loaded the page.`
Insert cell
Insert cell
Insert cell
viewof slider = html`<input type="range" min=0 max=10 step=1>`
Insert cell
Insert cell
x = 2 // ** slider
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mac = /Mac|iPhone/.test(navigator.platform)
Insert cell
widescreen = width >= 954
Insert cell
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("")}`
Insert cell
aside = async file => html`<img src="${await file.url()}" style="
border: 1px solid #c4c4c4;
border-radius: 50%;
float: right;
width: 100px;">`
Insert cell
Insert cell
import {classicVsNextVisualDataflow} from "@observablehq/classic-vs-next-infobox"
Insert cell

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.
Learn more