jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

Pandas example file for /examples folder (#1067)

Browse Source 
* Add files via upload

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Roman Kehr
2022-12-26 11:38:16 +01:00
committed by GitHub
parent 059dbc88c9
commit 15bb8f03ea
1 changed files with 120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
examples/pandas.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<title id="header-title"></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/png" href="./favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>
<body>
<nav class="navbar" style="background-color: #000000;">
<div class="app-header">
<a href="/">
<img src="./logo.png" class="logo">
</a>
<a class="title" id="page-title" href="" style="color: #f0ab3c;"></a>
</div>
</nav>
<br />
<div id="page-message"></div>
<div id="pandas-source">
<h3>Data Source</h3>
<input type="text" id="txt-url" class="py-input" size="70"></input>
<button type="submit" id="btn-load" class="py-button" py-click="loadFromURL()">Load CSV</button>
</div>
<div id="pandas-repl" hidden>
<h3>Python REPL</h3>
<py-repl id ="pandas-repl-inner" output="pandas-output-inner">
# Hit SHIFT + ENTER to execute example code
# Get all closed airports in Great Britain
df2 = df.query("type == 'closed' & iso_country == 'GB'")
df2
</py-repl>
</div>
<div id ="pandas-output" hidden>
<h3>Output</h3>
<div id="pandas-output-inner"></div>
</div>
<div id="pandas-dev-console" hidden>
<h3>Dev Console</h3>
<py-terminal auto></py-terminal>
</div>
<py-tutor>
<py-config>
plugins = [
"../build/plugins/python/py_tutor.py"
]
packages = ["pandas"]
</py-config>
<section class="pyscript">
<py-script>
import pandas as pd
from pyodide.http import open_url
import sys
title = "Pandas (and basic DOM manipulation)"
page_message = "This example loads a remote CSV file into a Pandas dataframe, displays it and lets you manipulate it through a Python REPL"
url = "https://raw.githubusercontent.com/datasets/airport-codes/master/data/airport-codes.csv"
Element("header-title").element.innerText = title
Element("page-title").element.innerText = title
Element("page-message").element.innerText = page_message
Element("txt-url").element.value = url
# Depending on the type of DOM element, there are several alternative methods to write to it
# Element("id-of-dom-element").write("example")
# Element("id-of-dom-element").innerText = "example"
# Element("id-of-dom-element").value = "example"
# Element("id-of-dom-element").element.innerText = "example"
# Element("id-of-dom-element").element.value = "example"
# js.document.getElementById("id-of-dom-element").innerText = "example"
# js.document.getElementById("id-of-dom-element").value = "example"
df = pd.DataFrame()
def loadFromURL(*ags, **kws):
global df
# clear dataframe & output
df = pd.DataFrame()
Element("pandas-output-inner").element.innerHTML = ""
url = Element("txt-url").element.value
log ("Trying to fetch CSV from " + url)
df = pd.read_csv(open_url(url))
Element("pandas-repl").element.style.display = "block"
Element("pandas-output").element.style.display = "block"
Element("pandas-dev-console").element.style.display = "block"
display (df, target="pandas-output-inner", append="False")
def log(message):
# log to pyscript dev console
print (message)
# log to JS console
js.console.log (message)
</py-script>
</section>
</py-tutor>
</body>
</html>