top of page
Search

Adding interactive Vega or Vega-lite visuals to a blog

On the last lecture, a question on how to add interactive vega visuals to blogpost arouse. We were able to do that by converting the vega/vega-lite visual to an HTML-specification, and then adding that to the blog with the "Insert HTML code" functionality of Wix. (There is probably something similar in Medium too). Converting the vega/vega-lite graph to HTML can be done very easily with the following template, by just replacing the text INSERT VEGA/VEGA-LITE SPEC HERE with the vega or vega-lite specification of your visual.

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding Vega</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.10.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.10.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.5.2"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      var yourVlSpec = { 

	INSERT VEGA/VEGA-LITE SPEC HERE

}
;
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>

Then, the HTML-code can be added to the blog by choosing the "Insert HTML code" option in Wix. After choosing that option, a gray area appears under the text that needs to be clicked to open a dialog-box like the one shown in a screenshot below, where the HTML-code can be copypasted and added to the blog. After clicking save, the visual should appear in the post. The interactive parts of the visual don't usually work in yet the editing view of the blogpost, but by checking the Preview, it can be verified that the visual works as it should before publishing the post.

Hopefully this will be helpful to some of the groups. Let us know in the comments if you experience problems with publishing visuals this way, or have any ideas how to do something similar in Medium too.


68 views0 comments

Recent Posts

See All
Post: Blog2_Post
bottom of page