File size: 4,836 Bytes
926248a
 
 
d477dfb
926248a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html>
    <head>
        <title id="header-title">Pandas</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>