Plotly graph does not show when jupyter notebook is converted to slides

Question

I have a jupyter notebook with interractive plotly plots. I am converting that notebook into slides using nbconvert. When I do so the plotly plots do not show up in the slides. I get the following tornado warnings as well

$ jupyter nbconvert presentation.ipynb --to slides --post serve
[NbConvertApp] Converting notebook presentation.ipynb to slides
[NbConvertApp] Writing 818538 bytes to presentation.slides.html
[NbConvertApp] Redirecting reveal.js requests to https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.1.0
Serving your slides at http://127.0.0.1:8000/presentation.slides.html
Use Control-C to stop this server
WARNING:tornado.access:404 GET /custom.css (127.0.0.1) 1.53ms
WARNING:tornado.access:404 GET /custom.css (127.0.0.1) 0.96ms
WARNING:tornado.access:404 GET /plotly.js (127.0.0.1) 0.84ms

To add insult to injury this worked yesterday and I don't think I changed anything substantial. I tried rebooting my browser and my machine and neither helped.

Answer 1

1) Check the JS console for errors and the Jupyter log if you are serving the slides via Jupyter. When you browse the slides.html, you may be getting
404 GET /files/mydir/plotly.js

put the plotly.js file in the directory where the slides.html is located (download e.g. https://cdn.plot.ly/plotly-latest.min.js and rename to plotly.js)

2) make sure you are specifying a Layout height and width in your Jupyter notebook e.g.

trace_data = [trace1]
layout = Layout(
    autosize=False,
    width=720,
    height=480,
    margin=Margin(
        l=50,
        r=50,
        b=100,
        t=100,
        pad=4
    ),
    bargroupgap=0.3
)
fig = Figure(data=trace_data, layout=layout)

Re-run your charts, check they appear properly in the notebook, save the notebook, re-run nbconvert.

You do not need to customize the custom.css and make a myreveal.tpl Reveal template and specify it on the nbconvert command line, but you can do so if you wish to customize your slides.

Answer 2

Following the code found here : https://nbviewer.jupyter.org/format/slides/github/tarokiritani/testjupyter/blob/master/test%20plotly.ipynb#/

I have found adding plotly.offline.init_notebook_mode(connected=True) into the same cell as the plotly.offline.(i)plot function works