Public
HTTP
iamseeley-pyodidedataanalysis.web.val.run
May 18, 2024
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
export const pyodideExample = () => {
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data Analysis with Pyodide</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<h1>Data Analysis using Python in WebAssembly</h1>
<input type="file" id="fileInput" accept=".csv">
<button id="analyze">Analyze</button>
<div id="analysisOptions" style="display: none;">
<h3>Select Analysis</h3>
<label for="columnSelect">Select Column:</label>
<select id="columnSelect"></select>
<button id="plotHistogram">Plot Histogram</button>
<button id="calculateStats">Calculate Statistics</button>
</div>
<div id="result"></div>
<div id="plotContainer"></div>
<script>
async function main() {
let pyodide = await loadPyodide();
await pyodide.loadPackage(['numpy', 'pandas', 'matplotlib']);
console.log('Pyodide is ready to use!');
pyodide.runPython(\`
import pandas as pd
import numpy as np
import json
import base64
import io
import matplotlib.pyplot as plt
def load_csv(file_content):
df = pd.read_csv(io.StringIO(file_content))
return df.to_json()
def get_columns(json_df):
df = pd.read_json(json_df)
return json.dumps(df.columns.tolist())
def calculate_statistics(json_df, column):
df = pd.read_json(json_df)
stats = df[column].describe().to_dict()
return json.dumps(stats)
def plot_histogram(json_df, column):
df = pd.read_json(json_df)
plt.figure()
df[column].hist(bins=30)
plt.xlabel(column)
plt.ylabel('Frequency')
plt.title(f'Histogram of {column}')
buf = io.BytesIO()
plt.savefig(buf, format='png')
buf.seek(0)
img = base64.b64encode(buf.read()).decode('utf-8')
return img
\`);
return pyodide;
}
const pyodide = main();
let jsonData;
const fileInput = document.getElementById('fileInput');
const analyzeButton = document.getElementById('analyze');
const analysisOptions = document.getElementById('analysisOptions');
const columnSelect = document.getElementById('columnSelect');
const resultElement = document.getElementById('result');
const plotContainer = document.getElementById('plotContainer');
analyzeButton.addEventListener('click', async () => {
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = async (e) => {
const fileContent = e.target.result;
jsonData = await pyodide.then(pyodide => pyodide.runPython(\`load_csv("""\${fileContent}""")\`));
const columns = await pyodide.then(pyodide => pyodide.runPython(\`get_columns(\${JSON.stringify(jsonData)})\`));
const columnsList = JSON.parse(columns);
columnSelect.innerHTML = '';
columnsList.forEach(col => {
const option = document.createElement('option');
option.value = col;
option.textContent = col;
columnSelect.appendChild(option);
});
analysisOptions.style.display = 'block';
};
reader.readAsText(file);
});
document.getElementById('calculateStats').addEventListener('click', async () => {
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
May 18, 2024