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.

Built with blockbuilder.org

<!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"}
  }
}

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>

https://cdn.jsdelivr.net/npm//vega@3.3.1

https://cdn.jsdelivr.net/npm//vega-lite@2.4.3