import {vl} from '@vega/vega-lite-api-v5'
import {printTable} from '@uwdata/data-utilities'
cars = (await require('vega-datasets@1'))['cars.json']() // import cars
printTable(cars.slice(0, 5)) // display first 5 rows.
weather = [
{"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},
];
printTable(weather)
vl.markPoint() // use mark point
.data(weather) // use weather dataset
.render() // compile and render the visualization
vl.markPoint() // use mark point
.data(weather) // use weather dataset
.encode(
vl.y().field('city').type('nominal'), //map the city field to y channel with nominal type.
vl.x().field('precip').type('quantitative')
)
.render() // compile and render the visualization
vl.markPoint() // use mark point
.data(weather) // use weather dataset
.encode(
vl.y().fieldN('city'), // same as field('city').type('nominal')
vl.x().fieldQ('precip') // same as field('precip').type('quantitative')
)
.render() // compile and render the visualization
vl.markPoint() // Change markPoint to: markSquare, markCircle, markArea, or markBar
.data(weather)
.encode(
vl.y().fieldN('city'),
vl.x().fieldQ('precip'),
// add color channel to city field, nominal type
// add shape channel to city field, nominal type
// Note: For shape channel to work, change the mark to markPoint
// add size channel to precip field, quantitative type
// add opacity channel to precip field, quantitative type
)
.render()
vl.markCircle({color:'firebrick'})
.data(cars)
.encode(
vl.x().fieldO('Cylinders'),
vl.y().average('Miles_per_Gallon'), // computes average of miles per gallon grouped over other channels.
).render()
vl.markPoint({filled:true, color:'teal'})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon')
)
.render()
vl.markPoint({filled:true, color:'teal'})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower').scale({type:'log'}), // use log scale
vl.y().fieldQ('Miles_per_Gallon').scale({type:'log'}) // use log scale
)
.render()
vl.markPoint({filled:true, color:'teal'})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon').scale({type:'sqrt'}), // use sqrt scale
)
.render()
vl.markPoint({filled:true, color:'teal'})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon') // add custom title
)
.render()
plot = {
return vl.markPoint({filled:true, color:'teal'})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon')
)
.title('Miles per Gallon vs Horsepower') // Title for the overall chart
.render()
}
vl.markPoint({filled:true, color:'teal'})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower')
.axis({
orient: 'top' // place x axis on the top
}),
vl.y().fieldQ('Miles_per_Gallon')
.axis({
orient: 'right' // place y axis on the right
})
.title('Miles per Gallon'),
)
.title('Miles per Gallon vs Horsepower')
.render()
vl.markCircle()
.data(cars)
.encode(
vl.x().fieldQ('Cylinders'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Cylinders')
)
.render()
vl.markCircle()
.data(cars)
.encode(
vl.x().fieldQ('Cylinders'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Cylinders')
.legend(
{orient: 'bottom'} // move legend at bottom
)
)
.render()
vl.markCircle()
.data(cars)
.encode(
vl.x().fieldQ('Cylinders'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Cylinders')
.legend(
{orient: 'bottom', titleOrient: 'left'} // move legend at bottom, legend title to left.
)
)
.render()
vl.markCircle()
.data(cars)
.encode(
vl.x().fieldQ('Cylinders'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Cylinders')
.scale({scheme: 'tableau10'})
.legend(
{orient: 'bottom', titleOrient: 'left'} // move legend at bottom, legend title to left.
)
)
.render()
vl.markCircle({color:'teal'})
.data(cars)
.encode(
vl.x().fieldO('Cylinders'),
vl.y().average('Miles_per_Gallon'),
vl.column('Origin')
).render()
{
const averageTicks = vl.markTick({filled:true, color:'teal',
'thickness': 2})
.data(cars)
.encode(
vl.x().fieldO('Cylinders'),
vl.y().average('Miles_per_Gallon').title('Miles per Gallon'),
);
const allPoints = vl.markPoint({filled:true, color:'firebrick'})
.data(cars)
.encode(
vl.x().fieldO('Cylinders'),
vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon'),
vl.opacity().value(0.3)
);
return vl.layer(allPoints, averageTicks)
.title('Cylinders vs Miles per Gallon')
.render()
}
horsepower_acceleration = {
const mpgHorsepower = vl.markPoint({filled:true, color:'firebrick'})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon')
)
.title('Miles per Gallon vs Horsepower');
const mpgAcceleration = vl.markPoint({filled:true, color:'steelblue'})
.data(cars)
.encode(
vl.x().fieldQ('Acceleration'),
vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon')
)
.title('Miles per Gallon vs Acceleration');
return vl.hconcat(mpgHorsepower, mpgAcceleration).render()
}
specification = vl.markPoint({filled:true, color:'teal'})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon').title('Miles per Gallon')
)
.title('Miles per Gallon vs Horsepower') // Title for the overall chart
.toSpec() // return the JSON specification
embed = require("vega-embed@3") // import vega-embed function and store it locally as embed.
embed(specification)
specification_copy = JSON.parse(JSON.stringify(specification)) // make a deep copy
specification_copy.title = "Relationship between Miles per Gallon and Acceleration"
specification_copy.encoding.x = {
field: "Acceleration",
type: "quantitative"
}
specification_copy
embed(specification_copy) // run this cell to see the changes
vl.markPoint() // Change markPoint to: markSquare, markCircle, markArea, or markBar
.data(weather)
.encode(
vl.y().fieldN('city'),
vl.x().fieldQ('precip'),
// add color channel to city field, nominal type
vl.color().fieldN('city'),
// add shape channel to city field, nominal type
vl.shape().fieldN('city'),
// add size channel to precip field, quantitative type
vl.size().fieldQ('precip'),
// add opacity channel to precip field, quantitative type
vl.opacity().fieldQ('precip'),
)
.render()
vl.markCircle({color:'firebrick'}) // all kinds of named css colors can be passed here.
.data(cars)
.encode(
vl.x().fieldQ('Cylinders'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.tooltip(['Name', 'Origin']) // optional teaser
)
.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.
