Data Visualization with PyScript

Follow Along by going to https://slides.com/d/VYG9zjY/live:

Introduction

Blake Rayfield, Ph.D.

Financial Economics

Who is this course for?

  • You’re a student or experienced data scientist looking to learn a new way to bring data visualizations to the web
  • You work with data and create visualizations
  • You wish to become a data analyst or data scientist
  • You want to learn to make visualization apps in Python that can be shared easily

Getting Started:

  • A PyScript can be made using any text editor. No special requirements.
  • However, if you want a better experience you can use PyScript.com

Introduction to PyScript

Creating a Basic PyScript

Example

Creating a basic PyScript

Example: Simple Example

<html lang="en">

<head>
    <meta charset="utf-8" />

    <title>PyScript Playground</title>

    <!-- Here is where we load both the PyScript CSS and JS files-->
    <!-- Now we are ready to Play with Python in the Browser -->
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    
    <!-- Here we can put any type of packages that we need-->
    <py-config>
    </py-config>


</head>

Two Parts: The <head>

<body>
    <h1 id="heading"></h1>
    
    <!-- Below are the basic elements of a PyScript-->
    <py-script>
    	magic = 5
        display("PyScript Playground number " + str(magic), target = "heading")
        
        ### Above we are using Python to control the heading of the page!

    </py-script>

    <py-repl>
        ### The py-repl opens a working python repl in the browser. 
        
        ### !!! Only packages loaded with the py-config can be used here, 
        ### otherwise you must go to micropip.install(...)
    </py-repl>



    <!--Below here, we can start moving around our HTML-->

    
</body>

Two Parts: The <body>

Creating a Visualization in Python

Example: MatPlotLib Example

<html lang="en">

<head>
    <meta charset="utf-8" />

    <title>A Simple PyScript Visulation</title>

    <!-- Here is where we load both the PyScript CSS and JS files-->
    <!-- Now we are ready to Play with Python in the Browser -->
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>

    <!-- We are going to use pandas and matplotlib from python, so we need to load them here -->
    <py-config>
        packages = [
        "matplotlib",
        "pandas"
        ]
    </py-config>
    
</head>

Two Parts: The <head>

<body>
    <py-script>
        import pandas as pd # Loading Pandas
        from pyodide.http import open_url #This is for accessing data from an external source
        import matplotlib.pyplot as plt #Loading Matplotlib
        
        # Below is one of the ways to load data in to PyScript from an external URL

        url = ("https://raw.githubusercontent.com/datasets/s-and-p-500/master/data/data.csv")

        stock_data = pd.read_csv(open_url(url))

        def plot(data):
            #Here we format the plot
            #plt.rcParams["figure.figsize"] = (15,12)
            fig, ax = plt.subplots()
            bars = ax.plot(pd.to_datetime(data.Date).dt.year, data["SP500"])
            plt.title("SP500 stock price")
            display(fig, target="plot_here", append=False)

        plot(stock_data)
    </py-script>
    
    <div id="plot_here">
    </body>

Two Parts: The <body>


<py-script>
  import pandas as pd # Loading Pandas
  from pyodide.http import open_url #This is for accessing data from an external source
  #import matplotlib.pyplot as plt #Loading Matplotlib

  # Below is one of the ways to load data in to PyScript from an external URL

  url = ("https://raw.githubusercontent.com/datasets/s-and-p-500/master/data/data.csv")

  stock_data = pd.read_csv(open_url(url))
 </py-script>

Loading External Data

<body>
    ...

    stock_data = pd.read_csv(open_url(url))

    def plot(data):
      #Here we format the plot
      #plt.rcParams["figure.figsize"] = (15,12)
      fig, ax = plt.subplots()
      bars = ax.plot(pd.to_datetime(data.Date).dt.year, data["SP500"])
      plt.title("SP500 stock price")
      display(fig, target="plot_here", append=False)   #### This display with target "plot_here"

      plot(stock_data)
      
    </py-script>
    
    <div id="plot_here">   <!-- Here is the plot_here id>
    
    </body>

Loading External Data

Creating a Visualization in Python: Going farther with JS

Example: Moving Ball

Creating a Visualization in Python: Going farther with JS

Example: Highcharts 

<html lang="en">
<!-- Adapted from the demo https://www.highcharts.com/demo/stock/flags-general -->

<head>
    <meta charset="utf-8" />

    <title>A PyScript Example with JS</title>

    <!-- Here is where we load both the PyScript CSS and JS files-->
    <!-- Now we are ready to Play with Python in the Browser -->
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <py-config>
        packages = [
        "pandas"
        ]
    </py-config>
</head>

The <head>

<py-repl>

</py-repl>
<py-script>
  import pandas as pd
  from pyodide.http import open_url, to_js
  import js
  import json

  Highcharts = js.Highcharts

  url = (
    'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v10.3.3/samples/data/usdeur.json'
  )

</py-script>

The <body> - Passing between python and JS

What types of JS Packages can take your PyScript to the next level?

Creating an interactive dashboard

Dashboard Example

Where Can I get more Information

  • https://docs.pyscript.net/latest/
  • https://jeff.glass/post/
  • https://pyscript.recipes/

Thank you

Blake Rayfield

blake.rayfield@outlook.com

LinkedIn: https://www.linkedin.com/in/blake-rayfield/

Web: blakerayfield.com