Vega-Lite Stream Data

by NesterOne

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.1/vega.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.15/vega-lite.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.20/vega-embed.js"></script>
  
<div id="viz"></div>

JavaScript

var vlSpec = {
    '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
    'data': { 'name': 'table' },
    'width': 400,
    'mark': 'line',
    'encoding': {
        'x': { 'field': 'x', 'type': 'quantitative', 'scale': { 'zero': false } },
        'y': { 'field': 'y', 'type': 'quantitative' },
        'color': { 'field': 'category', 'type': 'nominal' }
    }
};
vega.embed('#viz', vlSpec).then(function(res) {
    /**
     * Generates a new tuple with random walk.
     */
    function newGenerator() {
        var counter = -1;
        var previousY = [5, 5, 5, 5];
        return function () {
            counter++;
            var newVals = previousY.map(function (v, c) { return ({
                x: counter,
                y: v + Math.round(Math.random() * 10 - c * 3),
                category: c
            }); });
            previousY = newVals.map(function (v) { return v.y; });
            return newVals;
        };
    }

    var valueGenerator = newGenerator();
    var minimumX = -100;
    window.setInterval(function () {
        minimumX++;
        var changeSet = vega.changeset().insert(valueGenerator()).remove(function (t) { return t.x < minimumX; });
        res.view.change('table', changeSet).run();
    }, 1000);
});