0 0
WP Ad Inserter plugin
Read Time:4 Minute, 44 Second

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>

    <meta charset=”UTF-8″>

    <meta name=”viewport”

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

    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

    <title>Document</title>

</head>

<body>

</body>

</html>

Now to use PyScript, add the following lines to the <head> section in the HTML template.

<link rel=”stylesheet” href=”https://pyscript.net/alpha/pyscript.css” />

<script defer src=”https://pyscript.net/alpha/pyscript.js”></script>

You should have something like this;

<html>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport”

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

    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

    <title>Document</title>

    <link rel=”stylesheet” href=”https://pyscript.net/alpha/pyscript.css” />

    <script defer src=”https://pyscript.net/alpha/pyscript.js”></script>

</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>

    <meta charset=”UTF-8″>

    <meta name=”viewport”

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

    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

    <title>Document</title>

    <link rel=”stylesheet” href=”https://pyscript.net/alpha/pyscript.css” />

    <script defer src=”https://pyscript.net/alpha/pyscript.js”></script>

    <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”

<div id=”lineplot”></div>

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

visualization on browser

Conclusion

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

Source: https://blog.educationecosystem.com/how-to-run-python-visualizations-on-a-web-browser-using-pyscript/

Python List Comprehension with examples Previous post Python List Comprehension with examples
5 Best Ways to Reverse an Array in Java Next post 5 Best Ways to Reverse an Array in Java

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.