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?

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

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

Cheuk Ting Ho

Cheukting

@cheukting_ho

https://cheuk.dev

Get this slides at slides.com/cheukting_ho/pyscriptviz