CODEWITHSUNDEEP
javascriptvega-lite
Donovan Chua
Donovan Chua

Reputation: 11

Encountering TypeError despite following step by step in vega-lite tutorial

I followed the tutorial for Vega-Lite step by step but still encountered a TypeError in my vegaEmbed method call

I tried switching from vl.Embed to vegaEmbed, but vl.Embed was undefined and vegaEmbed returned a TypeError.

My html has a div tag with id "vis". The following code was in my script.js file linked to the html.

// Vega lite bar chart

const VLSPEC = {
    "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
    "data":{
      "values":[
        {"a": "C", "b": 2},
        {"a": "C", "b": 7},
        {"a": "C", "b": 4},
        {"a": "D", "b": 1},
        {"a": "D", "b": 2},
        {"a": "D", "b": 6},
        {"a": "E", "b": 8},
        {"a": "E", "b": 4},
        {"a": "E", "b": 7}
      ]
    },
    "mark":"bar",
    "encoding": {
      "y":{"field":"a","type":"nominal"},
      "x":{"field":"b","type": "quantitative",       "aggregate":"average", "axis":{"title": "B mean"}} 
      }

  };

vegaEmbed('#vis',VLSPEC);

I expected the bar chart to be plotted (as in https://vega.github.io/vega-lite/site/demo.html), but instead received no visual output but a TypeError in js console.

[email protected]:1 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null

    at new ve ([email protected]:1)

    at [email protected]:1

    at Generator.next (<anonymous>)

    at [email protected]:1

    at new Promise (<anonymous>)

    at D ([email protected]:1)

    at je ([email protected]:1)

    at Ne ([email protected]:1)

    at script.js:26

Upvotes: 1

Views: 612

Answers (1)

jakevdp
jakevdp

Reputation: 86310

You refer to a DOM elemend with ID "#vis", and the error indicates that this DOM element is undefined. You should execute this javascript in the context of an HTML page that has the following element:

<div id="vis"></div>

and then the embed call should work.

You can see this in action in the page source of https://vega.github.io/vega-lite/site/demo.html.

Upvotes: 1

Related Questions