In An Html Table, How To Add Text Beside Plot In Jupyter Notebook Using Python?

Any ideas on how to create a 1 X 2 HTML table where cell {0} is a matplotlib plot and cell {1} is a text description for Python 3.X? import matplotlib.pyplot as plt from io import

Solution 1:

It seems that you've read the document and are on the right track by using BytesIO. Two more steps to do are just:

1. Use a proper tag for you plot
2. Encode your figdata using Base64. Then decode them into str

Here is a complete and verifiable (in Jupyter notebook) example modified from your code:

from base64 import b64encode
from io import BytesIO

from IPython.display import display, HTML
import matplotlib.pyplot as plt

defadd_split_screen(fig, text, iwidth=None):
    figdata = BytesIO()
    fig.savefig(figdata, format='png')
    iwidth = ' width={0} '.format(iwidth) if iwidth isnotNoneelse''
    datatable = '<table><tr><td><img src="data:image/png;base64,{0}"/></td><td>{1}</td></tr></table>'.format(b64encode(figdata.getvalue()).decode(), text)
    display(HTML(datatable)) 

fig, ax = plt.subplots(1,1, figsize=(6,4))
ax.plot([1,2,3])
text = '<h4>Special Chart:</h4><BR>Description of chart will go here.'
add_split_screen(fig, text, iwidth='500px')