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()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.