Revolutionalise Data Visualization with PyScript

Cheuk Ting Ho

Cheukting

@cheukting_ho

https://cheuk.dev

Get this slides at slides.com/cheukting_ho/pyscriptviz

Have you heard of PyScript?

https://www.twitch.tv/cheukting_ho

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>

The <py-config> tag

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>

The <py-config> tag

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)

The <py-repl> tag

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

Interactive plot with UI
https://cheuk.dev/assets/html/ice-cream.html
Using Follim for map plotting
https://pyscript.net/examples/folium.html
Interactive plot with d3 (We can now `import d3`)
https://cheuk.dev/assets/html/ice-cream-d3.html

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