POC: Numpy, Matplotlib in your browser

Lately, I’ve learned about PyScript and Pyodide. Pyodide provides a CPython port to WASM, i.e. capable of running in the browser, and PyScript makes it simple to integrate Python scripts in a webpage (as simple as JavaScript), manipulate the DOM, use JS libraries, …

Oh and that’s not all: Pyodide ships in with quite a lot of compiled packages for WASM, like matplotlib, numpy, cv2. Oh and by the way, it is all open-source and can be setup locally, as done on this website at the time of this writing.

All of this gave me ideas, but for this to fulfill my wildest dreams, I was still missing interactive plots with matplotlib. I didn’t even dare to hope that it would one day become possible, but actually, it’s already possible: here is an example of interactive python-only plot running in your browser :-)

Loading... (may take some time)

How is that even remotely possible?

Well, turns out Pyodide also introduces pretty complete web backends for matplotlib.

As someone who was already using Matplotlib to create annotation interfaces before, some of which were running in Jupyter Notebooks so that the mathy lifting was happening in Python, I can only welcome this stack that I perceive as a game-changer:

  • math can be written once in Python both for data processing and annotation
  • while the server is relieved from having to handle the UI (also relieving the client-server connection)
  • and being much more responsive on the client side

What I also like is that other JavaScript libraries (e.g. D3.js) can be used instead of matplotlib in conjunction with Numpy.

Lots of fun to be had!

interpreter = "/static/pyodide/pyodide.mjs" packages = ['matplotlib', 'numpy']