altair
altair copied to clipboard
Add interactive gallery via JupyterLite
I re-discovered JupyterLite today and find it remarkably cool! We could use it to add interaction to the example gallery and add a "Try online" menu entry in the navbar similar to what is available on the VegaLite home page. You can try this live at https://joelostblom.github.io/altair-docs/ and here is a short video of what it looks like
https://user-images.githubusercontent.com/4560057/164151778-e0c3cd3e-c476-4208-b971-28922399e524.mp4
As you can see in the demo, there is still some boilerplate setup code required, and it is worth noting that JupyterLite is still in beta. I also played around with having it inline in the documentation, I think it could look good with with the replite directive on the bottom of each gallery example once it matures a bit and adds the ability to load on demand instead of on each page load. Currently I used jupytext to convert all the examples to notebook files and add them to JupyterLite; we could sort them into folders and make other tweaks if this is a direction we want to pursue.
This PR doesn't change anything in #2566 (the demo is just served on the same URL) so that it still ready to merge as is and the diff from this PR will be easier to understand afterwards. The only new commits here are the following:
- Add minimal jupyterlite setup
- Add extension gallery notebooks to jupyterlite
That's pretty cool! Great idea to have this available via the docs
Note to self that sphinx gallery added support for something like this in https://github.com/sphinx-gallery/sphinx-gallery/pull/977 that might be wortwhile checking out. They mention some drawbacks with using a separate console on each example page (e.g. loading times) which is what I was considering as an alternative to the jupyterlite approach I am using here. I think more people are used t oa notebook interface so either inline notebook via retrolite directive or standalone via the new button makes sense.
Some good examples here https://www.tryhamilton.dev/ (but I think that is using a react component for pyodide which we couldn't access via sphinx). The panel dev docs also use this and nicely links all the code snippets on the same page to the same kernel so that we don't need to download pyodide once per cell)
ipywidgets have a nice setup with a stylish button: https://ipywidgets.readthedocs.io/en/latest/embedding.html