import {vl} from '@vega/vega-lite-api-v5' // Vega-Lite API visualization library
data = require('vega-datasets@1') // sample data
carsIn = data['driving.json']() // load the "driving" example dataset
viewof df = Inputs.table(carsIn, { rows: 30 })
vl.markCircle()
.data(df)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('miles')
)
.height(400)
.width(800)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
vl.markCircle()
.data(df)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('gas').scale({domain: [0, 6.0]}) // specify the start/end points of the Y axis
)
.height(400)
.width(800)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
/* Representing all three variables in one visualization
(This may not be a good idea.) */
vl.markSquare()
.data(df)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('gas'),
vl.size().fieldQ('miles'), // Encode miles traveled as area…
vl.color().fieldQ('miles') // …and as color, as well
)
.height(600)
.width(800)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
/* A version that borrows the concept behind the NYT graphic.
We have to tell Vega-Lite to draw year-by-year ('vl.order()') */
vl.markLine()
.data(df)
.encode(
vl.x().fieldQ('miles'),
vl.y().fieldQ('gas'),
vl.order().fieldQ('year').sort('ascending') // Try sorting by 'miles' instead
)
.render()
/* A version that adds together lines, circles, and text labels */
{
// Small circles at each observation
// Specify the color of each circle as a hex value
const circleLayer = vl.markCircle({color: '#555'})
.encode(
vl.x().fieldQ('miles'),
vl.y().fieldQ('gas'),
);
// Lines to connect the observations
// We have to specify the drawing order
// Again, we change the color of the lines
const baseLayer = vl.markLine({color: '#eee'})
.encode(
vl.x().fieldQ('miles'),
vl.y().fieldQ('gas'),
vl.order().fieldQ('year').sort('ascending') // Try sorting by 'miles' instead
);
// Text labels with the years
// We are shifting the labels so they are 10 px down and 10 px to the right
const textLayer = vl.markText({dx: 15, dy: 10})
.encode(
vl.x().fieldQ('miles'),
vl.y().fieldQ('gas'),
vl.text().fieldO('year')
);
// combine the layers
return vl.layer(baseLayer,circleLayer,textLayer)
.data(df)
.height(800)
.width(800)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.