Skip to content

Update examples.md #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 10, 2025
Merged

Update examples.md #137

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7013332
Update examples.md
Neon22 Aug 17, 2024
86661de
missing d3 link
Neon22 Aug 27, 2024
bab374a
sample clock removed
Neon22 Aug 28, 2024
8dad744
updated text after fixes made to examples
Neon22 Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 71 additions & 5 deletions docs/examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,84 @@ PyScript can be found [on PyScript.com](https://pyscript.com/@examples).

The examples are (links take you to the code):

### Simple:

* [Hello world](https://pyscript.com/@examples/hello-world/latest)
* uses included datetime module. No additional packages.
* [A simple clock](https://pyscript.com/@examples/simple-clock/latest)
* [Simple slider panel](https://pyscript.com/@examples/simple-panel/latest)
* [Streaming data panel](https://pyscript.com/@examples/streaming-in-panel/latest)
* Not found
* [WebGL Icosahedron](https://pyscript.com/@examples/webgl-icosahedron/latest)
* [KMeans in a panel](https://pyscript.com/@examples/kmeans-in-panel/latest)
* [New York Taxi panel (WebGL)](https://pyscript.com/@examples/nyc-taxi-panel-deckgl/latest)
* uses very old version of [three.js](https://threejs.org/) directly imported in index.html. (not as a module in toml)
* [Pandas dataframe fun](https://pyscript.com/@examples/pandas/latest)
* uses [pandas](https://pandas.pydata.org/) from pypi
* pyodide
* [Matplotlib example](https://pyscript.com/@examples/matplotlib/latest)
* uses [matplotlib](https://matplotlib.org/)
* not clear how numpy is being loaded as it is not referenced.
* pyodide
* [Todo](https://pyscript.com/@examples/todo-app/latest)
* uses pyweb. No additional packages.
* pyodide
* [Tic Tac Toe](https://pyscript.com/@examples/tic-tac-toe/latest)
* uses pyweb. No additional packages.
* pyodide
* [Pyscript Jokes](https://pyscript.com/@examples/pyscript-jokes/latest)
* uses pyweb and [pyjokes](https://pyjok.es/)
* pyodide
* [D3 visualization](https://pyscript.com/@examples/d3-visualization/latest)
* uses [d3]()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing link?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added link.
Do you think these examples should also be updated ? - beyond my expertise sorry.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure we changed so much up to the point we need updates but if sme example is badly broken I'd rather try to fix it or understand why is that, if that makes sense.

Copy link
Contributor Author

@Neon22 Neon22 Aug 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Four primary issues you might want to revisit:

  • Icosahedron example

    • because it uses the older style of three.js directly imported in index.html.
    • version 147 is now 20 releases behind today's version 167.
    • soon after 147 they changed to modules. So you cannot use this style of import unless its limited to 147 or earlier.
    • Now should be instantiated as a module in toml
    • This bug reported here: icosahedron example - newer versions will not run. examples#15 which includes links to potential solutions
    • Changing this means users could use three.js into the forseeable future.

  • Simple slider panel

    • because it does not run (for me)

  • KMeans in a panel

    • because it shows an error in the overlay - meaning the screen can't be seen or used by anyone running it
    • error is to do with threadpools (on my machine)

  • matplot example

    • because it imports numpy but numpy is not mentioned in the toml or index.html file.
    • I assume this is because it is directly embedded in the pyodide being referenced.
    • From memory there is one more example which also does not import numpy but uses it. (I did not make a note - sorry :( )
    • There are other examples which do formally import numpy in the toml and are therefore better examples.
      • You can see them referenced in this PR by searching the page for numpy

I will update this PR to remove the 'simple clock' you have since removed so it doesn't reappear if this PR is accepted.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the examples are fixed - I would be very pleased to update this PR to meet your satisfaction.

Copy link
Contributor Author

@Neon22 Neon22 Aug 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll check these later today - Thanks for doing this Andrea. I really appreciate it.

wrt the Kmeans demo

  • its a nice demo of kmeans but I agree that this kind of demo with a fragile environment may not be the best demo to include in the examples.
  • Maybe we could designate a "fragile" category, or we should replace it (and what its trying to show users) with another example which demonstrates the same things but using a less fragile example.
  • This could be a task added to the community to maybe encourage them to make examples that illustrate various parts of pyscript that you decide should be illustrated ??
    • you/someone would need to identify aspects that should be illuminated by examples. Then people could make those.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

imho we should improve somehow expectations, at least on PyScript .com side ... with that demo all I see is the inability for ourselves, or our users, to pin a config related dependency on both the Python and the browser side. I am sure it wouldn't be trivial to solve this issue, and we have a way to pin dependencies, but unfortunately that way doesn't necessarily play well with Pyodide registry (not their fault neither). Having a way to keep examples updated is one thing we should consider but having a way to help users keeping their own examples updated seem like a great goal too.

I will discuss this with @ntoll once he's back, but it's clear to me current strategy is not necessarily the best we could offer.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

my notes:

  • Icosahderon

    • I will submit PR to this to also update the lighting so it looks better.
    • I hope that having this example included will prompt more three.js examples

  • simple panel

    • I followed your link and it just shows a slider but nothing else.
    • Ahhh I think I understand. The slider IS the demo.
      • I guess I expected more than just a slider with a feedback value

  • matplotlib

    • looks great

  • kmeans

    • clicking on the plot does not filter but generates a bug.
    • The onscreen instruction indicates this should work
    • error is:
    PyodideTask exception was never retrieved

future: <PyodideTask finished name='Task-41' coro=<write() done,
defined at /lib/python3.12/site-packages/panel/io/pyodide.py:489> exception=Error:
NumberFormatter(p1053).text_align given invalid value: {"value":"left"}>


I will update my PR

Copy link
Contributor Author

@Neon22 Neon22 Aug 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR updated. Also added new PR to fix icosahedron example on pyscript-examples:

I.e. better lighting

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhh I think I understand. The slider IS the demo.

pretty much ... it's Simple for a reason 😁

PyodideTask exception was never retrieved

I have no idea about that example or the underling library but I wonder if updating all scripts to their latest version on the HTML side would just make it work. If it does, then we should likely also pin those versions in the TOML side of affair so that we won't have more surprises in the future.

* mixes javascript code with python code. imports d3 from javascript.
* pyodide
* [Import antigravity](https://pyscript.com/@examples/antigravity/latest)
* uses svg
* pyodide
* [API proxy tutorial](https://pyscript.com/@examples/api-proxy-tutorial/latest)
* uses fetch
* pyodide
* [API proxy and secrets tutorial](https://pyscript.com/@examples/api-proxy-and-secrets-tutorial/latest)
* uses fetch
* pyodide

### More complex:

* [Numpy fractals](https://pyscript.com/@examples/fractals-with-numpy-and-canvas/latest)
* uses [numpy](https://numpy.org/), [sympy](https://www.sympy.org/en/index.html) from pypi
* pyodide
* [Simple slider panel](https://pyscript.com/@examples/simple-panel/latest)
* uses [Panel](https://panel.holoviz.org/) and [Bokeh](https://bokeh.org/) from pypi and loads in index.html
* does not run
* pyodide
* [Streaming data panel](https://pyscript.com/@examples/streaming-in-panel/latest)
* uses [Panel](https://panel.holoviz.org/), [Bokeh](https://bokeh.org/) [numpy](https://numpy.org/), [pandas](https://pandas.pydata.org/) from pypi
* loads bokeh, panel, tabulator in index.html
* pyodide
* [KMeans in a panel](https://pyscript.com/@examples/kmeans-in-panel/latest)
* uses [Bokeh](https://bokeh.org/), [altair](https://altair-viz.github.io/), [numpy](https://numpy.org/), [pandas](https://pandas.pydata.org/), [scikit-learn](https://scikit-learn.org/stable/), [Panel](https://panel.holoviz.org/) from pypi
* loads panel, bootstrap, vega, tabulator, bokeh in index.html
* runs but displays errors to do with threadpools
* pyodide
* [New York Taxi panel (WebGL)](https://pyscript.com/@examples/nyc-taxi-panel-deckgl/latest)
* uses a mixture of pypi and direct load packages in index.html
* [Bokeh](https://bokeh.org/), [numpy](https://numpy.org/), [pandas](https://pandas.pydata.org/), [Panel](https://panel.holoviz.org/), [deck-gl](https://deck.gl/)
* deckGL, bokeh are loaded directly in index.html
* pyodide
* [Folium geographical data](https://pyscript.com/@examples/folium/latest)
* uses [folium](https://python-visualization.github.io/folium/latest/), [pandas](https://pandas.pydata.org/) from pypi
* pyodide
* [Bokeh data plotting](https://pyscript.com/@examples/bokeh/latest)
* [Import antigravity](https://pyscript.com/@examples/antigravity/latest)
* uses [pandas](https://pandas.pydata.org/), [Bokeh](https://bokeh.org/), [xyzservices](https://github.com/geopandas/xyzservices) from pypi
* pyodide
* [Altair data plotting](https://pyscript.com/@examples/altair/latest)
* uses [altair](https://altair-viz.github.io/), [pandas](https://pandas.pydata.org/), [vega_datasets](https://github.com/altair-viz/vega_datasets) from pypi
* pyodide
* [Panel and hyplot](https://pyscript.com/@examples/panel-and-hvplot/latest)
* uses [Bokeh](https://bokeh.org/), [Panel](https://panel.holoviz.org/), [markdown-it-py](https://github.com/executablebooks/markdown-it-py), [numpy](https://numpy.org/), [pandas](https://pandas.pydata.org/), [hvplot](https://hvplot.holoviz.org/), [pyodide-http](https://pyodide.org/en/stable/usage/api/python-api/http.html) a fetch library.
* bokeh and panel are loaded in the index.html
* pyodide

Notes:
- Updated from 14 to 20 found at above link
- No micropython examples - all are pyodide
- No worker examples
- async used in some examples - probably obsolete now
- fetch done several ways