How to embed plotly visualizations without RequireJS

[choldgraf]

Hey there - I work on a project called Jupyter Book that lets people share collections of notebooks as a static website.

I'm working on a page for interactive visualization libraries, and I am having a hard time getting Plotly to work. I believe that the reason for this is our SSG uses Bootstrap, and RequireJS (needed by the plotly renderer) doesn't easily work with Bootstrap.

Are there guidelines for displaying interactive plotly graphs in HTML without RequireJS? Or, suggestions for how to get RequreJS to work with Bootstrap that could be added to the docs? Given how common Bootstrap is, perhaps this is something that could benefit others as well (e.g. I know the new pydata-sphinx-theme also uses Bootstrap, so plotly viz won't work there either)

[emmanuelle]

Hi @choldgraf ! Could you please share a link explaining how RequireJS and bootstrap are incompatible?

[choldgraf]

Here's an issue where it's been discussed in the pydata theme:

pydata/pydata-sphinx-theme#30

There are also lots of stack overflow posts like this:

https://stackoverflow.com/questions/16259098/cant-load-bootstrap-with-requirejs

and blog posts like this:

http://blog.chasepeeler.com/2017/09/12/bootstrap-4-and-requirejs/

so, it seems that it is possible, but complicated. That's why I was wondering if there is a recommended practice for plotly

[nicolaskruchten]

Hmm, so we're running Bootstrap on our doc site and loading things up with RequireJS and it seems to work OK: https://plotly.com/python/getting-started/

[nicolaskruchten]

(That's not to say you're not having a problem and that we won't help you fix it! Just pointing to one case where it works :)

[choldgraf]

Oh that is very helpful actually haha... If we can get bootstrap working using requirejs that would be great. Do you know if the site needed any particular configuration that was abnormal?

[choldgraf]

OK so I think I figured it out - basically the issue with Bootstrap is in the order in which you load bootstrap.js before or after require.js. I'll close this...though I'm definitely still interested in learning about best-practices here. We'd like the Jupyter Book project to have good support for plotly, and I am a bit concerned that this issue will pop up again in some form or another.

In case you're curious, here's the page where plotly isn't working. I think that this PR to the pydata theme will fix it but 🤷‍♂️

[nicolaskruchten]

Ah, nice, I'm glad you figured this out... sorry, it was a long weekend and I was trying to stay away from Github :) I'm not surprised that there's a load-order sensitivity there but I'm glad there's a path forward!

[nicolaskruchten]

Our whole doc site is built using Jupytext/nbconvert to make HTML fragments that are then stitched together using Jekyll... The nbconvert bit relies on RequireJS and the Jekyll bit is styled with Bootstrap. We use Jekyll because the same CMS contains docs for Javascript and R, and each language's docs are in some idiomatic format that we needed to glue together somehow :)

[choldgraf]

nice, thanks for the explanation :-) we were using Jekyll in the Jupyter Book project as well, though we're moving to Sphinx to make it easier for things like references across pages etc.