Data visualization and analysis at the University of Washington, Seattle.
import {vl} from '@vega/vega-lite-api-v5'
import {printTable} from '@uwdata/data-utilities'
data = require('vega-datasets@1') // import vega_datasets
cars = data['cars.json']() // load and parse cars data
printTable(cars.slice(0, 5)) // display the first five rows
data['cars.json'].url
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},
];
vl.markPoint()
.data(df)
.render()
vl.markPoint()
.data(df)
.encode(vl.y().field('city').type('nominal'))
.render()
vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'))
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().fieldQ('precip'),
vl.y().fieldN('city')
)
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().average('precip'),
vl.y().fieldN('city')
)
.render()
vl.markBar()
.data(df)
.encode(
vl.x().average('precip'),
vl.y().fieldN('city')
)
.render()
vl.markBar()
.data(df)
.encode(
vl.y().average('precip'),
vl.x().fieldN('city')
)
.render()
vl.markPoint({color: 'firebrick'})
.data(df)
.encode(
vl.x().fieldQ('precip').scale({type: 'log'}).title('Log-Scaled Precipitation'),
vl.y().fieldN('city').title('City')
)
.render()
vl.markLine()
.data(cars)
.encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
)
.render()
{
const line = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
const point = vl.markCircle().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
return vl.layer(line, point).render();
}
{
const mpg = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
return vl.layer(mpg, mpg.markCircle()).render();
}
{
const mpg = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
const hp = mpg.encode(vl.y().average('Horsepower'));
return vl.hconcat(
vl.layer(mpg, mpg.markCircle()),
vl.layer(hp, hp.markCircle())
).render();
}
vl.markPoint().data(cars).encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Origin'),
vl.tooltip(['Name', 'Origin']) // show the Name and Origin fields in a tooltip
).render()
{
// create an interval selection over an x-axis encoding
const brush = vl.selectInterval().encodings('x');
// determine opacity based on brush
const opacity = vl.opacity().if(brush, vl.value(0.9)).value(0.1);
// an overview histogram of cars per year
// add the interval brush to select cars over time
const overview = vl.markBar()
.encode(
vl.x().fieldO('Year').timeUnit('year') // extract year unit, treat as ordinal
.axis({title: null, labelAngle: 0}), // no title, no label angle
vl.y().count().title(null), // counts, no axis title
opacity // modulate bar opacity based on the brush selection
)
.params(brush) // add interval brush selection to the chart
.width(400) // use the full default chart width
.height(50); // set chart height to 50 pixels
// a detail scatterplot of horsepower vs. mileage
const detail = vl.markPoint()
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
opacity // modulate point opacity based on the brush selection
);
// vertically concatenate (vconcat) charts
return vl.data(cars).vconcat(overview, detail).render();
}
{
const plot = vl.markCircle().encode(
vl.x().average('precip'),
vl.y().fieldN('city')
);
return html`<pre>${JSON.stringify(plot.toObject(), 0, 2)}</pre>`; // format JSON data
}
{
const plot = vl.markCircle().encode({
x: {field: 'precip', type: 'quantitative', aggregate: 'average'},
y: {field: 'city', type: 'nominal'}
});
return html`<pre>${JSON.stringify(plot.toObject(), 0, 2)}</pre>`; // format JSON data
}
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.
