Spaces:
Running
Running
| <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" /> | |
| <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 = [ | |
| "https://pyscript.net/latest/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(*args, **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> |