Embedding vega charts

, , ,
1

Hi,

I am trying to embed vega chart in an html template to display them.
The chart won't display and the card stay blank.

I am using this as a minimal template and using a dummy stream.

  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
  <div id="graph-vega"></div>
  <script type="text/javascript">
  var vega_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"
    };
    var options = {"renderer": "canvas", "actions": false};
    vegaEmbed("#graph-vega", vega_spec, options);
  </script>

I am not really clear on how to add news sources to the page (like vega dependencies), I am not clear on how to execute a function at every new element to create the chart.
I couldn't find an exemple

Thanks a lot for your insights,

2

Hi! I'm not super familiar with Vega specifically, but there are basically 2 things to consider when embedding content with third-party JavaScript libraries: the main scripts need to be available globally, so one way to do this is to embed the files in the static/index.html within your Prodigy installation. Then, whenever a new task is available, your function will have to re-run to render the graph. Prodigy fires the custom event prodigyupdate that you can listen to and use to re-render your chart. You also have acccess to the current task JSON via window.prodigy.content, so you can stream in the JSON representation of your chart, and then render that whenever the task updates.

Here's an example of including a charting library that works in a similar way:

That said, how important is it for you that the visualization re-renders on the fly and/or is interactive? Depending on what you're doing, it might be easier to use a Python library like altair in your Prodigy recipe and have it generate an SVG of your chart for each incoming example. You can then render it using the html UI. An advantage of this approach is that you can store the whole graphic with your data in a pretty lightweight way and you'll always be able to reproduce exactly what the annotator saw, without requiring any libraries for rendering.

3

Thanks a lot Ines.

It's a nice example.
For other people looking into it, I could not find a documentation on the static/index.html but I ran into this comment which explains it all : https://support.prodi.gy/t/removing-meta-div-from-display-and-custom-css/1028/6 .

Fair question about just sending an svg or an image data. That's what I am currently doing and using altair. So you bullseyed it. :stuck_out_tongue:

In a more complete version, I want my users to be able to browse the chart, interact with some specifics dots and probably select those and add them the answer.

1 Like