md`This means that everything in this document is actually some kind of code, which you can edit. See below!`
a = 9
addTwo = x => x+2
addTwo(a)
data = (await require('vega-datasets'))['gapminder.json']()
md`${data.length} rows, ${Object.keys(data[0]).length} columns! (This is a live data value by the way, see below)`
printTable(data.slice(0, 10))
data2000 = data.filter(d => d.year === 2000)
printTable(data2000.slice(0, 10))
vl.markPoint()
.data(data2000)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().field('fertility')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().field('fertility')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().field('fertility'),
vl.y().fieldQ('cluster')
)
.render()
// Comment: What happens if we do not annotate "cluster" as nominal data?
/* There is absolutely no difference, since I'm guessing Vega is doing some sort of smart interpretation that `cluster` is nominal. If I explicitly change it to a quantitative type, we see that it adds tick marks for 0.5's, which doesn't make sense because they don't exist.
*/
vl.markTick()
.data(data2000)
.encode(
vl.x().fieldQ('life_expect')
)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldN('cluster'),
vl.y().count()
)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldQ('life_expect').bin(true),
vl.y().count()
)
.render()
// Code for Visualization 1:
vl.markTrail()
.data(data2000)
.encode(
vl.x().fieldQ('life_expect').bin({maxbins: 100}),
vl.y().count(),
)
.render()
// Code for Visualization 2:
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('life_expect').bin(true),
vl.size().count(),
)
.render()
// Code for Visualization 3:
vl.markTick()
.data(data2000)
.encode(
vl.x().fieldQ('fertility').bin(true),
vl.opacity().count(),
)
.render()
// Code to recreate the above visualization:
vl.markPoint()
.data(data)
.encode(
vl.x().fieldQ('life_expect'),
vl.y().fieldQ('fertility'),
)
.render()
// Code for bi-variate visualization 3:
vl.markCircle()
.data(data)
.encode(
vl.x().field('year'),
vl.y().fieldQ('pop').scale({type: "log"}),
)
.render()
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.
