How to Run Python Visualizations On a Web Browser using PyScript

Read Time:4 Minute, 44 Second

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>

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

WP Ad Inserter plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
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. Required fields are marked *

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