Himarsha Jayanetti
CS 625 Fall 2019
import {vl} from '@vega/vega-lite-api'
import {printTable} from '@uwdata/data-utilities'
data = require('vega-datasets') // import vega_datasets
cars = data['cars.json']() // load and parse cars data
printTable(cars.slice(0, 10)) // 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": "New York", "month": "Apr", "precip": 3.94},
{"city": "New York", "month": "Aug", "precip": 4.13},
{"city": "Chicago", "month": "Apr", "precip": 3.62},
{"city": "Chicago", "month": "Aug", "precip": 3.98},
];
vl.markSquare()
.data(df)
.render()
vl.markSquare()
.data(df)
.encode(vl.y().field('city').type('nominal'))
.render()
vl.markSquare()
.data(df)
.encode(vl.y().fieldN('city'))
.render()
vl.markBar()
.data(df)
.encode(
vl.x().fieldQ('precip'),
vl.y().fieldN('city')
)
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().median('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.markSquare({color: 'purple'})
.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.markPoint().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
return vl.layer(line, point).render();
}
{
const mpg = vl.markLine({point:true}).data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
return (mpg).render();
}
{
const mpg = vl.markBar().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
const hp = mpg.encode(vl.y().average('Horsepower'));
return vl.hconcat(mpg ,hp).render();
}
vl.markPoint().data(cars).encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Origin'),
vl.tooltip(['Name', 'Year']) // 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(1)).value(0);
// 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
.scale({rangeStep: null}) // subbdivide the full default chart width
.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
)
.select(brush) // add interval brush selection to the chart
.height(100); // 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.toJSON(), 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.toJSON(), 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.
