Published
Edited
Feb 10, 2018
Insert cell
Insert cell
2 * 3 * 7
Insert cell
{
let sum = 0;
for (let i = 0; i <= 100; ++i) {
sum += i;
}
return sum;
}
Insert cell
Insert cell
color = "red"
Insert cell
`My favorite color is ${color}.`
Insert cell
Insert cell
html`<span style="background:yellow;">
My favorite language is <i>HTML</i>.
</span>`
Insert cell
Insert cell
md`My favorite language is *Markdown*.`
Insert cell
Insert cell
html`My favorite color is <i style="background:${color};">${color}</i>.`
Insert cell
Insert cell
status = new Promise(resolve => {
setTimeout(() => {
resolve({resolved: new Date});
}, 2000);
})
Insert cell
Insert cell
status
Insert cell
Insert cell
d3 = require("d3-fetch@1")
Insert cell
Insert cell
countries = (await d3.tsv("https://unpkg.com/world-atlas@1/world/110m.tsv"))
.sort((a, b) => b.pop_est - a.pop_est) // Sort by descending estimated population.
.slice(0, 10) // Take the top ten.
Insert cell
Insert cell
i = {
let i = 0;
while (true) {
yield ++i;
}
}
Insert cell
`The current value of i is ${i}.`
Insert cell
Insert cell
date = {
while (true) {
yield new Promise(resolve => {
setTimeout(() => resolve(new Date), 1000);
});
}
}
Insert cell
Insert cell
slider = html`<input type=range>`
Insert cell
sliderValue = Generators.input(slider)
Insert cell
Insert cell
viewof value = html`<input type=range>`
Insert cell
value
Insert cell
Insert cell
import {viewof selection as cars} from "@mbostock/d3-brushable-scatterplot"
Insert cell
viewof cars
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more