Vega loader problem

forked from domoritz's block: Vega block example

forked from domoritz's block: Demo of config override bug

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script>
</head>

<body>  
  <div id="vis"></div>
  
  <script>
    var spec = {
      "$schema": "https://vega.github.io/schema/vega/v3.0.json",
      "width": 200,
      "height": 200,
      "padding": 5,

"data": [
        {
          "name": "source",
          "url": "data/cars.json",
          "transform": [
            {
              "type": "filter",
              "expr": "datum['Horsepower'] != null && datum['Miles_per_Gallon'] != null && datum['Acceleration'] != null"
            }
          ]
        }
      ],

"scales": [
        {
          "name": "x",
          "type": "linear",
          "round": true,
          "nice": true,
          "zero": true,
          "domain": {"data": "source", "field": "Horsepower"},
          "range": "width"
        },
        {
          "name": "y",
          "type": "linear",
          "round": true,
          "nice": true,
          "zero": true,
          "domain": {"data": "source", "field": "Miles_per_Gallon"},
          "range": "height"
        },
        {
          "name": "size",
          "type": "linear",
          "round": true,
          "nice": false,
          "zero": true,
          "domain": {"data": "source", "field": "Acceleration"},
          "range": [4,361]
        }
      ],

"axes": [
        {
          "scale": "x",
          "grid": true,
          "domain": false,
          "orient": "bottom",
          "tickCount": 5,
          "title": "Horsepower"
        },
        {
          "scale": "y",
          "grid": true,
          "domain": false,
          "orient": "left",
          "titlePadding": 5,
          "title": "Miles_per_Gallon"
        }
      ],

"legends": [
        {
          "size": "size",
          "title": "Acceleration",
          "format": "s",
          "encode": {
            "symbols": {
              "update": {
                "strokeWidth": {"value": 2},
                "opacity": {"value": 0.5},
                "stroke": {"value": "#4682b4"},
                "shape": {"value": "circle"}
              }
            }
          }
        }
      ],

"marks": [
        {
          "name": "marks",
          "type": "symbol",
          "from": {"data": "source"},
          "encode": {
            "update": {
              "x": {"scale": "x", "field": "Horsepower"},
              "y": {"scale": "y", "field": "Miles_per_Gallon"},
              "size": {"scale": "size", "field": "Acceleration"},
              "shape": {"value": "circle"},
              "strokeWidth": {"value": 2},
              "opacity": {"value": 0.5},
              "stroke": {"value": "#4682b4"},
              "fill": {"value": "transparent"}
            }
          }
        }
      ]
    }
 
    
    var runtime = vega.parse(spec);
    
    var loader = vega.loader({baseURL: 'https://vega.github.io/editor/'});
    
    // loader.load('data/cars.json').then(console.log).catch(console.warn);
    
    // works (toggle between /* and //* to toggle code blocks)
    /*
    var view = new vega.View(runtime, {loader: loader})
      .logLevel(vega.Warn)
      .initialize(document.querySelector('#vis'))
      .run();
    /*/
    
    // does not work
    var view = new vega.View(runtime)
      .loader(loader)
      .logLevel(vega.Warn)
      .initialize(document.querySelector('#vis'))
      .run();
    //*/
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js