CODEWITHSUNDEEP
python-3.xjupyter-notebookplotlyreveal.jsnbconvert
deltap
deltap

Reputation: 4206

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

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.

Upvotes: 10

Views: 10371

Answers (3)

Wesley Banfield
Wesley Banfield

Reputation: 101

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

Upvotes: 3

Rocky McNuts
Rocky McNuts

Reputation: 193

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.

Upvotes: 13

m3m5rr
m3m5rr

Reputation: 145

You must have a plotly.js file in your directory where you are performing nbconvert. For some reason, "to html" will embed the plotly javascript into the HTML file, but "to slides" searches for a plotly.js file in the directory.

That said, you will have to template reveal.js to change dimensions of the slides depending on the size of your plot charts. That, or customize the dimension of the plotly graphs. If the slide are too big (or the other way around), the graphs will collapse into one line in the slides.

Upvotes: 1

Related Questions