quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.79k stars 310 forks source link

altair plots not showing in revealjs render? #10903

Open Bonnevie opened 1 day ago

Bonnevie commented 1 day ago

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

Quarto version is 1.5.57

I did find a non-ideal workaround, namely to render to png by calling altair.renderers.enable("png")

cderv commented 23 hours ago

Hi. thanks for the report.

Can you share a reproducible example so that I can run on my side and look into this ?

Currently I am missing a lot:

With an example it would help answer all this !

Thank you.