Public
Edited
Mar 16, 2023
import {printTable} from '@uwdata/data-utilities'
data = require('vega-datasets@1')
printTable(cars.slice(0, 5))
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()
d3 = require('d3@6')
{
const points = vl.markCircle()
.data(vl.csv().name('day')) // lookup 'rawCSV' from the datasets object
.encode(
vl.x().fieldQ('season').axis({tickMinStep: 1}),
vl.y().fieldQ('windspeed').axis({tickMinStep: 1}),
vl.size().fieldQ('c').legend({titleAnchor: 'middle'})
);
return vl.layer(
points,
points.mark('line').encode(vl.size().value(2))
)
.datasets({rawCSV: 'a,b,c\n1,2,3\n4,5,6\n7,8,9\n6,5,4\n3,2,1'})
.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.
