Education Ecosystem Blog

How to Run Python Visualizations On a Web Browser using PyScript

JavaScript has long dominated client-side web programming, but could a new Python framework shake things up? Yes. During PyCon US 2022, Anaconda’s CEO announced a new technology called PyScript that allows users to write Python code in the browser.

We only need to write and run Python code in HTML to build web applications. This means that we don’t need to worry about deployment, but everything will happen in our web browser.

One of the coolest and easiest things you can build on your web browser is Python visualizations.

This article will show how to display matplotlib visualizations on your web browser using PyScript.

Add PyScript to an HTML template

To set up PyScript, we need first a basic HTML template. Most text editors and IDEs have an HTML template you can work with. You only need to create an HTML file, then type either doc or HTML and hit enter.

<html>

<head>

content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>

<title>Document</title>

</head>

<body>

</body>

</html>

Now to use PyScript, import the style sheet and script from PyScript in the <head> section in the HTML template.

You should have something like this;

<html>

<head>

content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>

<title>Document</title>

</head>

<body>

</body>

</html>

You’ve successfully set up PyScript so far. Now you are ready to plot some visualizations on your web browser.

Matplotlib Plots On Your Web Browser with PyScript

The steps to plot a visualization with matplotlib and bokeh on a web browser are a bit different.

Start by making a line plot with matplotlib and showing it in the web browser.

Loading matplotlib

To make your line plot, first, you have to load matplotlib in the HTML file. You use the <py-env> tag for that in the snippet below.

<html>

<head>

content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>

<title>Document</title>

<py-env>

– matplotlib

</py-env>

</head>

<body>

<h1>Matplotlib</h1>

<py-script> print(“My Lineplot”)</py-script>

</body>

</html>

To see the results of this, you have to open this HTML file in your web browser. On Pycharm, you can easily do that by going to the upper-right corner and clicking on the Chrome icon.

Displaying a line plot on the web browser

Before you write Python code to create a line plot, in the <body> section you have to create a <div> that will contain the id of this plot. The id will be “lineplot”

Here’s the Python code to make the line plot;

# Python Code Goes Here …

import matplotlib.pyplot as plt

fig, ax = plt.subplots()

year_1 = [2016, 2017, 2018, 2019, 2020, 2021]

population_1 = [42, 43, 45, 47, 48, 50]

year_2 = [2016, 2017, 2018, 2019, 2020, 2021]

population_2 = [43, 43, 44, 44, 45, 45]

plt.plot(year_1, population_1, marker=’o’, linestyle=’–‘, color=’g’, label=’Country 1′)

plt.plot(year_2, population_2, marker=’d’, linestyle=’-‘, color=’r’, label=’Country 2′)

plt.xlabel(‘Year’)

plt.ylabel(‘Population (M)’)

plt.title(‘Year vs Population’)

plt.legend(loc=’lower right’)

fig

If you put all the elements together, you should see the line plot below in your browser (it might take a few seconds to load).

Conclusion

Now you know how to run visualizations on the web browser with Python and HTML.

Join Education Ecosystem today and learn more about data visualization.

Education Ecosystem Staff

The Education Ecosystem Staff consist of various writers who are experienced in their field. The staff strives to educate and inform others of what's happening in the technology industry.