Published
Edited
Feb 12, 2022
import {vl} from '@vega/vega-lite-api-v5'
data = require('vega-datasets@1') // import vega_datasets
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},
];
obj = vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'));
obj.render()
html`<pre>${ JSON.stringify(obj.toObject(), 0, 2) }</pre>`
obj2 = vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'));
obj2.render();
html`<pre>${ JSON.stringify(obj2.toObject(), 0, 2) }</pre>`
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.
