8

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?

clstaudt
  • 21,436
  • 45
  • 156
  • 239
  • This solution here https://stackoverflow.com/questions/14824522/dynamically-serving-a-matplotlib-image-to-the-web-using-python 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 Mar 05 '15 at 12:53

3 Answers3

12

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)
clstaudt
  • 21,436
  • 45
  • 156
  • 239
Phillip
  • 13,448
  • 29
  • 41
0

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

Specifically:

  1. 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)

  1. 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.

  2. Click button to toggle the code off/on. The same toggling behavior will appear both in the .ipynb as well as the converted .html.

ximiki
  • 435
  • 6
  • 17
-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.

MartinsM
  • 110
  • 7