{
let div = document.createElement("div");
let view = new Vega.View(Vega.parse(VegaLite.compile(spec).spec)).initialize(div).run();
yield div;
// Generate 'nice' random values: instead of generating a new
// random number every turn, start with the last random number we
// generated.
let y = 0;
for (let x = 0;; x++) {
y += Math.random() - 0.5;
var changeSet = Vega.changeset()
// This changeset adds a new datapoint
.insert({x, y})
// And removes any datapoints from more than 10 ticks ago
//.remove(({x: xValue}) => xValue < x - 50);
view.change('table', changeSet).run();
yield Promises.delay(100, div);
}
}
spec = ({
$schema: 'https://vega.github.io/schema/vega-lite/v2.json',
data: { 'name': 'table' },
width: width,
height: width / 1.6,
autosize: 'fit',
mark: {
type: 'line',
interpolate: 'monotone'
},
encoding: {
x: { field: 'x', type: 'quantitative', scale: { zero: false } },
y: { field: 'y', type: 'quantitative' }
}
})
Vega = require('vega')
VegaLite = require('vega-lite@2/build/vega-lite.min.js')
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.
