D3 Examples - Vega-lite: load data dynamically on run-time

Vega-lite: load data dynamically on run-time

The vega-lite and vega documentations barely mention how to load data dynamically at run time. However, I couldn't find an example on how to make it work. It seems like you cannot use vegaEmbed for that, and you must use vega viewer. However for this to work you need to compile your spec first to vega.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
</head>
​
<div id="vis"></div>
<body>
  
  <script src="https://cdn.jsdelivr.net/npm//vega@3.3.1"></script>
  <script src="https://cdn.jsdelivr.net/npm//vega-lite@2.4.3"></script>
  <script>
var spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "name": "myData" 
  },
  "mark": "bar",
  "encoding": {
    "y": {"field": "a", "type": "ordinal"},
    "x": {"field": "b", "type": "quantitative"}
  }
}
​
var myData = [
  {"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}
];
    
renderVegaLite(spec, myData);
function renderVegaLite(spec, data) {
  // First compile vega-lite to vega
    var vgSpec = vl.compile(spec).spec;
​
  view = new vega.View(vega.parse(vgSpec))
    .logLevel(vega.Warn)
    .renderer("canvas")  // set renderer (canvas or svg)
    .initialize(document.querySelector("#vis")) // initialize view within parent DOM container
    .insert("myData", data) // Insert the named data source
    .hover()             // enable hover encode set processing
    .run();
}
    
    
    
  </script>
</body>
​
    