Published
Edited
Apr 26, 2019
1 star
2 * 3 * 7
{
let sum = 10;
for (let i=0; i<100; i++) {
sum += 1;
}
return sum;
}
color = "orange"
`My favorite color is ${color}.`
html`<span style="background:yellow;">My favorite language is <i>HTML</i>.</span>`
md`My favorite language is **Markdown**.`
html`My favorite color is <i style="background:${color};">${color}</i>.`
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
data = require('vega-datasets')
cars = data['cars.json']()
printTable(cars.slice(0,5))
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().fieldN('city'))
.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({color: 'firebrick'})
.data(df)
.encode(
vl.y().fieldN('city').title('City'),
vl.x().fieldQ('precip').scale({type: 'log'}).title('Log-scaled 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()
dataJapan = cars.filter(d => d.Origin === 'Japan')
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.
