Render interactive plotly figure in jupyter notebook slideshow

Question

I'm trying to embed an interactive plotly plot as a slide in a jupyter notebook slideshow. I've tried to take the HTML output from plotly and embed it in a markdown slide, however nothing gets rendered. I'm not sure what else to try. Other attempts to render HTML within a markdown slide usually work as expected so I'm not sure what I'm doing wrong here.

Here is an idea of the code I'm running:

Cell 1 (code cell):

import numpy as np
import plotly
import plotly.graph_objs as pgo

m_t = 3.5
b_t = 4.0

x = np.linspace(0.0, 10.0)
y = m_t* x + b_t + np.random.normal(size=x.size)

Cell 2 (code cell):

plotly.offline.init_notebook_mode()

trace = pgo.Scatter(
    x=x,
    y=y,
    mode='markers'
)

fig = pgo.Figure(data=[trace])
x = plotly.offline.plot(fig, output_type='div', include_plotlyjs=False)

So now the HTML string is saved in variable x . Using either python markdown in the next slide such as

Cell 3 (markdown):

{{x}}

Or if I just get the value of x and copy and paste it into another markdown cell, it doesn't work, and it just renders a little blank space in the notebook.

I would really like to get this working so I can include an interactive plot in the slide.

Answer 1

I have been trying to do the same thing and I saw it worked here :

Checking my console I get : WARNING:tornado.access:404 GET /plotly.js which leads me to believe it can find the plotly.js library, maybe you could confirm the same behavior?

It would appear that you need to use plotly.offline.init_notebook_mode(connected=True) in every cell where you want a graph to appear, I believe this embeds the plotly.js library into that cell and in my case rendered the graph.

I am still exploring trying to do something similar to Damian avila for using a local copy of reveal and see if this is possible with plotly, http://www.damian.oquanta.info/posts/using-a-local-revealjs-library-with-your-ipython-slides.html