Revolutionalise Data Visualization with PyScript

Have you heard of PyScript?

So what is PyScript?

So what is PyScript?

  • a framework
     
  • run Python applications in the browser
     
  • not to replace JavaScript,
    but rather, use with it
     
  • thanks to Pyodide and WASM
     
  • many popular packages of Python avaliable

This is how to use PyScript

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
      <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    </head>

  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot"></div>
    <py-config type="json">
        {
          "packages": ["numpy", "matplotlib"]
        }
    </py-config>
    <py-script output="plot">
      import matplotlib.pyplot as plt
      import numpy as np
      x = np.random.randn(1000)
      y = np.random.randn(1000)
      fig, ax = plt.subplots()
      ax.scatter(x, y)
      fig
    </py-script>
  </body>
</html>
    <py-config type="toml">
        packages = ["numpy", "matplotlib"]
        paths = ["./data.py"]
    </py-config>

toml format
(default)

    <py-config type="json">
        {
          "packages": ["numpy", "matplotlib"],
          "paths": ["./data.py"]
        }
    </py-config>

json format

load in config source​

<py-config src="./custom.toml">
  paths = ["./utils.py"]
</py-config>

It is useful for ...

  • plug in packages (local wheel or hosted)
  • change runtime settings (e.g. setting runtime source)
  • adding meta data (e.g. decription, author_name, license)

Interactive Python interface (like jupyter notebook)

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
  <py-repl></py-repl>
</html>

Why is it relevant to my work?

Do you visualise data?

With Pyscript, you can...

  • run dynamic viz fully in the front end
     
  • have interactive UI
     
  • share without installation
     
  • easily embedded on webpages

Here is a few example

Pyscript examples

Get the ice cream codes here: github.com/Cheukting/pyscript-ice-cream

Q & A

  • Can you pull in a python script?
    - Yes you can (see example)
     
  • What is the Python version we are using?
    - It is using Pyodide so it is whatever Pyodide is using
     
  • Why can't you use <script tag="python">
    - Because <script> is not a custom tag and it is defined by the browser which none of them is supporting Python yet
     
  • Why don't you just use Pyodide?
    - It's like we use Keras to simplify using Tersorflow, PyScript make it easier to using Python on the browser

Q & A

  • Can you pin a package version at <py-env>?
    - Right now you cannot, but you can host the wheel yourself
      (see example here)
     
  • What is the difference between PyScirpt and Brython?
    - PyScript is interpreting Python to WASM instead of JS and have many popular packages avaliable
     
  • Any plan to support BeeWare?
    - BeeWare is also a project Anaconda support and hopefully we will have more concrete manifestations of BeeWare PyScript support

Revolutionalise Data Visualization with PyScript

Revolutionalise Data Visualization with PyScript

By Cheuk Ting Ho

Revolutionalise Data Visualization with PyScript

  • 174