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?
- autoComplete.js - Autocomplete
- HighCharts.js - Charts
-
Velocity.js - Animation
- D3.js - Visualizations
Creating an interactive dashboard
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
Data Visualization with PyScript
By Blake Rayfield
