data = (await require('vega-datasets'))['gapminder.json']()
md`${data.length} rows, ${Object.keys(data[0]).length} columns!`
printTable(data.slice(0, 10))
data2000 = data.filter(d => d.year === 2000)
printTable(data2000.slice(0, 10))
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldO('cluster')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]})
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.shape().fieldN('cluster')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country'),
vl.order().fieldQ('pop').sort('descending')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.order().fieldQ('pop').sort('descending'),
vl.tooltip(['country', 'fertility', 'life_expect'])
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster'),
vl.shape().fieldN('cluster')
)
.render()
vl.markPoint({filled: true, size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster'),
vl.shape().fieldN('cluster')
)
.render()
vl.markCircle({size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
vl.markSquare({size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldN('country'),
vl.y().fieldQ('pop')
)
.render()
vl.markLine()
.data(data)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.width(400)
.render()
dataUS = data.filter(d => d.country === 'United States')
vl.markArea()
.data(dataUS)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility')
)
.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.
