viewof view = vl.markBar()
.data(vl.data().name('data')) // empty data set, provide name for later reference
.encode(
vl.x().fieldO('x').axis({labelAngle: 0}),
vl.y().fieldQ('y').scale({domain: [0, 100]}) // stable y-axis across data draws
)
.render()
// create a button that changes the data when clicked
viewof button = {
const button = html`<button>Update Data</button>`;
button.addEventListener('click', () => {
const add = [];
for (let i = 1; i <= 10; ++i) { // generate random data
add.push({x: i, y: 5 + Math.round(90 * Math.random())});
}
update(view, 'data', add, () => true); // insert new data, remove old data
});
return button;
}
// insert and/or remove tuples using a Vega ChangeSet
// re-run and return (a promise for) the View
function update(view, name, insert, remove) {
const cs = vl.vega.changeset();
if (remove != null) cs.remove(remove);
if (insert != null) cs.insert(insert);
return view.change(name, cs).runAsync();
}
import {vl} from '@vega/vega-lite-api-v5'
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.
