How to use vegaEmbed to embed an Altair visualization into html document?

Question

I am trying to embed an Altair data visualization I created in Python, into an html document. I have followed the instructions on https://altair-viz.github.io/user_guide/saving_charts.html, specifically the json/VegaEmbed method. The following is my code for the html so far:

<!DOCTYPE html>
<html>
<head>
  <style>
    .error {
        color: red;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <h1>Altair Embed Demo</h1>
  <div id="vis"></div>
  <script>
    vegaEmbed('#vis', 'C:/Users/myName/chart.json');
  </script>
</body>
</html>

As can be seen here, the Altair visualization is saved as chart.json locally, and I am calling the vegaEmbed module on it.

However, the issue I'm having is that the resulting page does not output the Altair visualization. My path is correct, I have imported the correct module, and I have used vegaEmbed() properly (I think). Could someone give me guidance on this issue if they have had experience with Vega/Altair? Thank you.

score 1 · Answer 1 · answered Jun 01 '22 at 17:46

I think you're encountering a security issue with your browser not allowing you to access local files. If you use a URL to a file hosted online, it will work:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script type="text/javascript">
    vegaEmbed("#vis", "https://raw.githubusercontent.com/vega/vega-lite/next/examples/specs/bar.vl.json");
  </script>
</body>
</html>

There are some suggestions here on how to access local files in the browser, which you can explore to find the most appropriate solution for you Loading local JSON file.

You could also embed the vega spec directly instead of saving it as a separate file by inserting something like the following into the document (as in the documentation page you linked):

    var spec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "config": {
        "view": {
          "continuousHeight": 300,
          "continuousWidth": 400
        }
      },
      "data": {
        "url": "https://vega.github.io/vega-datasets/data/cars.json"
      },
      "encoding": {
        "color": {
          "field": "Origin",
          "type": "nominal"
        },
        "x": {
          "field": "Horsepower",
          "type": "quantitative"
        },
        "y": {
          "field": "Miles_per_Gallon",
          "type": "quantitative"
        }
      },
      "mark": "point"
    };

Thanks for the input. I guess that the issue with embedding the vega spec directly for me, is that if my dataset is large then my codebase becomes large as well. I will attempt the first method you provided. — , Jun 01 '22 at 18:05

How to use vegaEmbed to embed an Altair visualization into html document?

1 Answers1