I have a small Wordpress site that I build statically using Gatsby, using the excellent gatsby-source-wordpress and WPGraphQL. Recently I have been doing some data science training and I want to embed my data visualisations into my Wordpress site. I'm using Vega Lite for the visualisations. Each viz is 'described' as an inline block of JS, which I'm adding to Wordpress using an HTML block.
Once I've included the three necessary scripts to the head of my Wordpress theme, the visualisations render properly in my non-Gatsby Wordpress theme pages. However, when Gatsby pulls the data from Wordpress using WPGraphQL, the visualisations don't render in the Gatsby pages (I have added the same three scripts to the head of the Gatsby pages using React Helmet).
I think I understand Gatsby enough to understand why this doesn't work but I don't know which route I should be trying to make work... I could import the Vega libraries into Gatsby but I don't know how Gatsby would interpret the could from GraphQL. Alternatively, I could try to make it work in the browser – possibly using SSR – but that would mean losing the static benefit on many pages.
Below are the relevant bits of the page as rendered by Gatsby...
<head>
<script src="https://cdn.jsdelivr.net/npm//vega@5" type="text/javascript" data-react-helmet="true"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-lite@4.17.0" type="text/javascript" data-react-helmet="true"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-embed@6" type="text/javascript" data-react-helmet="true"></script>
<head>
and
<div id="vis"></div>
<script>
(function(vegaEmbed) {
var spec = {"config": {"padding": 20, "title": {"anchor": "start", "align": "left", "fontSize": 20, "font": "Lato", "color": "#ffffff", "frame": "group", "subtitleColor": "#ffffff", "subtitleFontSize": 16}, "axisX": {"domain": true, "domainColor": "#ffffff", "domainWidth": 1, "grid": true, "gridColor": "#999999", "gridWidth": 1, "labelColor": "#ffffff", "labelFont": "Lato", "labelFontSize": 13, "labelAngle": 0, "tickColor": "#ffffff", "tickSize": 3, "titleColor": "#ffffff", "titleFont": "Lato", "titleFontSize": 16, "titlePadding": 10, "title": "X Axis Title (units)"}, "axisY": {"domain": true, "domainColor": "#ffffff", "domainWidth": 1, "grid": true, "gridColor": "#999999", "gridWidth": 1, "labelColor": "#ffffff", "labelFont": "Lato", "labelFontSize": 13, "labelAngle": 0, "ticks": true, "tickColor": "#ffffff", "tickSize": 3, "titleColor": "#ffffff", "titleFont": "Lato", "titleFontSize": 16, "titlePadding": 10, "title": "Y Axis Title (units)", "titleAngle": 270}, "legend": {"labelColor": "#ffffff", "labelFont": "Lato", "labelFontSize": 13, "symbolSize": 100, "titleColor": "#ffffff", "titleFont": "Lato", "titleFontSize": 14}, "tooltip": {"labelFontSize": 13}, "view": {"stroke": "transparent"}}, "layer": [{"mark": {"type": "rect", "color": "black", "opacity": 0.2}, "encoding": {"x": {"field": "startYear", "type": "temporal"}, "x2": {"field": "endYear"}}}, {"mark": {"type": "text", "align": "center", "angle": 270, "baseline": "middle", "fontSize": 16, "opacity": 0.5}, "encoding": {"text": {"field": "text", "type": "nominal"}, "x": {"field": "x", "type": "temporal"}, "x2": {"field": "endYear"}}, "transform": [{"calculate": "datum.startYear + (datum.endYear - datum.startYear)/2", "as": "x"}]}, {"data": {"name": "data-c042860487113da4c09c3ea7e1e3f6cf"}, "mark": {"type": "circle", "opacity": 0.9, "stroke": "#121212", "strokeWidth": 0.5}, "encoding": {"color": {"field": "type", "legend": {"rowPadding": 5, "title": "Type of win"}, "scale": {"domain": ["Standard", "Min", "Max", "Points"], "range": ["#ffff3f", "#fa0149", "#8cd3fe", "#00e000"]}, "type": "nominal"}, "opacity": {"condition": {"value": 1, "selection": "selector003"}, "value": 0.2}, "size": {"field": "Stages won", "legend": {"title": "Stages won"}, "scale": {"domain": [0, 8], "range": [20, 120]}, "type": "quantitative"}, "tooltip": [{"field": "Year", "type": "quantitative"}, {"field": "Cyclist", "title": "Winner"}, {"field": "Country", "type": "nominal"}, {"field": "Team", "type": "nominal"}, {"field": "Stages won", "type": "quantitative"}, {"field": "Winning margin", "type": "nominal"}], "x": {"axis": {"tickCount": 10, "title": "Year"}, "field": "datetime", "scale": {"domain": [1902, 2022], "zero": false}, "timeUnit": "year", "title": "Year", "type": "temporal"}, "y": {"axis": {"grid": false}, "field": "Stages leading", "scale": {"domain": [0, 23]}, "title": "Stages in lead", "type": "quantitative"}}, "height": 400, "selection": {"selector003": {"type": "multi", "fields": ["type"], "bind": "legend"}}, "title": {"text": "Tour de France winners, 1903 - 2022", "subtitle": "Number of winners: 65"}, "width": 800}], "background": "#586b6e", "data": {"name": "data-945424ea27149582e05915ea3c6ba826"}, "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json", "datasets": {"data-945424ea27149582e05915ea3c6ba826": [{"startYear": "1914-06-28T00:00:00.000", "endYear": "1918-11-11T00:00:00.000", "text": "World War I"}, {"startYear": "1939-09-01T00:00:00.000", "endYear": "1945-08-14T00:00:00.000", "text": "World War II"}], "data-c042860487113da4c09c3ea7e1e3f6cf": [{"Year": 1903, "Cyclist": "Maurice Garin", "Country": "France", "Team": "La Fran\u00e7aise", "Kilometres": 2428, "Miles": 1509, "Time total": 340394, "Time margin": 10761.0, "Stages won": 3, "Stages leading": 6, "datetime": "1903-05-01T00:00:00", "Winning margin": "2h 59m 21s", "Team (Country)": "La Fran\u00e7aise (FRANCE)", "type": "Max"}, {"Year": 1904, "Cyclist": "Henri Cornet", "Country": "France", "Team": "Conte", "Kilometres": 2428, "Miles": 1509, "Time total": 345955, "Time margin": 8174.0, "Stages won": 1, "Stages leading": 3, "datetime": "1904-05-01T00:00:00", "Winning margin": "2h 16m 14s", "Team (Country)": "Conte (FRANCE)", "type": "Standard"}, {"Year": 1905, "Cyclist": "Louis Trousselier", "Country": "France", "Team": "Peugeot\u2013Wolber", "Kilometres": 2994, "Miles": 1860, "Time total": 0, "Time margin": 0.0, "Stages won": 5, "Stages leading": 10, "datetime": "1905-05-01T00:00:00", "Winning margin": "0h 00m 00s", "Team (Country)": "Peugeot\u2013Wolber (FRANCE)", "type": "Points"}}]}};
var embedOpt = {"mode": "vega-lite"};
function showError(el, error){
el.innerHTML = ('<div class="error" style="color:red;">'
+ '<p>JavaScript Error: ' + error.message + '</p>'
+ "<p>This usually means there's a typo in your chart specification. "
+ "See the javascript console for the full traceback.</p>"
+ '</div>');
throw error;
}
const el = document.getElementById('vis');
vegaEmbed("#vis", spec, embedOpt)
.catch(error => showError(el, error));
})(vegaEmbed);
</script>
