The end-to-end solution for building and hosting better data apps, dashboards, and reports.
length = 100 // try changing this number and running the cell with shift-enter
height = 60 // or change this one, a cell can depend on lots of other cells
html`<div style="width: ${length}px; height: ${height}px; background-color: blue;"></div>`
`the width is ${length} and the height is ${height}` // note a cell can be referenced from multiple cells too!
sliderThatDoesNothing = html`<input type="range" min="0" max="${width}" value="50"></input>`
viewof greenLength = html`<input type="range" min="0" max="800" value="50"></input>`
html`<div style="width: ${greenLength}px; height: ${height}px; background-color: green;"></div>`
greenLength + " pixels wide"
greenLength % 2 === 0 ? "A nice even length." : "What an odd length!"
viewof simple = slider()
simple
viewof money = slider({
min: 0,
max: 1e9,
step: 1000,
value: 3250000,
format: ",",
description:
"Zero to one billion, in steps of one thousand, formatted as a (US) number"
})
money
viewof range = rangeSlider({
min: 0,
max: 200,
value: [50, 150],
precision: 0, // how many decimal places
title: 'Ranges of numbers between 0 and 200',
})
range
viewof coordinates = worldMapCoordinates([-122.27, 37.87])
coordinates
counterGenerator = function*() {
let i = 0;
while (true) {
yield i++;
}
}
counterGenerator()
i = {
let i = 0;
while (true) {
yield i;
i+= 3;
if (i > 800) {
i = 0;
}
}
}
html`<div style="width: ${i}px; height: 60px; background-color: green;"></div>`
viewof keyframe = Scrubber(keyframes, {
format: ([date]) => formatDate(date),
delay: duration,
loop: false
})
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.
