Published
Edited
Feb 24, 2021
17 stars
md`This means that everything in this document is actually some kind of code, which you can edit. See below!`
a = 5
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().fieldQ('fertility')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
// Comment: What happens if we do not annotate "cluster" as nominal data? Or if nothing happens, why might that be?
// Add your code here to produce the visualization above
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:
// Code for Visualization 2:
// Code for Visualization 3:
// Code to recreate the above visualization:
// Code to recreate the above visualization:
// Code to recreate the above visualization:
// Code to recreate the above visualization:
// Code to recreate the above visualization:
// Code to recreate the above visualization:
// Code for bi-variate visualization 1:
// Code for bi-variate visualization 2:
// Code for bi-variate visualization 3:
// Code to recreate the visualization above:
// Code to recreate the visualization above:
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.
