Notebooks 2.0 is here.

Published
Edited
Apr 1, 2022
Insert cell
Insert cell
Insert cell
gm = FileAttachment("gapminder.csv").csv({typed: true})
Insert cell
data2007 = gm.filter(d => d.year === 2007)
Insert cell
Inputs.table(data2007.slice(0, 5))
Insert cell
How many rows (records) and columns (fields) are in the gm dataset?
Insert cell
${gm.length} rows, ${Object.keys(gm[0]).length} columns!
Insert cell
Insert cell
vl.markCircle()
.data(data2007)
.encode(
vl.x().fieldQ('lifeExp'),
vl.y().fieldQ('pop')
)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(data2007)
.encode(
vl.x().fieldQ('lifeExp').bin(true),
vl.y().fieldQ('pop')
)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(data2007)
.encode(
vl.x().fieldQ('lifeExp').bin({maxbins: 20}),
vl.y().fieldQ('pop')
)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(data2007)
.encode(
vl.x().fieldQ('lifeExp').bin({maxbins: 20}),
vl.y().count()
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(data2007)
.encode(
vl.x().fieldQ('lifeExp').bin({maxbins: 20}),
vl.y().count()
)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(data2007)
.encode(
vl.x().fieldQ('lifeExp').bin({maxbins: 20}),
vl.y().fieldQ('gdpPercap').bin({maxbins: 20})
)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(data2007)
.encode(
vl.x().fieldQ('lifeExp').bin({maxbins: 20}),
vl.y().fieldQ('gdpPercap').bin({maxbins: 20}),
vl.size().count()
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(data2007)
.encode(
vl.x().fieldQ('lifeExp').bin({maxbins: 20}),
vl.y().fieldQ('gdpPercap').bin({maxbins: 20}),
vl.color().count()
)
.render()
Insert cell
Insert cell
Insert cell
vl.markBar()
.data(data2007)
.encode(
vl.x().average('pop'),
vl.y().fieldN('continent')
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(data2007)
.encode(
vl.x().average('pop'),
vl.y().fieldN('continent')
.sort(vl.average('pop').order('descending'))
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(data2007)
.encode(
vl.x().median('pop'),
vl.y().fieldN('continent')
.sort(vl.median('pop').order('descending'))
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(data2007)
.encode(
vl.x().q1('pop'),
vl.x2().q3('pop'),
vl.y().fieldN('continent').sort(vl.median('pop').order('descending'))
)
.render()
Insert cell
Insert cell
data = FileAttachment("gapminder.csv").csv()
Insert cell
vl.markArea()
.data(data)
.encode(
vl.x().year("year"),
vl.y().max("pop")
)
.render()
Insert cell
vl.markLine()
.data(data)
.encode(
vl.x().year("year"),
vl.y().max("pop"),
vl.color().fieldN("continent")
)
.render()
Insert cell
Insert cell
Insert cell
vl.markArea()
.data(data)
.transform(
vl.calculate('datum.lifeExp * 2').as('doubleLE')
)
.encode(
vl.x().year('year'),
vl.y().median('doubleLE')
)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(data2007)
.transform(
vl.filter('datum.continent == "Africa"')
)
.encode(
vl.x().fieldQ('gdpPercap'),
vl.y().fieldQ('lifeExp')
)
.render()
Insert cell
vl.markCircle()
.data(data)
.transform(
vl.filter('year(datum.year) > 2000')
)
.encode(
vl.x().fieldQ('gdpPercap'),
vl.y().fieldQ('lifeExp')
)
.render()
Insert cell
Insert cell
import {vl} from "@vega/vega-lite-api-v5"
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