IPython Notebook: How to combine HTML output and matplotlib figures?

Question

The following code outputs rendered HTML in the result cell of an IPython command:

from IPython.core.display import HTML

def putHTML():
    source = """
    <h1>Yah, rendered HTML</h1>
    <h2>Here is an image</h2>
    <img src="http://lbkbd.in/wp-content/uploads/2014/10/HTML-Logo.png"/>
    """
    return HTML(source)

enter image description here

How can I use this approach to include figures generated by matplotlib on the fly in an HTML layout?

This solution here stackoverflow.com/questions/14824522/… seems to go in the right direction. However, I need to update the solution to Python 3, and plt.savefig(sio) with sio being an io.StringIO object does not work. — clstaudt
– clstaudt, Commented Mar 5, 2015 at 12:53

clstaudt · Accepted Answer · 2015-03-14 15:34:28Z

12

+100

Since IPython already has a backend that generates HTML output for images, you can use their inline backend:

from matplotlib._pylab_helpers import Gcf
from IPython.core.pylabtools import print_figure 
from base64 import b64encode

# Plot something
plot([1,2],[3,4])

# Get a handle for the plot that was just generated
fig = Gcf.get_all_fig_managers()[-1].canvas.figure

# Generate a data URL for the image
# Matplotlib's display() would output the plot, so I do this manually.
# There might be a wrapper for this somewhere in IPython, if you're
# unhappy with this line..
image_data = "data:image/png;base64,%s" % b64encode(print_figure(fig)).decode("utf-8")

# Remove the plot from the list of plots for the current cell
Gcf.destroy_fig(fig)

# Now you can use the data URL in your HTML output
HTML("Foo Bar <br> <img src='%s'> <br> Baz" % image_data)

edited Mar 14, 2015 at 15:34

clstaudt

22.7k49 gold badges164 silver badges255 bronze badges

answered Mar 9, 2015 at 10:26

Phillip

13.7k33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ximiki · Accepted Answer · 2017-09-20 21:22:51Z

Another option is to follow the advice on this blog: http://protips.maxmasnick.com/hide-code-when-sharing-ipython-notebooks

Specifically:

Copy this code to the top (first cell) of your IPython notebook (copying code and comments directly from link above, all credit goes to the blogger):

import IPython.core.display as di

This line will hide code by default when the notebook is exported as HTML:

di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)

This line will add a button to toggle visibility of code blocks, for use with the HTML export version:

di.display_html('''<button onclick="jQuery('.input_area').toggle(); jQuery('.prompt').toggle();">Toggle code</button>''', raw=True)

Run the top cell (with the above code in it). You should see "Toggle code" button right below it come up when it finished executing.
Click button to toggle the code off/on. The same toggling behavior will appear both in the .ipynb as well as the converted .html.

MartinsM · Accepted Answer · 2015-03-12 08:16:09Z

-2

If you just want to combine html output and plots, the magical command %matplotlib inline somewhere at the beginning should be enough.

When you download your notebook as html all plots will be properly encoded and included in your single html file.

answered Mar 12, 2015 at 8:16

MartinsM

1107 bronze badges

Collectives™ on Stack Overflow

IPython Notebook: How to combine HTML output and matplotlib figures?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related