## Data Visualization, Web Application

Python provides many libraries to perform different operations, including data visualization. However, you may find integrating a chart built using Matplotlib into an HTML page complex. The simplest solution is to export the chart as a static image, such as a PNG or JPEG, and then integrate it into your HTML page. However, if you use a static image, you lose any possible interactivity from the original chart.

Another solution could be using external frameworks such as Streamlit or Flask, but in both cases, you must set up a standalone web server to serve your image. This solution could be too expensive. In my town, we say we shoot a fly with a cannon!

This blog post shows three strategies to embed a Matplotlib chart into an HTML page. The three solutions are:

- Using the mpld3 library
- Encoding the image as base64
- Using
`py-script`

.

Before describing each solution, let’s describe the scenario we’ll use to demonstrate the three cases.

Let’s suppose we want to draw a sinusoid using Matplotlib. Here is the code to generate the chart:

`import numpy as np`

import matplotlib.pyplot as plt# Generate x from 0 to 2*pi with a step size of 0.1

x = np.arange(0, 2*np.pi, 0.1)

y = np.sin(x)

fig, ax = plt.subplots()

ax.plot(x, y)

ax.set_xlabel('x')

ax.set_ylabel('y')

ax.set_title('Sinusoid')

plt.show()

The following figure shows the resulting chart:

The mpld3 library combines Matplotlib and D3.js, a popular Javascript library for data visualization. Mpld3 provides an API to export the Matplotlib charts in D3.js.

First, install the mpld3 library:

`pip install mpld3`

To save your Matplotlib chart as an HTML page, use the `save_html()`

function provided by mtpld3, as follows:

`import mpld3`

import numpy as np

import matplotlib.pyplot as plt# Generate x from 0 to 2*pi with a step size of 0.1

x = np.arange(0, 2*np.pi, 0.1)

y = np.sin(x)

# Create a figure and axis

fig, ax = plt.subplots()

# Plot the sinusoid

ax.plot(x, y)

# Set labels and title

ax.set_xlabel('x')

ax.set_ylabel('y')

ax.set_title('Sinusoid')

# Display the plot

mpld3.save_html(fig,'fig.html')

The `save_html()`

function receives a Matplotlib figure as an input and the figure name. The script generates the `fig.html`

. If you open it in your browser, you’ll see the following chart:

The chart is slightly different from the original one because it is the D3.js version of the original chart. This means that the mpld3 library transforms the original graph into D3.js. If you inspect the HTML file from your browser, you’ll see that the chart is an SVG image, as shown in the following figure:

To embed the generated chart into another HTML page, copy the content of the generated file precisely in the position where you want to include the image. For more details on how to proceed, follow my previous tutorial.

Another solution is encoding the Matplotlib figure as a base64 image, as described in this Stack Overflow thread. Here is the code to generate the HTML page containing the Matplotlib image:

`import base64`

from io import BytesIO

import numpy as np

import matplotlib.pyplot as pltx = np.arange(0, 2*np.pi, 0.1)

y = np.sin(x)

fig, ax = plt.subplots()

ax.plot(x, y)

ax.set_xlabel('x')

ax.set_ylabel('y')

ax.set_title('Sinusoid')

tmpfile = BytesIO()

fig.savefig(tmpfile, format='png')

encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')

html = '<html>' + '<img src='data:image/png;base64,{}'>'.format(encoded) + '</html>'

with open('fig2.html','w') as f:

f.write(html)

In practice you generate a `BytesIO()`

object and save the figure using the PNG format. Then use `b64encode()`

function to encode the image and the `decode()`

function to decode it. Finally, add the decoded image to an HTML string and save it. As a result, you have precisely the original Matplotlib figure.

Py-script is a Javascript library enabling you to include Python code directly into an HTML page. To use Py-script, you must include the following py-script library in the HTML heading:

`<head>`

<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />

<script defer src="https://pyscript.net/latest/pyscript.js"></script>

</head>

Then, use the `py-config`

tag to install the required Python libraries:

`<py-config>`

packages = ["matplotlib", "numpy"]

</py-config>

Finally, use the `py-scrip`

t tag to include your Python code:

` <py-script>`

import numpy as np

import matplotlib.pyplot as pltx = np.arange(0, 2*np.pi, 0.1)

y = np.sin(x)

fig, ax = plt.subplots()

ax.plot(x, y)

ax.set_xlabel('x')

ax.set_ylabel('y')

ax.set_title('Sinusoid')

display(fig, target="graph-area", append=False)

</py-script>

<div id="graph-area"></div>

To show the figure, use the `display()`

function, which receives the Matplotlib figure, the HTML `div`

where to include the plot and if to use the `append`

modality.

As a final result, you have precisely the same figure as the original one.

Congratulations! You have just learned three ways to include a Matplotlib chart into an HTML page! The three strategies are:

- Using the mpld3 library converts your Matplotlib chart into a D3.js chart
- Encoding the image as base64 generates a PNG image of the Matplotlib chart as a base64 encoded image and then includes it into an HTML page
- Using
`py-script`

enables you to include your Python code directly in HTML.