embed = require("vega-embed@7")
viewof view = embed({
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: 360,
data: {
values: [
{a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43},
{a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},
{a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}
],
name: 'source'
},
selection: {
a: {type: 'single'}
},
mark: 'bar',
encoding: {
x: {field: 'a', type: 'ordinal', axis: {labelAngle: 0}},
y: {field: 'b', type: 'quantitative'},
tooltip: {field: 'b', type: 'quantitative'},
color: {
condition: {selection: 'a', value: 'steelblue'},
value: 'grey'
}
},
// pass options to Vega-Embed
usermeta: {
embedOptions: {
renderer: 'svg'
}
}
})
view.insert('source', {a: 'J', b: 42}).run()
embedWithSpecificVersions = require.alias({
"vega": "vega@5.21.0",
"vega-lite": "vega-lite@5.2.0"
})("vega-embed@6")
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.
