Published
Edited
Oct 16, 2019
md`# Intro to Vega-Lite`
500 * 10
coffee = 3
total = coffee * 5
color = "orange"
`My favorite color is ${color}`
html`<span style="background:yellow;">My favorite language is <i>HTML</i></span>.`
md`My favorite color is **${color}**.`
data = require('vega-datasets')
cars = data['cars.json']()
printTable(cars.slice(0,5))
// http://bit.ly/weather-vega
df = [
{"city": "Seattle", "month": "Apr", "precip": 2.68},
{"city": "Seattle", "month": "Aug", "precip": 0.87},
{"city": "Seattle", "month": "Dec", "precip": 5.31},
{"city": "New York", "month": "Apr", "precip": 3.94},
{"city": "New York", "month": "Aug", "precip": 4.13},
{"city": "New York", "month": "Dec", "precip": 3.58},
{"city": "Chicago", "month": "Apr", "precip": 3.62},
{"city": "Chicago", "month": "Aug", "precip": 3.98},
{"city": "Chicago", "month": "Dec", "precip": 2.56},
{"city": "Pittsburgh", "month": "Apr", "precip": 3.10},
{"city": "Pittsburgh", "month": "Aug", "precip": 3.50},
{"city": "Pittsburgh", "month": "Dec", "precip": 2.90},
];
printTable(df)
vl.markPoint()
.data(df)
.encode(vl.y().field('city').type('nominal'))
.render()
vl.markPoint()
.data(df)
.encode(
vl.y().fieldN('city'),
vl.x().fieldQ('precip')
)
.render()
vl.markPoint()
.data(df)
.encode(
vl.y().fieldN('city'),
vl.x().average('precip')
)
.render()
vl.markBar()
.data(df)
.encode(
vl.y().fieldN('city'),
vl.x().average('precip')
)
.render()
vl.markBar()
.data(df)
.encode(
vl.x().fieldN('city'),
vl.y().average('precip')
)
.render()
vl.markPoint()
.data(df)
.encode(
vl.y().fieldN('city'),
vl.color().fieldN('city'),
vl.x().fieldQ('precip').scale({type: 'log'}).title('Precipitation')
)
.render()
vl.markPoint()
.data(df)
.encode(
vl.y().fieldN('city'),
vl.color().fieldQ('precip'),
vl.x().fieldQ('precip').title('Precipitation')
)
.render()
printTable(cars.slice(0,5))
vl.markPoint()
.data(cars)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Origin'),
vl.tooltip(['Name', 'Origin'])
)
.render()
viewof hpMin = html`<input type=range />`;
hpMin
vl.markPoint()
.data(dataJapan)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Origin'),
vl.tooltip(['Name', 'Origin'])
)
.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.
