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.