Published
Edited
Apr 26, 2019
1 star
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
data = (await require('vega-datasets'))['gapminder.json']()
printTable(data.slice(0,10))
data2000 = data.filter(d => d.year === 2000)
printTable(data2000.slice(0,5))
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility')
)
.render()
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility').scale({zero: false}),
vl.y().fieldQ('life_expect').scale({zero: false})
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility').scale({zero: false}),
vl.y().fieldQ('life_expect').scale({zero: false}),
vl.size().fieldQ('pop').scale({range: [0,1000]}),
vl.color().fieldN('cluster').legend({orient: 'bottom'}),
vl.opacity().value(0.5),
// vl.shape().fieldN('cluster')
vl.tooltip(['country', 'fertility', 'life_expect']),
vl.order().fieldQ('pop').sort('descending')
)
.render()
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility').scale({zero: false}),
vl.y().fieldQ('life_expect').scale({zero: false}),
vl.size().fieldQ('pop').scale({range: [0,1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
// vl.shape().fieldN('cluster')
vl.tooltip(['country', 'fertility', 'life_expect']),
vl.order().fieldQ('pop').sort('descending'),
vl.column().fieldN('cluster')
)
.width(135)
.height(135)
.render()
vl.markTick()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster'),
vl.shape().fieldN('cluster')
)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldN('country'),
vl.y().fieldQ('pop')
)
.width(800)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldN('cluster'),
vl.y().fieldQ('pop'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.render()
vl.markBar()
.data(data2000)
.encode(
vl.x().min('life_expect'),
vl.x2().max('life_expect'),
vl.y().fieldN('cluster')
)
.render()
vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.data(data)
// .data(data.filter(d => (d.country === 'United States') || d.country === 'Canada'))
.encode(
vl.x().fieldQ('year'),
vl.y().fieldQ('fertility'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country'),
)
.width(800)
.render()
dataNA = data.filter(d => (d.country === 'United States') || d.country === 'Canada' || d.country==='Mexico')
vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.data(dataNA)
.encode(
vl.x().fieldQ('year'),
vl.y().fieldQ('fertility'),
vl.color().fieldN('country'),
vl.tooltip().fieldN('country')
)
.width(800)
.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.
