Adding Vega-Lite graphics to WordPress

This is a test post to see how easy it is to embed Vega-Lite data visualizations to a WordPress page. Oddly enough, I didn't find an all-in-one tutorial for this. If you see an interactive bar chart below (interactive means: bar color reacts to mouse hover), it means this method work!

Integration approach: I'm using the Vega-Embed helper library, since it is described as the “easiest way to use Vega-Lite on your own web page” on the official Vega-Lite doc. In this post, I'm essentially adapting Vega-Embed's README for WordPress. Two steps are necessary:

1. Import the (three) necessary Javascript libraries in the site header
2. Paste the magic code snippet for each graphics to be embedded

Importing Vega javascript libraries

Adding custom javascript scripts to the <header> section of a WordPress site is extensively covered:

• Some people use a custom PHP code like in Most efficient way to add javascript file to specific post and/or pages?
• But many recommend using a dedicated WordPress extension, e.g. on this 2022 worpress.com article How to Properly Add JavaScript to WordPress (3 Top Methods)

I chose the extension route, with WPCode since it seems the most popular option. In the end, I find it does the job, albeit having perhaps too many features compared to what is needed for this task.

The objective is to inject the the following html code in the site header, which will load Vega, Vega-Lite and Vega-embed:

<!-- Import Vega, Vega-Lite and vega-embed -->
<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>

with WPCode installed, this requires clicking in the dashboard:

1. Code Snippets / + Add Snippet
2. In the Add Snippet page, select the first “Add Your Custom Code (New Snippet)”/“+Add Custom Snippet” button (don't get overwhelmed by the pile of other tiles... this is where I claim that this extension is a bit too much for the task)
3. In the Create Custom Snippet page, you're again greeted with another pile of tiles to select the code type. Again, the first choice “HTML Snippet” if the good one
4. Paste the four lines above in the Code Preview text editor
5. Give it a title (like Vega import), Save and Activate the Snippet

Other than that, all the options below the editor are fine, in particular the Snippet insertion location which defaults to “Site Wide Header”. If you open the source code of this page (Ctrl+U) and see the lines with <script src="https://cdn.jsdelivr.net/npm/vega... (scrolling down to about line 206...), this means the method worked for me!

Restricting Vega import to specific pages (optional)

To avoid importing Vega on every page, I've used the optional “Smart Conditional Logic” of WPCode Snippet editor. There it can be specified that the Snippet should show only on specific pages like this one (in the “Where (page)” panel). In truth, the “Page/Post” condition is restricted to the PRO version, but “Page URL” is available.

Several pages can be specified by “+Add new group”, since groups of rules combine with boolean OR (whereas rules within a group combine with AND).

With this display logic, the Vega import line shouldn't be visible on most pages of this site like Home.

Adding the visualization code

Once Vega libraries are imported, there remains to add to the core of the page the two bits of HTML code which will load the specific visualization we wish to display:

• a block tag, typically an empty <div>, with a uniquely chosen id, where the visualization will appear
• a <script> tag which will read Vega's JSON visualization description (the “spec” in Vega's word) and load it to the target tag, with a call like vegaEmbed('#vis', spec)

Here I'll use again the example of Vega-Embed’s README:

<div id="vis">vega viz will go here</div>

<script type="text/javascript">
  var spec = 'https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json';
  vegaEmbed('#vis', spec)
    .then(function (result) {
      // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
    })
    .catch(console.error);
</script>

Using the WordPress block editor (Gutenberg editor), I'm adding “Custom HTML” block with that content. In fact, it's possible to split the target tag and the script in two blocks (again if you look at the source code with Ctrl+U, you should see the script just below, while the block tag with id="viz" is above).

Et voilà!