Public
Edited
Feb 11
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
text = md`<pre>empty islands never see humans
yet hear human language echoes
returning sunlight enters under boughs
again gleaming green mosses canopy</pre>`
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
css = html`
<style>

@font-face {
font-family: 'AndaleMono';
src: url('${await andaleMono.url()}');
}

.textcontainer {
position: relative;
min-height: 300px;
font-family: 'AndaleMono', monospace;
font-size: 3vw;
}

.text {
position: absolute;
color: rgba(0,0,0,0);
transition: color 2s ease-in-out;
}

.text.visible {
color: rgba(0,0,0,255);
/* starts readable */
}

</style>
`
Insert cell
Insert cell
reliablyReferencedElement = html`<div></div>` // div is empty when defined ...
Insert cell
(reliablyReferencedElement.innerText =
'This is my reliably referenced element.') // but reliably referenced and filled in by this cell, reactively
Insert cell
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