The avatar for @xparagon
Fred Pallesen
Published
Tutorials
Edited
Oct 30, 2020
3 stars
3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
name = "Henrik"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d = d3.range(128, 0, -8)
Insert cell
[d3.min(d), d3.max(d)]
Insert cell
Insert cell
Insert cell
viewof scale = html`<input type="range">`
Insert cell
html`
Click to "run" this cell to see the animation in work:
<div class="growMeBox"></div>
`
Insert cell
html`<style>
@keyframes example {
from {width: 50px; background-color: yellow; } to {width: 350px; background-color: red; }
}
.growMeBox {
border: 2px solid black;
height: 150px;
width: 350px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
</style>
`
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