quarto-dev / quarto-dev/quarto-cli
altair plots not showing in revealjs render?
@cderv is already working on this.
Since Sep 27, 2024.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
I'm trying to write some plot-heavy slides with Quarto rendering to RevealJS, and I am using python and altair for plotting. I'm coding in VSCode.
I get the impression from the documentation that altair should work, and I believe I've also been able to do it before rendering to html.
But now, the plots are not showing on render. I found an error in the console log that is most likely related
Uncaught TypeError: vegaEmbed is not a function
at displayChart (this_is_your_db.html:420:7)
at Object.execCb (require.min.js:1:16727)
at e.check (require.min.js:1:10499)
at e.<anonymous> (require.min.js:1:12915)
at require.min.js:1:1542
at require.min.js:1:13376
at each (require.min.js:1:1020)
at e.emit (require.min.js:1:13344)
at e.check (require.min.js:1:11058)
at e.enable (require.min.js:1:13242)
This is the code in the html, within a script tag (truncated)
<script type="text/javascript">
var VEGA_DEBUG = (typeof VEGA_DEBUG == "undefined") ? {} : VEGA_DEBUG;
(function(spec, embedOpt) {
let outputDiv = document.currentScript.previousElementSibling;
if (outputDiv.id !== "altair-viz-f5a273b5c427426c987b81d42dfa2ddc") {
outputDiv = document.getElementById("altair-viz-f5a273b5c427426c987b81d42dfa2ddc");
}
const paths = {
"vega": "https://cdn.jsdelivr.net/npm/vega@5?noext",
"vega-lib": "https://cdn.jsdelivr.net/npm/vega-lib?noext",
"vega-lite": "https://cdn.jsdelivr.net/npm/vega-lite@5.20.1?noext",
"vega-embed": "https://cdn.jsdelivr.net/npm/vega-embed@6?noext",
};
function maybeLoadScript(lib, version) {
var key = `${lib.replace("-", "")}_version`;
return (VEGA_DEBUG[key] == version) ? Promise.resolve(paths[lib]) : new Promise(function(resolve, reject) {
var s = document.createElement('script');
document.getElementsByTagName("head")[0].appendChild(s);
s.async = true;
s.onload = () => {
VEGA_DEBUG[key] = version;
return resolve(paths[lib]);
}
;
s.onerror = () => reject(`Error loading script: ${paths[lib]}`);
s.src = paths[lib];
}
);
}
function showError(err) {
outputDiv.innerHTML = `<div class="error" style="color:red;">${err}</div>`;
throw err;
}
function displayChart(vegaEmbed) {
vegaEmbed(outputDiv, spec, embedOpt).catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));
}
if (typeof define === "function" && define.amd) {
requirejs.config({
paths
});
require(["vega-embed"], displayChart, err => showError(`Error loading script: ${err.message}`));
} else {
maybeLoadScript("vega", "5").then( () => maybeLoadScript("vega-lite", "5.20.1")).then( () => maybeLoadScript("vega-embed", "6")).catch(showError).then( () => displayChart(vegaEmbed));
}
}
<!-- TRUNCATED --!>
</script>
Is this a RevealJS limitation?
My python versions are
- Altair at 5.4.1
Quarto version is 1.5.57
I did find a non-ideal workaround, namely to render to png by calling altair.renderers.enable("png")
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.