Old school D3 from simpler times

All examples By author By category About

sniperliu

Full window Github gist

vega signal example

Vega-Lite Block example.

You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!

forked from domoritz's block: Vega-Lite block example

forked from sniperliu's block: Vega-Lite update example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.34/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.4/vega-lite.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.18/vega-embed.js"></script>
  <style>
    body {
      font-family: sans-serif;
    }
    
    .vega-actions a {
      padding: 0.2em;
    }
  </style>
</head>

<body>  
  <div id="vis"></div>
  
  <script>
		// const spec = "stackarea.vega.v3.json";
    // const spec = "stackarea.v2.json";
    const spec = "stackarea.work.v3.json";

var values =
        [{"bounds": [1493382600000,1493383499999], "value":8574741,"start":"2017-04-28T20:30:00", "categories": "ABC"},
         {"bounds": [1493382600000,1493383499999], "value":7574741,"start":"2017-04-28T20:45:00", "categories": "ABC"},
         {"bounds": [1493382600000,1493383499999], "value":8074741,"start":"2017-04-28T21:00:00", "categories": "ABC"}];
    var count = 0;
    function cb (error, res) {
        window.setInterval(function () {
          if (count < 3) {
             console.log("count " + count)
             var changeSet = vega.changeset().insert(values[count++]);
             res.view.change('table', changeSet).run();
          }
        }, 1000);
    }
  	vega.embed('#vis', spec,
               {"mode": "vega-lite"},
               cb);
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.34/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.4/vega-lite.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.18/vega-embed.js"></script>
  <style>
    body {
      font-family: sans-serif;
    }
    
    .vega-actions a {
      padding: 0.2em;
    }
  </style>
</head>
​
<body>  
  <div id="vis"></div>
  
  <script>
        // const spec = "stackarea.vega.v3.json";
    // const spec = "stackarea.v2.json";
    const spec = "stackarea.work.v3.json";
​
    var values =
        [{"bounds": [1493382600000,1493383499999], "value":8574741,"start":"2017-04-28T20:30:00", "categories": "ABC"},
         {"bounds": [1493382600000,1493383499999], "value":7574741,"start":"2017-04-28T20:45:00", "categories": "ABC"},
         {"bounds": [1493382600000,1493383499999], "value":8074741,"start":"2017-04-28T21:00:00", "categories": "ABC"}];
    var count = 0;
    function cb (error, res) {
        window.setInterval(function () {
          if (count < 3) {
             console.log("count " + count)
             var changeSet = vega.changeset().insert(values[count++]);
             res.view.change('table', changeSet).run();
          }
        }, 1000);
    }
    vega.embed('#vis', spec,
               {"mode": "vega-lite"},
               cb);
  </script>
</body>
    

https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.34/vega.js

https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.4/vega-lite.js

https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.18/vega-embed.js