As a Python<\/a> developer, one particularly exciting application is the ability to run Python code directly in the browser. In this article, I\u2019ll explore what WebAssembly is (and its relation to the Pyodide library), talk about its benefits and everyday use cases, and dive into some practical examples of how you can use WebAssembly to run Python programs on the web.<\/p>\n These tools can also benefit data scientists and ML professionals. Pyodide brings a significant portion of the scientific Python stack\u00a0(NumPy, Pandas, Scikit-learn, Matplotlib, SciPy, etc.) to the browser, meaning that using familiar tools and libraries during code development is possible. It can also be useful for demonstration purposes. As you\u2019ll see in my final example, combining Python\u2019s data processing power with HTML, CSS, and JavaScript for UI, you can quickly build interactive dashboards or tools without needing a separate backend for many use cases.<\/p>\n Webassembly<\/a> is a low-level binary instruction format designed as a portable target for compiling high-level languages, such as C, C++, Rust, and even Python. It was created to enable high-performance applications on the web without some of the pitfalls of traditional JavaScript execution, such as run-time speed. Some key aspects of WebAssembly include:<\/p>\n WebAssembly has a wide array of applications. Some of the most common use cases include:-<\/p>\n If you frequently code in Python, that last point should make your ears prick up, so let\u2019s dive into that aspect further.<\/p>\n Traditionally, Python runs on the server or in desktop applications. However, thanks to initiatives like Pyodide<\/strong><\/a>, Python can run in the browser via WebAssembly. Pyodide compiles the CPython interpreter code into WebAssembly, allowing you to execute Python code and use many popular third-party libraries directly in your web application.<\/p>\n And this isn\u2019t just a gimmick. There are several advantages to doing this, including:-<\/p>\n We\u2019ve mentioned Pyodide a few times already, so let\u2019s take a closer look at what exactly Pyodide is.<\/p>\n The idea behind Pyodide was born from the growing need to run Python code directly in the browser without relying on a traditional server-side setup. Traditionally, web applications had depended on JavaScript for client-side interactions, leaving Python confined to back-end or desktop applications. However, with the advent of WebAssembly, an opportunity arose to bridge this gap.<\/p>\n Mozilla Research recognised the potential of this approach and set out to port CPython, the reference implementation of Python, to WebAssembly using the Emscripten toolchain. This effort was about running Python in the browser and unlocking a new world of interactive, client-side applications powered by Python\u2019s rich set of libraries for data science, numerical computing, and more.\u00a0<\/p>\n To summarise, at its core, Pyodide is a port of CPython compiled into WebAssembly. This means that when you run Python code in the browser using Pyodide, you execute a fully functional Python interpreter optimised for the web environment.<\/p>\n Right, it\u2019s time to look at some code.<\/p>\n Before we start coding, let\u2019s set up our development environment. The best practice is to create a separate Python environment where you can install any necessary software and experiment with coding, knowing that anything you do in this environment won\u2019t affect the rest of your system.<\/p>\n I use conda for this, but you can use whatever method you know best suits you. Note that I\u2019m using Linux (WSL2 on Windows).<\/p>\n Now that our environment is set up, we can install the required libraries and software.<\/p>\n Now type in Your URL will be different to mine, but it should look something like this:-<\/p>\n Let\u2019s start with the easiest example possible. The simplest way to include Pyodide in your HTML page is via a Content Delivery Network (CDN). We then print out the text \u201cHello World!\u201d<\/p>\n I ran the above code in W3Schools HTML TryIt<\/a> editor and got this,<\/p>\n \n When the button is clicked, Pyodide runs the Python code that prints \u201cHello, World!\u201d. We don\u2019t see anything printed on the screen, as it is printed to the console by default. We\u2019ll fix that in our following example.<\/p>\n In our second example, we\u2019ll use Pyodide to run Python code in the browser that will perform a simple mathematical calculation. In this case, we will calculate the square root of 16 and output the result to the browser.\u00a0<\/p>\n Running the above code in the W3Schools TryIT browser, I got this output.<\/p>\n Another valuable and powerful feature of using Pyodide is the ability to call Python functions from JavaScript and vice versa.\u00a0<\/p>\n In this example, we create a Python function that performs a simple mathematical operation\u2014calculating the factorial of a number\u2014and call it from JavaScript code.<\/p>\n Here is a sample output when running on W3Schools. I won\u2019t include the code section this time, just the output.<\/p>\n Python\u2019s power comes from its rich ecosystem of libraries. With Pyodide, you can import and use popular libraries like NumPy for numerical computations.\u00a0<\/p>\n The following example demonstrates how to perform array operations using NumPy in the browser. The Numpy library is loaded using the pyodide.loadPackage<\/strong> function.<\/p>\n Another powerful aspect of running Python in the browser is the ability to generate visualisations. With Pyodide, you can use GUI libraries such as Matplotlib to create plots dynamically. Here\u2019s how to generate and display a simple plot on a canvas element.<\/p>\n In this example, we create a quadratic plot (y = x\u00b2) using Matplotlib, save the image to an in-memory buffer as a PNG, and encode it as a base64 string before displaying it.<\/p>\n For more complex applications or when you need to ensure that heavy computations do not block the main UI thread, you can run Pyodide in a Web Worker<\/a>. Web Workers allow you to run scripts in background threads, keeping your application responsive.<\/p>\n Below is an example of how to set up Pyodide in a Web Worker. We perform a calculation and simulate the calculation running for a while by introducing delays using the sleep()<\/strong> function. We also display a continuously updating counter showing the main UI running and responding normally.\u00a0<\/p>\n We\u2019ll need three files for this:- an index.html file and two JavaScript files.<\/p>\n index.html<\/strong><\/p>\n worker.js<\/strong><\/p>\n main.js<\/strong><\/p>\n To run this code, create all three files above and put them into the same directory on your local system. In that directory, type in the following command.<\/p>\n Now, in your browser, type this URL into it.<\/p>\n You should see a screen like this.<\/p>\n Now, if you press the This shows that the front-end logic and computation are not constrained by the work that\u2019s being done by the Python code behind the button.\u00a0<\/p>\n For our final example, I\u2019ll show you how to run a simple data dashboard directly in your browser. Our source data will be synthetic sales data in a CSV file.<\/p>\n We need three files for this, all of which should be in the same folder.<\/p>\n sales_data.csv<\/strong><\/p>\n The file I used had 100,000 records, but you can make this file as big or small as you like. Here are the first twenty records to give you an idea of what the data looked like.<\/p>\n index.html<\/strong><\/p>\n This is the main GUI interface to our dashboard.<\/p>\n main.js<\/strong><\/p>\n This contains our main Python pyodide code.<\/p>\n Like the previous example, you can run this as follows. Create all three files and place them in the same directory on your local system. In that directory, on a command terminal, type in the following,<\/p>\n Now, in your browser, type this URL into it.<\/p>\n Initially, your screen should look like this,<\/p>\n Click on the In this article, I described how using Pyodide and WebAssembly, we can run Python programs inside our browsers and showed several examples that demonstrate this. I talked about WebAssembly\u2019s role as a portable, high-performance compilation target that extends browser capabilities and how this is realised in the Python ecosystem using the third-party library Pyodide.<\/p>\n To illustrate the power and versatility of Pyodide, I provided several examples of its use, including:-<\/p>\n I hope that after reading this article, you will, like me, realise just how powerful a combination of Python, Pyodide, and a web browser can be.<\/p>\n The post Running Python Programs in Your\u00a0Browser<\/a> appeared first on Towards Data Science<\/a>.<\/p>\n<\/div>\nWhat is WebAssembly?<\/h4>\n
\n
What Can WebAssembly Be Used\u00a0For?<\/h4>\n
\n
Running Python on the\u00a0Web<\/h4>\n
\n
What is\u00a0Pyodide<\/h4>\n
Setting up a development environment<\/h4>\n
#create our test environment\n(base) $ conda create -n wasm_test python=3.12 -y\n\n# Now activate it\n(base) $ conda activate wasm_test<\/code><\/pre>\n# \n#\n(wasm_test) $ pip install jupyter nest-asyncio<\/code><\/pre>\njupyter notebook <\/code>into your command prompt. You should see a jupyter notebook open in your browser. If that doesn\u2019t happen automatically, you\u2019ll likely see a screenful of information after the jupyter notebook <\/code>command. Near the bottom, there will be a URL that you should copy and paste into your browser to initiate the Jupyter Notebook.<\/p>\nhttp:\/\/127.0.0.1:8888\/tree?token=3b9f7bd07b6966b41b68e2350721b2d0b6f388d248cc69da<\/code><\/pre>\nCode example 1\u200a\u2014\u200aHello World equivalent using\u00a0Pyodide<\/h4>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Hello, World! with Pyodide<\/title>\n<\/head>\n<body>\n <h1>Python Hello, World!<\/h1>\n <button id=\"runCode\">Run Python Code<\/button>\n <pre id=\"result\"><\/pre>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.23.4\/full\/pyodide.js\"><\/script>\n <script>\n async function runHelloWorld() {\n const pyodide = await loadPyodide();\n const output = await pyodide.runPythonAsync(`\n print(\"Hello, World!\")\n `);\n document.getElementById('result').textContent = output || \"Check the console for output.\";\n }\n document.getElementById('runCode').addEventListener('click', runHelloWorld);\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/image-89.png?ssl=1\")
Code Example 2\u200a\u2014\u200aPrinting output to the\u00a0browser<\/h4>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Pyodide Example<\/title>\n<\/head>\n<body>\n <h1>Running Python in the Browser with Pyodide<\/h1>\n <button id=\"runPython\">Run Python Code<\/button>\n <pre id=\"output\"><\/pre>\n\n <!-- Load Pyodide from the CDN -->\n <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.23.4\/full\/pyodide.js\"><\/script>\n <script>\n async function main() {\n \/\/ Load Pyodide\n const pyodide = await loadPyodide();\n document.getElementById('runPython').addEventListener('click', async () => {\n \/\/ Run a simple Python command\n let result = await pyodide.runPythonAsync(`\n import math\n math.sqrt(16)\n `);\n document.getElementById('output').textContent = 'Square root of 16 is: ' + result;\n });\n }\n main();\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/image-90-1024x413.png?resize=1024%2C413&ssl=1\")
Code Example 3 \u2013 Calling Python Functions from JavaScript<\/h4>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Call Python from JavaScript<\/title>\n<\/head>\n<body>\n <h1>Calculate the Factorial of a Number<\/h1>\n <input type=\"number\" id=\"numberInput\" placeholder=\"Enter a number\" \/>\n <button id=\"calcFactorial\">Calculate Factorial<\/button>\n <pre id=\"result\"><\/pre>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.23.4\/full\/pyodide.js\"><\/script>\n <script>\n let pyodideReadyPromise = loadPyodide();\n\n async function calculateFactorial() {\n const pyodide = await pyodideReadyPromise;\n \/\/ Define a Python function for calculating factorial\n await pyodide.runPythonAsync(`\n def factorial(n):\n if n == 0:\n return 1\n else:\n return n * factorial(n - 1)\n `);\n \/\/ Get the input value from the HTML form\n const n = Number(document.getElementById('numberInput').value);\n \/\/ Call the Python factorial function\n let result = pyodide.globals.get(\"factorial\")(n);\n document.getElementById('result').textContent = `Factorial of ${n} is ${result}`;\n }\n \n document.getElementById('calcFactorial').addEventListener('click', calculateFactorial);\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/image-91.png?ssl=1\")
Code Example 4\u2014 Using Python Libraries, e.g.\u00a0NumPy<\/h4>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>NumPy in the Browser<\/title>\n<\/head>\n<body>\n <h1>Matrix Multiplication with NumPy<\/h1>\n <button id=\"runNumPy\">Run NumPy Code<\/button>\n <pre id=\"numpyResult\"><\/pre>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.23.4\/full\/pyodide.js\"><\/script>\n <script>\n async function runNumPyCode() {\n \/\/ Load the Pyodide interpreter\n const pyodide = await loadPyodide();\n \n \/\/ Load the NumPy package before using it\n await pyodide.loadPackage(\"numpy\");\n \n \/\/ Run Python code to perform a matrix multiplication\n let result = await pyodide.runPythonAsync(`\n import numpy as np\n A = np.array([[1, 2], [3, 4]])\n B = np.array([[2, 0], [1, 2]])\n C = np.matmul(A, B)\n C.tolist() # Convert the numpy array to a Python list for display\n `);\n \n \/\/ Convert the Python result (PyProxy) to a native JavaScript object\n \/\/ so it displays properly\n document.getElementById('numpyResult').textContent =\n 'Matrix Multiplication Result: ' + JSON.stringify(result.toJs());\n }\n \n \/\/ Set up the event listener for the button\n document.getElementById('runNumPy').addEventListener('click', runNumPyCode);\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/image-92.png?ssl=1\")
Code Example 5\u2014 Using Python libraries, e.g. matplotlib<\/h4>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Matplotlib in the Browser<\/title>\n<\/head>\n<body>\n <h1>Interactive Plot with Matplotlib<\/h1>\n <button id=\"plotGraph\">Generate Plot<\/button>\n <img id=\"plotImage\" alt=\"Plot will appear here\" \/>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.23.4\/full\/pyodide.js\"><\/script>\n <script>\n async function generatePlot() {\n \/\/ Load the Pyodide interpreter\n const pyodide = await loadPyodide();\n \n \/\/ Load the matplotlib package before using it\n await pyodide.loadPackage(\"matplotlib\");\n \n \/\/ Run Python code that creates a plot and returns it as a base64 encoded PNG image\n let imageBase64 = await pyodide.runPythonAsync(`\n import matplotlib.pyplot as plt\n import io, base64\n \n # Create a simple plot\n plt.figure()\n plt.plot([0, 1, 2, 3], [0, 1, 4, 9], marker='o')\n plt.title(\"Quadratic Plot\")\n plt.xlabel(\"X Axis\")\n plt.ylabel(\"Y Axis\")\n \n # Save the plot to a bytes buffer\n buf = io.BytesIO()\n plt.savefig(buf, format='png')\n buf.seek(0)\n \n # Encode the image in base64 and return it\n base64.b64encode(buf.read()).decode('ascii')\n `);\n \n \/\/ Set the src attribute of the image element to display the plot\n document.getElementById('plotImage').src = \"data:image\/png;base64,\" + imageBase64;\n }\n \n \/\/ Add event listener to the button to generate the plot\n document.getElementById('plotGraph').addEventListener('click', generatePlot);\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/image-93-1024x501.png?resize=1024%2C501&ssl=1\")
Code Example 6: Running Python in a Web\u00a0Worker<\/h4>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Pyodide Web Worker Example<\/title>\n<\/head>\n<body>\n <h1>Running Python in a Web Worker<\/h1>\n <button id=\"startWorker\">Start Computation<\/button>\n <p id=\"status\">Status: Idle<\/p>\n <pre id=\"workerOutput\"><\/pre>\n <script src=\"main.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\/\/ Load Pyodide from the CDN inside the worker\nself.importScripts(\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.23.4\/full\/pyodide.js\");\n\nasync function initPyodide() {\n self.pyodide = await loadPyodide();\n \/\/ Inform the main thread that Pyodide has been loaded\n self.postMessage(\"Pyodide loaded in Worker\");\n}\n\ninitPyodide();\n\n\/\/ Listen for messages from the main thread\nself.onmessage = async (event) => {\n if (event.data === 'start') {\n \/\/ Execute a heavy computation in Python within the worker.\n \/\/ The compute function now pauses for 0.5 seconds every 1,000,000 iterations.\n let result = await self.pyodide.runPythonAsync(`\nimport time\ndef compute():\n total = 0\n for i in range(1, 10000001): # Loop from 1 to 10,000,000\n total += i\n if i % 1000000 == 0:\n time.sleep(0.5) # Pause for 0.5 seconds every 1,000,000 iterations\n return total\ncompute()\n `);\n \/\/ Send the computed result back to the main thread\n self.postMessage(\"Computed result: \" + result);\n }\n};<\/code><\/pre>\n\/\/ Create a new worker from worker.js\nconst worker = new Worker('worker.js');\n\n\/\/ DOM elements to update status and output\nconst statusElement = document.getElementById('status');\nconst outputElement = document.getElementById('workerOutput');\nconst startButton = document.getElementById('startWorker');\n\nlet timerInterval;\nlet secondsElapsed = 0;\n\n\/\/ Listen for messages from the worker\nworker.onmessage = (event) => {\n \/\/ Append any message from the worker to the output\n outputElement.textContent += event.data + \"n\";\n\n if (event.data.startsWith(\"Computed result:\")) {\n \/\/ When computation is complete, stop the timer and update status\n clearInterval(timerInterval);\n statusElement.textContent = `Status: Completed in ${secondsElapsed} seconds`;\n } else if (event.data === \"Pyodide loaded in Worker\") {\n \/\/ Update status when the worker is ready\n statusElement.textContent = \"Status: Worker Ready\";\n }\n};\n\n\/\/ When the start button is clicked, begin the computation\nstartButton.addEventListener('click', () => {\n \/\/ Reset the display and timer\n outputElement.textContent = \"\";\n secondsElapsed = 0;\n statusElement.textContent = \"Status: Running...\";\n \n \/\/ Start a timer that updates the main page every second\n timerInterval = setInterval(() => {\n secondsElapsed++;\n statusElement.textContent = `Status: Running... ${secondsElapsed} seconds elapsed`;\n }, 1000);\n \n \/\/ Tell the worker to start the heavy computation\n worker.postMessage('start');\n});<\/code><\/pre>\n$ python -m http.server 8000<\/code><\/pre>\nhttp:\/\/localhost:8000\/index.html<\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/image-98-1024x490.png?resize=1024%2C490&ssl=1\")
<strong>Start Computation<\/strong><\/code> button, you should see a counter displayed on the screen, starting at 1 and ticking up by 1 every second until the computation is complete and its final result is displayed\u200a\u2014\u200aabout 5 seconds in total.\u00a0<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/image-99.png?ssl=1\")
Code Example 7: Running a simple data dashboard<\/h4>\n
Date,Category,Region,Sales\n2021-01-01,Books,West,610.57\n2021-01-01,Beauty,West,2319.0\n2021-01-01,Electronics,North,4196.76\n2021-01-01,Electronics,West,1132.53\n2021-01-01,Home,North,544.12\n2021-01-01,Beauty,East,3243.56\n2021-01-01,Sports,East,2023.08\n2021-01-01,Fashion,East,2540.87\n2021-01-01,Automotive,South,953.05\n2021-01-01,Electronics,North,3142.8\n2021-01-01,Books,East,2319.27\n2021-01-01,Sports,East,4385.25\n2021-01-01,Beauty,North,2179.01\n2021-01-01,Fashion,North,2234.61\n2021-01-01,Beauty,South,4338.5\n2021-01-01,Beauty,East,783.36\n2021-01-01,Sports,West,696.25\n2021-01-01,Electronics,South,97.03\n2021-01-01,Books,West,4889.65<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Pyodide Sales Dashboard<\/title>\n <style>\n body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }\n h1 { color: #333; }\n input { margin: 10px; }\n select, button { padding: 10px; font-size: 16px; margin: 5px; }\n img { max-width: 100%; display: block; margin: 20px auto; }\n table { width: 100%; border-collapse: collapse; margin-top: 20px; }\n th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }\n\n th { background-color: #f4f4f4; }\n .sortable th {\n cursor: pointer;\n user-select: none;\n }\n .sortable th:hover {\n background-color: #e0e0e0;\n }\n <\/style>\n <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.23.4\/full\/pyodide.js\"><\/script>\n<\/head>\n<body>\n\n <h1>![\"\ud83d\udcca\"](\"https:\/\/i0.wp.com\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/1f4ca.png?ssl=1\")
Pyodide Sales Dashboard<\/h1>\n\n <input type=\"file\" id=\"csvUpload\" accept=\".csv\">\n \n <label for=\"metricSelect\">Select Sales Metric:<\/label>\n <select id=\"metricSelect\">\n <option value=\"total_sales\">Total Sales<\/option>\n <option value=\"category_sales\">Sales by Category<\/option>\n <option value=\"region_sales\">Sales by Region<\/option>\n <option value=\"monthly_trends\">Monthly Trends<\/option>\n <\/select>\n\n <br><br>\n <button id=\"analyzeData\">Analyze Data<\/button>\n\n <h2>![\"\ud83d\udcc8\"](\"https:\/\/i0.wp.com\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/1f4c8.png?ssl=1\")
Sales Data Visualization<\/h2>\n <img id=\"chartImage\" alt=\"Generated Chart\" style=\"display: none\">\n <h2> Sales Data Table<\/h2>\n <div id=\"tableOutput\"><\/div>\n\n <script src=\"main.js\"><\/script>\n\n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\nasync function loadPyodideAndRun() {\n const pyodide = await loadPyodide();\n await pyodide.loadPackage([\"numpy\", \"pandas\", \"matplotlib\"]);\n \n document.getElementById(\"analyzeData\").addEventListener(\"click\", async () => {\n const fileInput = document.getElementById(\"csvUpload\");\n const selectedMetric = document.getElementById(\"metricSelect\").value;\n const chartImage = document.getElementById(\"chartImage\");\n const tableOutput = document.getElementById(\"tableOutput\");\n \n if (fileInput.files.length === 0) {\n alert(\"Please upload a CSV file first.\");\n return;\n }\n\n \/\/ Read the CSV file\n const file = fileInput.files[0];\n const reader = new FileReader();\n reader.readAsText(file);\n \n reader.onload = async function (event) {\n const csvData = event.target.result;\n \n await pyodide.globals.set('csv_data', csvData);\n await pyodide.globals.set('selected_metric', selectedMetric);\n \n const pythonCode = \n 'import sysn' +\n 'import ion' +\n 'import numpy as npn' +\n 'import pandas as pdn' +\n 'import matplotlibn' +\n 'matplotlib.use(\"Agg\")n' +\n 'import matplotlib.pyplot as pltn' +\n 'import base64n' +\n 'n' +\n '# Capture outputn' +\n 'output_buffer = io.StringIO()n' +\n 'sys.stdout = output_buffern' +\n 'n' +\n '# Read CSV directly using csv_data from JavaScriptn' +\n 'df = pd.read_csv(io.StringIO(csv_data))n' +\n 'n' +\n '# Ensure required columns existn' +\n 'expected_cols = {\"Date\", \"Category\", \"Region\", \"Sales\"}n' +\n 'if not expected_cols.issubset(set(df.columns)):n' +\n ' print(\"![\"\u274c\"](\"https:\/\/i0.wp.com\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/274c.png?ssl=1\")
CSV must contain 'Date', 'Category', 'Region', and 'Sales' columns.\")n' +\n ' sys.stdout = sys.__stdout__n' +\n ' exit()n' +\n 'n' +\n '# Convert Date column to datetimen' +\n 'df[\"Date\"] = pd.to_datetime(df[\"Date\"])n' +\n 'n' +\n 'plt.figure(figsize=(12, 6))n' +\n 'n' +\n 'if selected_metric == \"total_sales\":n' +\n ' total_sales = df[\"Sales\"].sum()n' +\n ' print(f\"![\"\ud83d\udcb0\"](\"https:\/\/i0.wp.com\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/1f4b0.png?ssl=1\")
Total Sales: ${total_sales:,.2f}\")n' +\n ' # Add daily sales trend for total sales viewn' +\n ' daily_sales = df.groupby(\"Date\")[\"Sales\"].sum().reset_index()n' +\n ' plt.plot(daily_sales[\"Date\"], daily_sales[\"Sales\"], marker=\"o\")n' +\n ' plt.title(\"Daily Sales Trend\")n' +\n ' plt.ylabel(\"Sales ($)\")n' +\n ' plt.xlabel(\"Date\")n' +\n ' plt.xticks(rotation=45)n' +\n ' plt.grid(True, linestyle=\"--\", alpha=0.7)n' +\n ' # Show top sales days in tablen' +\n ' table_data = daily_sales.sort_values(\"Sales\", ascending=False).head(10)n' +\n ' table_data[\"Sales\"] = table_data[\"Sales\"].apply(lambda x: f\"${x:,.2f}\")n' +\n ' print(\"<h3>Top 10 Sales Days<\/h3>\")n' +\n ' print(table_data.to_html(index=False))n' +\n 'elif selected_metric == \"category_sales\":n' +\n ' category_sales = df.groupby(\"Category\")[\"Sales\"].agg([n' +\n ' (\"Total Sales\", \"sum\"),n' +\n ' (\"Average Sale\", \"mean\"),n' +\n ' (\"Number of Sales\", \"count\")n' +\n ' ]).sort_values(\"Total Sales\", ascending=True)n' +\n ' category_sales[\"Total Sales\"].plot(kind=\"bar\", title=\"Sales by Category\")n' +\n ' plt.ylabel(\"Sales ($)\")n' +\n ' plt.xlabel(\"Category\")n' +\n ' plt.grid(True, linestyle=\"--\", alpha=0.7)n' +\n ' # Format table datan' +\n ' table_data = category_sales.copy()n' +\n ' table_data[\"Total Sales\"] = table_data[\"Total Sales\"].apply(lambda x: f\"${x:,.2f}\")n' +\n ' table_data[\"Average Sale\"] = table_data[\"Average Sale\"].apply(lambda x: f\"${x:,.2f}\")n' +\n ' print(\"<h3>Sales by Category<\/h3>\")n' +\n ' print(table_data.to_html())n' +\n 'elif selected_metric == \"region_sales\":n' +\n ' region_sales = df.groupby(\"Region\")[\"Sales\"].agg([n' +\n ' (\"Total Sales\", \"sum\"),n' +\n ' (\"Average Sale\", \"mean\"),n' +\n ' (\"Number of Sales\", \"count\")n' +\n ' ]).sort_values(\"Total Sales\", ascending=True)n' +\n ' region_sales[\"Total Sales\"].plot(kind=\"barh\", title=\"Sales by Region\")n' +\n ' plt.xlabel(\"Sales ($)\")n' +\n ' plt.ylabel(\"Region\")n' +\n ' plt.grid(True, linestyle=\"--\", alpha=0.7)n' +\n ' # Format table datan' +\n ' table_data = region_sales.copy()n' +\n ' table_data[\"Total Sales\"] = table_data[\"Total Sales\"].apply(lambda x: f\"${x:,.2f}\")n' +\n ' table_data[\"Average Sale\"] = table_data[\"Average Sale\"].apply(lambda x: f\"${x:,.2f}\")n' +\n ' print(\"<h3>Sales by Region<\/h3>\")n' +\n ' print(table_data.to_html())n' +\n 'elif selected_metric == \"monthly_trends\":n' +\n ' df[\"Month\"] = df[\"Date\"].dt.to_period(\"M\")n' +\n ' monthly_sales = df.groupby(\"Month\")[\"Sales\"].agg([n' +\n ' (\"Total Sales\", \"sum\"),n' +\n ' (\"Average Sale\", \"mean\"),n' +\n ' (\"Number of Sales\", \"count\")n' +\n ' ])n' +\n ' monthly_sales[\"Total Sales\"].plot(kind=\"line\", marker=\"o\", title=\"Monthly Sales Trends\")n' +\n ' plt.ylabel(\"Sales ($)\")n' +\n ' plt.xlabel(\"Month\")n' +\n ' plt.xticks(rotation=45)n' +\n ' plt.grid(True, linestyle=\"--\", alpha=0.7)n' +\n ' # Format table datan' +\n ' table_data = monthly_sales.copy()n' +\n ' table_data[\"Total Sales\"] = table_data[\"Total Sales\"].apply(lambda x: f\"${x:,.2f}\")n' +\n ' table_data[\"Average Sale\"] = table_data[\"Average Sale\"].apply(lambda x: f\"${x:,.2f}\")n' +\n ' print(\"<h3>Monthly Sales Analysis<\/h3>\")n' +\n ' print(table_data.to_html())n' +\n 'n' +\n 'plt.tight_layout()n' +\n 'n' +\n 'buf = io.BytesIO()n' +\n 'plt.savefig(buf, format=\"png\", dpi=100, bbox_inches=\"tight\")n' +\n 'plt.close()n' +\n 'img_data = base64.b64encode(buf.getvalue()).decode(\"utf-8\")n' +\n 'print(f\"IMAGE_START{img_data}IMAGE_END\")n' +\n 'n' +\n 'sys.stdout = sys.__stdout__n' +\n 'output_buffer.getvalue()';\n\n const result = await pyodide.runPythonAsync(pythonCode);\n \n \/\/ Extract and display output with markers\n const imageMatch = result.match(\/IMAGE_START(.+?)IMAGE_END\/);\n if (imageMatch) {\n const imageData = imageMatch[1];\n chartImage.src = 'data:image\/png;base64,' + imageData;\n chartImage.style.display = 'block';\n \/\/ Remove the image data from the result before showing the table\n tableOutput.innerHTML = result.replace(\/IMAGE_START(.+?)IMAGE_END\/, '').trim();\n } else {\n chartImage.style.display = 'none';\n tableOutput.innerHTML = result.trim();\n }\n };\n });\n}\n\nloadPyodideAndRun();<\/code><\/pre>\n$ python -m http.server 8000<\/code><\/pre>\nhttp:\/\/localhost:8000\/index.html<\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/image-100-1024x502.png?resize=1024%2C502&ssl=1\")
<strong>Choose File<\/strong><\/code> button and select the data file you created to input into your dashboard. After that, choose a suitable metric from the <strong>Select Sales Metric<\/strong><\/code> dropdown list and click the <strong>Analyze data<\/strong><\/code> button. Depending on what options you choose to display, you should see something like this on your screen.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/05\/wsm2-fotor-20250509165235-2-1024x484.png?resize=1024%2C484&ssl=1\")
Summary<\/h4>\n
\n