Run your first data analysis program in the browser with PyScript
PyScript is a Python front-end framework that allows users to build Python applications on the web using an HTML interface. This article will focus on building a web page with PyScript where we will perform data visualization.
- About Python
- How PyScript Works
- Create a webpage
PyScript Key Features
- Allows us to access Python and its vast library ecosystem from the browser (including NumPy, pandas, and scikit-learn).
- Users can control which packages and files are available when executing the page’s code by using environment management.
- We can immediately use some of the selected UI components, such as buttons, containers, text boxes, etc.
- We don’t have to worry about deployment because PyScript handles everything in our web browsers. As data scientists, we could share HTML files containing dashboards and/or models with our stakeholders, who could run them on their browsers without any technical configuration.
Are you looking for a comprehensive repository of Python libraries used in data science, check here.
How PyScript Works
Pyodide is the basis of PyScript. Pyodide is a Python distribution (a CPython version) for the browser and Node.js based on WebAssembly.
WebAssembly is the technology that allows Python programmers to create web pages. It uses a human readable text format language which is then translated into binary code that browsers can execute. We can now create code in any language, compile it to WebAssembly, and run it in a web browser.
Source of images
Emscripten, an open source compiler toolchain, can be seen in the following technology stack graphic. It allows compiling any portable C/C++ codebase into WebAssembly.
Fortunately, end users don’t need to fully understand what’s going on behind the scenes. However, it is unquestionably necessary, for example, for security reasons.
PyScript now allows you to create and run Python code in a browser. The plan for the future is to provide support for more languages. This is also where a possible constraint can arise. Currently, when using PyScript, we can only use libraries supported by Pyodide.
Create a webpage
To create a web page, we need to know HTML and CSS. Let’s start with a basic “Hello world” printing example.
Defining the HTML structure of a web page
print('Hello Folks') print("U0001f600") print('This is sample webpage running on python with the help of Pyscript')
This is what the webpage looks like.
Now let’s move on to the advanced example. In this example we will be plotting graphs using matplotlib.
- numpy - matplotlib - seaborn - pandasHello Folks
This is sample webpage running on python with the help of Pyscript
import matplotlib.pyplot as plt import numpy as np x = np.random.randn(1000) y = np.random.randn(1000) fig, ax = plt.subplots(figsize=(15,8)) plt.title("Scatter plot with random number") ax.scatter(x, y) plt.tick_params( axis="both", which="both", bottom=False, top=False, left=False, right=False, labeltop=False, labelleft=False, labelright=False, labelbottom=False) plt.xlabel("Random numbers") plt.ylabel("Random numbers") fig
In the code above there is a div tag which will create a blank area for the content inside the tag. Then using the py-script tag we can write all the python in the tag and understand it as writing a python script. To use Matplotlib, Pandas and NumPy, we need to create an environment for which we use the py-env tag.
We can also use CSS to style the page and modify the page, leaving that to you.
PyScript will allow us to run Python (and other) scripts directly from our browsers; the project is developed by Anaconda; the project is currently in alpha, but we can already experiment with a selection of libraries provided by Pyodide. With this article, we have understood the use of PyScript in building a web page in python.