mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-19 10:17:23 -05:00
remove examples from core repository (#1868)
* remove examples from core repository * remove icosahedron example
This commit is contained in:
Madhur Tandon
@@ -1,90 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Altair</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
<style>
|
||||
py-script {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script
|
||||
type="module"
|
||||
src="https://esm.sh/@pyscript/core@latest/core.js"
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c">Altair</a>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div id="altair"></div>
|
||||
<py-tutor>
|
||||
<py-config>
|
||||
packages = [
|
||||
"altair",
|
||||
"pandas",
|
||||
"vega_datasets"
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
<py-script>
|
||||
from pyscript import display
|
||||
import altair as alt
|
||||
from vega_datasets import data
|
||||
|
||||
source = data.movies.url
|
||||
|
||||
pts = alt.selection(type="single", encodings=['x'])
|
||||
|
||||
rect = alt.Chart(data.movies.url).mark_rect().encode(
|
||||
alt.X('IMDB_Rating:Q', bin=True),
|
||||
alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
|
||||
alt.Color('count()',
|
||||
scale=alt.Scale(scheme='greenblue'),
|
||||
legend=alt.Legend(title='Total Records')
|
||||
)
|
||||
)
|
||||
|
||||
circ = rect.mark_point().encode(
|
||||
alt.ColorValue('grey'),
|
||||
alt.Size('count()',
|
||||
legend=alt.Legend(title='Records in Selection')
|
||||
)
|
||||
).transform_filter(
|
||||
pts
|
||||
)
|
||||
|
||||
bar = alt.Chart(source).mark_bar().encode(
|
||||
x='Major_Genre:N',
|
||||
y='count()',
|
||||
color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
|
||||
).properties(
|
||||
width=550,
|
||||
height=200
|
||||
).add_selection(pts)
|
||||
|
||||
display(alt.vconcat(
|
||||
rect + circ,
|
||||
bar
|
||||
).resolve_legend(
|
||||
color="independent",
|
||||
size="independent"
|
||||
), target="altair")
|
||||
</py-script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Antigravity</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c">Antigravity</a>
|
||||
</div>
|
||||
</nav>
|
||||
<py-tutor modules="antigravity.py">
|
||||
<section class="pyscript">
|
||||
<py-config>
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
[[fetch]]
|
||||
files = ["./antigravity.py"]
|
||||
</py-config>
|
||||
<b>Based on xkcd: antigravity https://xkcd.com/353/.</b>
|
||||
<py-script>
|
||||
import antigravity
|
||||
antigravity.fly()
|
||||
</py-script>
|
||||
</section>
|
||||
</py-tutor>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,44 +0,0 @@
|
||||
import random
|
||||
|
||||
from js import DOMParser, document, setInterval
|
||||
from pyodide.ffi import create_proxy
|
||||
from pyodide.http import open_url
|
||||
|
||||
|
||||
class Antigravity:
|
||||
url = "./antigravity.svg"
|
||||
|
||||
def __init__(self, target=None, interval=10, append=True, fly=False):
|
||||
self.target = (
|
||||
document.getElementById(target)
|
||||
if isinstance(target, str)
|
||||
else document.body
|
||||
)
|
||||
doc = DOMParser.new().parseFromString(
|
||||
open_url(self.url).read(), "image/svg+xml"
|
||||
)
|
||||
self.node = doc.documentElement
|
||||
if append:
|
||||
self.target.append(self.node)
|
||||
else:
|
||||
self.target.replaceChildren(self.node)
|
||||
self.xoffset, self.yoffset = 0, 0
|
||||
self.interval = interval
|
||||
if fly:
|
||||
self.fly()
|
||||
|
||||
def fly(self):
|
||||
setInterval(create_proxy(self.move), self.interval)
|
||||
|
||||
def move(self):
|
||||
char = self.node.getElementsByTagName("g")[1]
|
||||
char.setAttribute("transform", f"translate({self.xoffset}, {-self.yoffset})")
|
||||
self.xoffset += random.normalvariate(0, 1) / 20
|
||||
if self.yoffset < 50:
|
||||
self.yoffset += 0.1
|
||||
else:
|
||||
self.yoffset += random.normalvariate(0, 1) / 20
|
||||
|
||||
|
||||
_auto = Antigravity(append=True)
|
||||
fly = _auto.fly
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 212 KiB |
@@ -1,94 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Bokeh Example</title>
|
||||
<meta charset="iso-8859-1" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-3.0.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.0.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.0.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.0.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-3.0.3.min.js"
|
||||
></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Bokeh.set_log_level("info");
|
||||
</script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
<style>
|
||||
py-script {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script
|
||||
type="module"
|
||||
src="https://esm.sh/@pyscript/core@latest/core.js"
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c"
|
||||
>Bokeh Example</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<py-tutor>
|
||||
<section class="pyscript">
|
||||
<div id="myplot"></div>
|
||||
|
||||
<py-config>
|
||||
packages = [
|
||||
"pandas",
|
||||
"bokeh",
|
||||
"xyzservices"
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<py-script id="main">
|
||||
import json
|
||||
import pyodide
|
||||
|
||||
from js import Bokeh, console, JSON
|
||||
|
||||
from bokeh.embed import json_item
|
||||
from bokeh.plotting import figure
|
||||
from bokeh.resources import CDN
|
||||
|
||||
# create a new plot with default tools, using figure
|
||||
p = figure(width=400, height=400)
|
||||
|
||||
# add a circle renderer with x and y coordinates, size, color, and alpha
|
||||
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5)
|
||||
p_json = json.dumps(json_item(p, "myplot"))
|
||||
|
||||
Bokeh.embed.embed_item(JSON.parse(p_json))
|
||||
</py-script>
|
||||
</section>
|
||||
</py-tutor>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,136 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Bokeh Example</title>
|
||||
<meta charset="iso-8859-1" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js"
|
||||
></script>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
Bokeh.set_log_level("info");
|
||||
</script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c"
|
||||
>Bokeh Example</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<py-tutor>
|
||||
<section class="pyscript">
|
||||
<h1>Bokeh Example</h1>
|
||||
<div id="myplot"></div>
|
||||
|
||||
<py-config>
|
||||
packages = [
|
||||
"https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",
|
||||
"numpy",
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<py-script id="main">
|
||||
import asyncio
|
||||
import json
|
||||
import pyodide
|
||||
|
||||
from js import Bokeh, console, JSON
|
||||
|
||||
from bokeh import __version__
|
||||
from bokeh.document import Document
|
||||
from bokeh.embed.util import OutputDocumentFor, standalone_docs_json_and_render_items
|
||||
from bokeh.models import Slider, Div
|
||||
from bokeh.layouts import Row
|
||||
from bokeh.protocol.messages.patch_doc import process_document_events
|
||||
|
||||
# create a new plot with default tools, using figure
|
||||
p = Slider(start=0.1, end=10, value=1, step=.1, title="Amplitude")
|
||||
div = Div(text=f'Amplitude is: {p.value}')
|
||||
|
||||
def callback(attr, old, new):
|
||||
div.text = f'Amplitude is: {new}'
|
||||
|
||||
p.on_change('value', callback)
|
||||
|
||||
row = Row(children=[p, div])
|
||||
|
||||
def doc_json(model, target):
|
||||
with OutputDocumentFor([model]) as doc:
|
||||
doc.title = ""
|
||||
docs_json, _ = standalone_docs_json_and_render_items(
|
||||
[model], suppress_callback_warning=True
|
||||
)
|
||||
|
||||
doc_json = list(docs_json.values())[0]
|
||||
root_id = doc_json['roots']['root_ids'][0]
|
||||
|
||||
return doc, json.dumps(dict(
|
||||
target_id = target,
|
||||
root_id = root_id,
|
||||
doc = doc_json,
|
||||
version = __version__,
|
||||
))
|
||||
|
||||
def _link_docs(pydoc, jsdoc):
|
||||
def jssync(event):
|
||||
if getattr(event, 'setter_id', None) is not None:
|
||||
return
|
||||
events = [event]
|
||||
json_patch = jsdoc.create_json_patch_string(pyodide.ffi.to_js(events))
|
||||
pydoc.apply_json_patch(json.loads(json_patch))
|
||||
|
||||
jsdoc.on_change(pyodide.ffi.create_proxy(jssync), pyodide.ffi.to_js(False))
|
||||
|
||||
def pysync(event):
|
||||
json_patch, buffers = process_document_events([event], use_buffers=True)
|
||||
buffer_map = {}
|
||||
for (ref, buffer) in buffers:
|
||||
buffer_map[ref['id']] = buffer
|
||||
jsdoc.apply_json_patch(JSON.parse(json_patch), pyodide.ffi.to_js(buffer_map), setter_id='js')
|
||||
|
||||
pydoc.on_change(pysync)
|
||||
|
||||
async def show(plot, target):
|
||||
pydoc, model_json = doc_json(plot, target)
|
||||
views = await Bokeh.embed.embed_item(JSON.parse(model_json))
|
||||
jsdoc = views[0].model.document
|
||||
_link_docs(pydoc, jsdoc)
|
||||
|
||||
asyncio.ensure_future(show(row, 'myplot'))
|
||||
</py-script>
|
||||
</section>
|
||||
</py-tutor>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1,81 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Folium</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
<style>
|
||||
py-script {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script
|
||||
type="module"
|
||||
src="https://esm.sh/@pyscript/core@latest/core.js"
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c">Folium</a>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div id="folium"></div>
|
||||
|
||||
<py-tutor>
|
||||
<py-config>
|
||||
packages = [
|
||||
"folium",
|
||||
"pandas"
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<py-script>
|
||||
from pyscript import display
|
||||
import folium
|
||||
import json
|
||||
import pandas as pd
|
||||
|
||||
from pyodide.http import open_url
|
||||
|
||||
url = (
|
||||
"https://raw.githubusercontent.com/python-visualization/folium/master/examples/data"
|
||||
)
|
||||
state_geo = f"{url}/us-states.json"
|
||||
state_unemployment = f"{url}/US_Unemployment_Oct2012.csv"
|
||||
state_data = pd.read_csv(open_url(state_unemployment))
|
||||
geo_json = json.loads(open_url(state_geo).read())
|
||||
|
||||
m = folium.Map(location=[48, -102], zoom_start=3)
|
||||
|
||||
folium.Choropleth(
|
||||
geo_data=geo_json,
|
||||
name="choropleth",
|
||||
data=state_data,
|
||||
columns=["State", "Unemployment"],
|
||||
key_on="feature.id",
|
||||
fill_color="YlGn",
|
||||
fill_opacity=0.7,
|
||||
line_opacity=0.2,
|
||||
legend_name="Unemployment Rate (%)",
|
||||
).add_to(m)
|
||||
|
||||
folium.LayerControl().add_to(m)
|
||||
|
||||
display(m, target="folium")
|
||||
</py-script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,139 +0,0 @@
|
||||
import numpy as np
|
||||
from numpy.polynomial import Polynomial
|
||||
|
||||
|
||||
def mandelbrot(
|
||||
width: int,
|
||||
height: int,
|
||||
*,
|
||||
x: float = -0.5,
|
||||
y: float = 0,
|
||||
zoom: int = 1,
|
||||
max_iterations: int = 100
|
||||
) -> np.array:
|
||||
"""
|
||||
https://www.learnpythonwithrune.org/numpy-compute-mandelbrot-set-by-vectorization
|
||||
"""
|
||||
# To make navigation easier we calculate these values
|
||||
x_width, y_height = 1.5, 1.5 * height / width
|
||||
x_from, x_to = x - x_width / zoom, x + x_width / zoom
|
||||
y_from, y_to = y - y_height / zoom, y + y_height / zoom
|
||||
|
||||
# Here the actual algorithm starts
|
||||
x = np.linspace(x_from, x_to, width).reshape((1, width))
|
||||
y = np.linspace(y_from, y_to, height).reshape((height, 1))
|
||||
c = x + 1j * y
|
||||
|
||||
# Initialize z to all zero
|
||||
z = np.zeros(c.shape, dtype=np.complex128)
|
||||
|
||||
# To keep track in which iteration the point diverged
|
||||
div_time = np.zeros(z.shape, dtype=int)
|
||||
|
||||
# To keep track on which points did not converge so far
|
||||
m = np.full(c.shape, True, dtype=bool)
|
||||
for i in range(max_iterations):
|
||||
z[m] = z[m] ** 2 + c[m]
|
||||
diverged = np.greater(
|
||||
np.abs(z), 2, out=np.full(c.shape, False), where=m
|
||||
) # Find diverging
|
||||
div_time[diverged] = i # set the value of the diverged iteration number
|
||||
m[np.abs(z) > 2] = False # to remember which have diverged
|
||||
|
||||
return div_time
|
||||
|
||||
|
||||
def julia(
|
||||
width: int,
|
||||
height: int,
|
||||
*,
|
||||
c: complex = -0.4 + 0.6j,
|
||||
x: float = 0,
|
||||
y: float = 0,
|
||||
zoom: int = 1,
|
||||
max_iterations: int = 100
|
||||
) -> np.array:
|
||||
"""
|
||||
https://www.learnpythonwithrune.org/numpy-calculate-the-julia-set-with-vectorization
|
||||
"""
|
||||
# To make navigation easier we calculate these values
|
||||
x_width, y_height = 1.5, 1.5 * height / width
|
||||
x_from, x_to = x - x_width / zoom, x + x_width / zoom
|
||||
y_from, y_to = y - y_height / zoom, y + y_height / zoom
|
||||
|
||||
# Here the actual algorithm starts
|
||||
x = np.linspace(x_from, x_to, width).reshape((1, width))
|
||||
y = np.linspace(y_from, y_to, height).reshape((height, 1))
|
||||
z = x + 1j * y
|
||||
|
||||
# Initialize z to all zero
|
||||
c = np.full(z.shape, c)
|
||||
|
||||
# To keep track in which iteration the point diverged
|
||||
div_time = np.zeros(z.shape, dtype=int)
|
||||
|
||||
# To keep track on which points did not converge so far
|
||||
m = np.full(c.shape, True, dtype=bool)
|
||||
for i in range(max_iterations):
|
||||
z[m] = z[m] ** 2 + c[m]
|
||||
m[np.abs(z) > 2] = False
|
||||
div_time[m] = i
|
||||
|
||||
return div_time
|
||||
|
||||
|
||||
Range = tuple[float, float]
|
||||
|
||||
|
||||
def newton(
|
||||
width: int,
|
||||
height: int,
|
||||
*,
|
||||
p: Polynomial,
|
||||
a: complex,
|
||||
xr: Range = (-2.5, 1),
|
||||
yr: Range = (-1, 1),
|
||||
max_iterations: int = 100
|
||||
) -> tuple[np.array, np.array]:
|
||||
""" """
|
||||
# To make navigation easier we calculate these values
|
||||
x_from, x_to = xr
|
||||
y_from, y_to = yr
|
||||
|
||||
# Here the actual algorithm starts
|
||||
x = np.linspace(x_from, x_to, width).reshape((1, width))
|
||||
y = np.linspace(y_from, y_to, height).reshape((height, 1))
|
||||
z = x + 1j * y
|
||||
|
||||
# Compute the derivative
|
||||
dp = p.deriv()
|
||||
|
||||
# Compute roots
|
||||
roots = p.roots()
|
||||
epsilon = 1e-5
|
||||
|
||||
# Set the initial conditions
|
||||
a = np.full(z.shape, a)
|
||||
|
||||
# To keep track in which iteration the point diverged
|
||||
div_time = np.zeros(z.shape, dtype=int)
|
||||
|
||||
# To keep track on which points did not converge so far
|
||||
m = np.full(a.shape, True, dtype=bool)
|
||||
|
||||
# To keep track which root each point converged to
|
||||
r = np.full(a.shape, 0, dtype=int)
|
||||
|
||||
for i in range(max_iterations):
|
||||
z[m] = z[m] - a[m] * p(z[m]) / dp(z[m])
|
||||
|
||||
for j, root in enumerate(roots):
|
||||
converged = (np.abs(z.real - root.real) < epsilon) & (
|
||||
np.abs(z.imag - root.imag) < epsilon
|
||||
)
|
||||
m[converged] = False
|
||||
r[converged] = j + 1
|
||||
|
||||
div_time[m] = i
|
||||
|
||||
return div_time, r
|
||||
@@ -1,55 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
|
||||
<title>PyScript Hello World</title>
|
||||
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
<style>
|
||||
py-script {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script
|
||||
type="module"
|
||||
src="https://esm.sh/@pyscript/core@latest/core.js"
|
||||
></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c">Hello World</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<py-tutor>
|
||||
<py-config>
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<section class="pyscript">
|
||||
Hello world! <br />
|
||||
This is the current date and time, as computed by Python:
|
||||
<py-script>
|
||||
from pyscript import display
|
||||
from datetime import datetime
|
||||
now = datetime.now()
|
||||
display(now.strftime("%m/%d/%Y, %H:%M:%S"))
|
||||
</py-script>
|
||||
</section>
|
||||
</py-tutor>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,315 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>PyScript demo</title>
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<link rel="stylesheet" href="./assets/css/main.css" />
|
||||
<link rel="stylesheet" href="./assets/css/index.css" />
|
||||
</head>
|
||||
|
||||
<body class="container">
|
||||
<h1 class="title-main">PyScript demos</h1>
|
||||
<section class="example">
|
||||
<h2>Basic examples</h2>
|
||||
<div class="container-card">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./hello_world.html" target="_blank">
|
||||
<h2>Hello world</h2>
|
||||
</a>
|
||||
<p>
|
||||
A static demo of the
|
||||
<code><py-script></code> tag
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./simple_clock.html" target="_blank">
|
||||
<h2>Simple clock</h2>
|
||||
</a>
|
||||
<p>
|
||||
A dynamic demo of the
|
||||
<code><py-script></code> tag
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./repl.html" target="_blank">
|
||||
<h2>REPL</h2>
|
||||
</a>
|
||||
<p>A Python REPL (Read Eval Print Loop)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./repl2.html" target="_blank">
|
||||
<h2>REPL2</h2>
|
||||
</a>
|
||||
<p>
|
||||
A Python REPL (Read Eval Print Loop) with slightly
|
||||
better formatting
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./todo.html" target="_blank">
|
||||
<h2>TODO App</h2>
|
||||
</a>
|
||||
<p>Simple TODO App</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./todo-pylist.html" target="_blank">
|
||||
<h2>PyScript Native TODO App</h2>
|
||||
</a>
|
||||
<p>
|
||||
Simple TODO App using <code><py-list></code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="example">
|
||||
<h2>MIME Rendering</h2>
|
||||
<div class="container-card">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./matplotlib.html" target="_blank">
|
||||
<h2>Matplotlib</h2>
|
||||
</a>
|
||||
<p>
|
||||
Demonstrates rendering a
|
||||
<a href="https://matplotlib.org/" target="_blank"
|
||||
>Matplotlib</a
|
||||
>
|
||||
figure as output of the py-script tag
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./altair.html" target="_blank">
|
||||
<h2>Altair</h2>
|
||||
</a>
|
||||
<p>
|
||||
Demonstrates rendering a
|
||||
<a
|
||||
href="https://altair-viz.github.io/"
|
||||
target="_blank"
|
||||
>Altair</a
|
||||
>
|
||||
plot as output of the py-script tag
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./folium.html" target="_blank">
|
||||
<h2>Folium</h2>
|
||||
</a>
|
||||
<p>
|
||||
Demonstrates rendering a
|
||||
<a
|
||||
href="https://python-visualization.github.io/folium/"
|
||||
target="_blank"
|
||||
>Folium</a
|
||||
>
|
||||
map as output of the py-script tag
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="example">
|
||||
<h2>JS Interaction</h2>
|
||||
<div class="container-card">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./d3.html" target="_blank">
|
||||
<h2>Simple d3 visualization</h2>
|
||||
</a>
|
||||
<p>
|
||||
Minimal
|
||||
<a href="https://d3js.org/" target="_blank">D3</a>
|
||||
demo demonstrating how to create a visualization
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./webgl/raycaster/index.html" target="_blank">
|
||||
<h2>Webgl Icosahedron Example</h2>
|
||||
</a>
|
||||
<p>
|
||||
Demo showing how a Simple
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API"
|
||||
target="_blank"
|
||||
>WebGL</a
|
||||
>
|
||||
scene would work in the
|
||||
<code><py-script></code> tag
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="example">
|
||||
<h2>Visualizations & Dashboards</h2>
|
||||
<div class="container-card">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./bokeh.html" target="_blank">
|
||||
<h2>Simple Static Bokeh Plot</h2>
|
||||
</a>
|
||||
<p>
|
||||
Minimal Bokeh demo demonstrating how to create a
|
||||
simple
|
||||
<a href="https://bokeh.org/" target="_blank"
|
||||
>Bokeh</a
|
||||
>
|
||||
plot from code
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./bokeh_interactive.html" target="_blank">
|
||||
<h2 class="text-2xl font-bold text-blue-600">
|
||||
Bokeh Interactive
|
||||
</h2>
|
||||
</a>
|
||||
<p>
|
||||
Interactive demo using a
|
||||
<a href="https://bokeh.org/" target="_blank"
|
||||
>Bokeh</a
|
||||
>
|
||||
slider widget to dynamically change a value in the
|
||||
page WARNING: This examples takes a little longer to
|
||||
load. So be patient :)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./panel_kmeans.html" target="_blank">
|
||||
<h2 class="text-2xl font-bold text-blue-600">
|
||||
KMeans Demo in Panel
|
||||
</h2>
|
||||
</a>
|
||||
<p>
|
||||
Interactive KMeans Chart using
|
||||
<a href="https://panel.holoviz.org/" target="_blank"
|
||||
>Panel</a
|
||||
>
|
||||
WARNING: This examples takes a little longer to
|
||||
load. So be patient :)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./panel_stream.html" target="_blank">
|
||||
<h2 class="text-2xl font-bold text-blue-600">
|
||||
Streaming Demo in Panel
|
||||
</h2>
|
||||
</a>
|
||||
<p>
|
||||
Interactive Streaming Table and Bokeh plot using
|
||||
<a href="https://panel.holoviz.org/" target="_blank"
|
||||
>Panel</a
|
||||
>
|
||||
WARNING: This examples takes a little longer to
|
||||
load. So be patient :)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./panel.html" target="_blank">
|
||||
<h2 class="text-3xl font-bold text-blue-600">
|
||||
Simple Panel Demo
|
||||
</h2>
|
||||
</a>
|
||||
<p>
|
||||
Simple demo showing
|
||||
<a href="https://panel.holoviz.org/" target="_blank"
|
||||
>Panel</a
|
||||
>
|
||||
widgets interacting with parts of the page WARNING:
|
||||
This examples takes a little longer to load. So be
|
||||
patient :)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./panel_deckgl.html" target="_blank">
|
||||
<h2 class="text-2xl font-bold text-blue-600">
|
||||
NYC Taxi Data Panel DeckGL Demo
|
||||
</h2>
|
||||
</a>
|
||||
<p>
|
||||
Interactive application exploring the NYC Taxi
|
||||
dataset using
|
||||
<a href="https://panel.holoviz.org/" target="_blank"
|
||||
>Panel</a
|
||||
>
|
||||
and
|
||||
<a href="https://deck.gl/" target="_blank"
|
||||
>DeckGL</a
|
||||
>
|
||||
WARNING: This examples takes a little longer to
|
||||
load. So be patient :)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="./numpy_canvas_fractals.html" target="_blank">
|
||||
<h2 class="text-2xl font-bold text-blue-600">
|
||||
Fractals with NumPy and canvas
|
||||
</h2>
|
||||
</a>
|
||||
<p>
|
||||
Visualization of Mandelbrot and Julia sets with
|
||||
<a href="https://numpy.org/" target="_blank"
|
||||
>Numpy</a
|
||||
>
|
||||
and
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API"
|
||||
target="_blank"
|
||||
>
|
||||
HTML5 canvas
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
@@ -1,76 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Matplotlib</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<script
|
||||
type="module"
|
||||
src="https://esm.sh/@pyscript/core@latest/core.js"
|
||||
></script>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c">Matplotlib</a>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div id="mpl"></div>
|
||||
|
||||
<py-tutor>
|
||||
<py-config>
|
||||
packages = [
|
||||
"matplotlib"
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<script type="py">
|
||||
import matplotlib.pyplot as plt
|
||||
import matplotlib.tri as tri
|
||||
import numpy as np
|
||||
|
||||
# First create the x and y coordinates of the points.
|
||||
n_angles = 36
|
||||
n_radii = 8
|
||||
min_radius = 0.25
|
||||
radii = np.linspace(min_radius, 0.95, n_radii)
|
||||
|
||||
angles = np.linspace(0, 2 * np.pi, n_angles, endpoint=False)
|
||||
angles = np.repeat(angles[..., np.newaxis], n_radii, axis=1)
|
||||
angles[:, 1::2] += np.pi / n_angles
|
||||
|
||||
x = (radii * np.cos(angles)).flatten()
|
||||
y = (radii * np.sin(angles)).flatten()
|
||||
z = (np.cos(radii) * np.cos(3 * angles)).flatten()
|
||||
|
||||
# Create the Triangulation; no triangles so Delaunay triangulation created.
|
||||
triang = tri.Triangulation(x, y)
|
||||
|
||||
# Mask off unwanted triangles.
|
||||
triang.set_mask(np.hypot(x[triang.triangles].mean(axis=1),
|
||||
y[triang.triangles].mean(axis=1))
|
||||
< min_radius)
|
||||
|
||||
fig1, ax1 = plt.subplots()
|
||||
ax1.set_aspect('equal')
|
||||
tpc = ax1.tripcolor(triang, z, shading='flat')
|
||||
fig1.colorbar(tpc)
|
||||
ax1.set_title('tripcolor of Delaunay triangulation, flat shading')
|
||||
|
||||
display(fig1, target="mpl")
|
||||
</script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,411 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Visualization of Mandelbrot, Julia and Newton sets with NumPy and
|
||||
HTML5 canvas
|
||||
</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
<style>
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: black;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c"
|
||||
>Fractals with NumPy and canvas</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
width: 600px;
|
||||
"
|
||||
>
|
||||
<div id="mandelbrot">
|
||||
<div style="text-align: center">Mandelbrot set</div>
|
||||
<div>
|
||||
<div class="loading"></div>
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="julia">
|
||||
<div style="text-align: center">Julia set</div>
|
||||
<div>
|
||||
<div class="loading"></div>
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newton">
|
||||
<div style="text-align: center">Newton set</div>
|
||||
<fieldset
|
||||
style="display: flex; flex-direction: row; gap: 1em"
|
||||
>
|
||||
<div>
|
||||
<span style="white-space: pre">p(z) = </span
|
||||
><input
|
||||
id="poly"
|
||||
type="text"
|
||||
value="z**3 - 2*z + 2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span style="white-space: pre">a = </span
|
||||
><input
|
||||
id="coef"
|
||||
type="text"
|
||||
value="1"
|
||||
style="width: 40px"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<span style="white-space: pre">x = [</span>
|
||||
<input
|
||||
id="x0"
|
||||
type="text"
|
||||
value="-2.5"
|
||||
style="width: 80px; text-align: right"
|
||||
/>
|
||||
<span style="white-space: pre">, </span>
|
||||
<input
|
||||
id="x1"
|
||||
type="text"
|
||||
value="2.5"
|
||||
style="width: 80px; text-align: right"
|
||||
/>
|
||||
<span style="white-space: pre">]</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<span style="white-space: pre">y = [</span>
|
||||
<input
|
||||
id="y0"
|
||||
type="text"
|
||||
value="-5.0"
|
||||
style="width: 80px; text-align: right"
|
||||
/>
|
||||
<span style="white-space: pre">, </span>
|
||||
<input
|
||||
id="y1"
|
||||
type="text"
|
||||
value="5.0"
|
||||
style="width: 80px; text-align: right"
|
||||
/>
|
||||
<span style="white-space: pre">]</span>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex; flex-direction: row; gap: 1em"
|
||||
>
|
||||
<div style="white-space: pre">
|
||||
<input
|
||||
type="radio"
|
||||
id="conv"
|
||||
name="type"
|
||||
value="convergence"
|
||||
checked
|
||||
/>
|
||||
convergence
|
||||
</div>
|
||||
<div style="white-space: pre">
|
||||
<input
|
||||
type="radio"
|
||||
id="iter"
|
||||
name="type"
|
||||
value="iterations"
|
||||
/>
|
||||
iterations
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div>
|
||||
<div class="loading"></div>
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<py-tutor>
|
||||
<py-config type="json">
|
||||
{
|
||||
"packages": [
|
||||
"numpy",
|
||||
"sympy"
|
||||
],
|
||||
"fetch": [
|
||||
{
|
||||
"files": [
|
||||
"./palettes.py",
|
||||
"./fractals.py"
|
||||
]
|
||||
}
|
||||
],
|
||||
"plugins": [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
}
|
||||
</py-config>
|
||||
|
||||
<py-script>
|
||||
from pyodide.ffi import to_js, create_proxy
|
||||
|
||||
import numpy as np
|
||||
import sympy
|
||||
|
||||
from palettes import Magma256
|
||||
from fractals import mandelbrot, julia, newton
|
||||
|
||||
from js import (
|
||||
console,
|
||||
document,
|
||||
devicePixelRatio,
|
||||
ImageData,
|
||||
Uint8ClampedArray,
|
||||
CanvasRenderingContext2D as Context2d,
|
||||
requestAnimationFrame,
|
||||
)
|
||||
|
||||
def prepare_canvas(width: int, height: int, canvas: Element) -> Context2d:
|
||||
ctx = canvas.getContext("2d")
|
||||
|
||||
canvas.style.width = f"{width}px"
|
||||
canvas.style.height = f"{height}px"
|
||||
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
|
||||
return ctx
|
||||
|
||||
def color_map(array: np.array, palette: np.array) -> np.array:
|
||||
size, _ = palette.shape
|
||||
index = (array/array.max()*(size - 1)).round().astype("uint8")
|
||||
|
||||
width, height = array.shape
|
||||
image = np.full((width, height, 4), 0xff, dtype=np.uint8)
|
||||
image[:, :, :3] = palette[index]
|
||||
|
||||
return image
|
||||
|
||||
def draw_image(ctx: Context2d, image: np.array) -> None:
|
||||
data = Uint8ClampedArray.new(to_js(image.tobytes()))
|
||||
width, height, _ = image.shape
|
||||
image_data = ImageData.new(data, width, height)
|
||||
ctx.putImageData(image_data, 0, 0)
|
||||
|
||||
width, height = 600, 600
|
||||
|
||||
async def draw_mandelbrot() -> None:
|
||||
spinner = document.querySelector("#mandelbrot .loading")
|
||||
canvas = document.querySelector("#mandelbrot canvas")
|
||||
|
||||
spinner.style.display = ""
|
||||
canvas.style.display = "none"
|
||||
|
||||
ctx = prepare_canvas(width, height, canvas)
|
||||
|
||||
console.log("Computing Mandelbrot set ...")
|
||||
console.time("mandelbrot")
|
||||
iters = mandelbrot(width, height)
|
||||
console.timeEnd("mandelbrot")
|
||||
|
||||
image = color_map(iters, Magma256)
|
||||
draw_image(ctx, image)
|
||||
|
||||
spinner.style.display = "none"
|
||||
canvas.style.display = "block"
|
||||
|
||||
async def draw_julia() -> None:
|
||||
spinner = document.querySelector("#julia .loading")
|
||||
canvas = document.querySelector("#julia canvas")
|
||||
|
||||
spinner.style.display = ""
|
||||
canvas.style.display = "none"
|
||||
|
||||
ctx = prepare_canvas(width, height, canvas)
|
||||
|
||||
console.log("Computing Julia set ...")
|
||||
console.time("julia")
|
||||
iters = julia(width, height)
|
||||
console.timeEnd("julia")
|
||||
|
||||
image = color_map(iters, Magma256)
|
||||
draw_image(ctx, image)
|
||||
|
||||
spinner.style.display = "none"
|
||||
canvas.style.display = "block"
|
||||
|
||||
def ranges():
|
||||
x0_in = document.querySelector("#x0")
|
||||
x1_in = document.querySelector("#x1")
|
||||
y0_in = document.querySelector("#y0")
|
||||
y1_in = document.querySelector("#y1")
|
||||
|
||||
xr = (float(x0_in.value), float(x1_in.value))
|
||||
yr = (float(y0_in.value), float(y1_in.value))
|
||||
|
||||
return xr, yr
|
||||
|
||||
current_image = None
|
||||
async def draw_newton() -> None:
|
||||
spinner = document.querySelector("#newton .loading")
|
||||
canvas = document.querySelector("#newton canvas")
|
||||
|
||||
spinner.style.display = ""
|
||||
canvas.style.display = "none"
|
||||
|
||||
ctx = prepare_canvas(width, height, canvas)
|
||||
|
||||
console.log("Computing Newton set ...")
|
||||
|
||||
poly_in = document.querySelector("#poly")
|
||||
coef_in = document.querySelector("#coef")
|
||||
conv_in = document.querySelector("#conv")
|
||||
iter_in = document.querySelector("#iter")
|
||||
|
||||
xr, yr = ranges()
|
||||
|
||||
# z**3 - 1
|
||||
# z**8 + 15*z**4 - 16
|
||||
# z**3 - 2*z + 2
|
||||
|
||||
expr = sympy.parse_expr(poly_in.value)
|
||||
coeffs = [ complex(c) for c in reversed(sympy.Poly(expr, sympy.Symbol("z")).all_coeffs()) ]
|
||||
poly = np.polynomial.Polynomial(coeffs)
|
||||
|
||||
coef = complex(sympy.parse_expr(coef_in.value))
|
||||
|
||||
console.time("newton")
|
||||
iters, roots = newton(width, height, p=poly, a=coef, xr=xr, yr=yr)
|
||||
console.timeEnd("newton")
|
||||
|
||||
if conv_in.checked:
|
||||
n = poly.degree() + 1
|
||||
k = int(len(Magma256)/n)
|
||||
|
||||
colors = Magma256[::k, :][:n]
|
||||
colors[0, :] = [255, 0, 0] # red: no convergence
|
||||
|
||||
image = color_map(roots, colors)
|
||||
else:
|
||||
image = color_map(iters, Magma256)
|
||||
|
||||
global current_image
|
||||
current_image = image
|
||||
draw_image(ctx, image)
|
||||
|
||||
spinner.style.display = "none"
|
||||
canvas.style.display = "block"
|
||||
|
||||
handler = create_proxy(lambda _event: draw_newton())
|
||||
document.querySelector("#newton fieldset").addEventListener("change", handler)
|
||||
|
||||
canvas = document.querySelector("#newton canvas")
|
||||
|
||||
is_selecting = False
|
||||
init_sx, init_sy = None, None
|
||||
sx, sy = None, None
|
||||
async def mousemove(event):
|
||||
global is_selecting
|
||||
global init_sx
|
||||
global init_sy
|
||||
global sx
|
||||
global sy
|
||||
|
||||
def invert(sx, source_range, target_range):
|
||||
source_start, source_end = source_range
|
||||
target_start, target_end = target_range
|
||||
factor = (target_end - target_start)/(source_end - source_start)
|
||||
offset = -(factor * source_start) + target_start
|
||||
return (sx - offset) / factor
|
||||
|
||||
bds = canvas.getBoundingClientRect()
|
||||
event_sx, event_sy = event.clientX - bds.x, event.clientY - bds.y
|
||||
|
||||
ctx = canvas.getContext("2d")
|
||||
|
||||
pressed = event.buttons == 1
|
||||
if is_selecting:
|
||||
if not pressed:
|
||||
xr, yr = ranges()
|
||||
|
||||
x0 = invert(init_sx, xr, (0, width))
|
||||
x1 = invert(sx, xr, (0, width))
|
||||
y0 = invert(init_sy, yr, (0, height))
|
||||
y1 = invert(sy, yr, (0, height))
|
||||
|
||||
document.querySelector("#x0").value = x0
|
||||
document.querySelector("#x1").value = x1
|
||||
document.querySelector("#y0").value = y0
|
||||
document.querySelector("#y1").value = y1
|
||||
|
||||
is_selecting = False
|
||||
init_sx, init_sy = None, None
|
||||
sx, sy = init_sx, init_sy
|
||||
|
||||
await draw_newton()
|
||||
else:
|
||||
ctx.save()
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
draw_image(ctx, current_image)
|
||||
sx, sy = event_sx, event_sy
|
||||
ctx.beginPath()
|
||||
ctx.rect(init_sx, init_sy, sx - init_sx, sy - init_sy)
|
||||
ctx.fillStyle = "rgba(255, 255, 255, 0.4)"
|
||||
ctx.strokeStyle = "rgba(255, 255, 255, 1.0)"
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
else:
|
||||
if pressed:
|
||||
is_selecting = True
|
||||
init_sx, init_sy = event_sx, event_sy
|
||||
sx, sy = init_sx, init_sy
|
||||
|
||||
canvas.addEventListener("mousemove", create_proxy(mousemove))
|
||||
|
||||
import asyncio
|
||||
|
||||
async def main():
|
||||
_ = await asyncio.gather(
|
||||
draw_mandelbrot(),
|
||||
draw_julia(),
|
||||
draw_newton(),
|
||||
)
|
||||
|
||||
asyncio.ensure_future(main())
|
||||
</py-script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,263 +0,0 @@
|
||||
import numpy as np
|
||||
|
||||
Magma256 = np.array(
|
||||
[
|
||||
[0x00, 0x00, 0x03],
|
||||
[0x00, 0x00, 0x04],
|
||||
[0x00, 0x00, 0x06],
|
||||
[0x01, 0x00, 0x07],
|
||||
[0x01, 0x01, 0x09],
|
||||
[0x01, 0x01, 0x0B],
|
||||
[0x02, 0x02, 0x0D],
|
||||
[0x02, 0x02, 0x0F],
|
||||
[0x03, 0x03, 0x11],
|
||||
[0x04, 0x03, 0x13],
|
||||
[0x04, 0x04, 0x15],
|
||||
[0x05, 0x04, 0x17],
|
||||
[0x06, 0x05, 0x19],
|
||||
[0x07, 0x05, 0x1B],
|
||||
[0x08, 0x06, 0x1D],
|
||||
[0x09, 0x07, 0x1F],
|
||||
[0x0A, 0x07, 0x22],
|
||||
[0x0B, 0x08, 0x24],
|
||||
[0x0C, 0x09, 0x26],
|
||||
[0x0D, 0x0A, 0x28],
|
||||
[0x0E, 0x0A, 0x2A],
|
||||
[0x0F, 0x0B, 0x2C],
|
||||
[0x10, 0x0C, 0x2F],
|
||||
[0x11, 0x0C, 0x31],
|
||||
[0x12, 0x0D, 0x33],
|
||||
[0x14, 0x0D, 0x35],
|
||||
[0x15, 0x0E, 0x38],
|
||||
[0x16, 0x0E, 0x3A],
|
||||
[0x17, 0x0F, 0x3C],
|
||||
[0x18, 0x0F, 0x3F],
|
||||
[0x1A, 0x10, 0x41],
|
||||
[0x1B, 0x10, 0x44],
|
||||
[0x1C, 0x10, 0x46],
|
||||
[0x1E, 0x10, 0x49],
|
||||
[0x1F, 0x11, 0x4B],
|
||||
[0x20, 0x11, 0x4D],
|
||||
[0x22, 0x11, 0x50],
|
||||
[0x23, 0x11, 0x52],
|
||||
[0x25, 0x11, 0x55],
|
||||
[0x26, 0x11, 0x57],
|
||||
[0x28, 0x11, 0x59],
|
||||
[0x2A, 0x11, 0x5C],
|
||||
[0x2B, 0x11, 0x5E],
|
||||
[0x2D, 0x10, 0x60],
|
||||
[0x2F, 0x10, 0x62],
|
||||
[0x30, 0x10, 0x65],
|
||||
[0x32, 0x10, 0x67],
|
||||
[0x34, 0x10, 0x68],
|
||||
[0x35, 0x0F, 0x6A],
|
||||
[0x37, 0x0F, 0x6C],
|
||||
[0x39, 0x0F, 0x6E],
|
||||
[0x3B, 0x0F, 0x6F],
|
||||
[0x3C, 0x0F, 0x71],
|
||||
[0x3E, 0x0F, 0x72],
|
||||
[0x40, 0x0F, 0x73],
|
||||
[0x42, 0x0F, 0x74],
|
||||
[0x43, 0x0F, 0x75],
|
||||
[0x45, 0x0F, 0x76],
|
||||
[0x47, 0x0F, 0x77],
|
||||
[0x48, 0x10, 0x78],
|
||||
[0x4A, 0x10, 0x79],
|
||||
[0x4B, 0x10, 0x79],
|
||||
[0x4D, 0x11, 0x7A],
|
||||
[0x4F, 0x11, 0x7B],
|
||||
[0x50, 0x12, 0x7B],
|
||||
[0x52, 0x12, 0x7C],
|
||||
[0x53, 0x13, 0x7C],
|
||||
[0x55, 0x13, 0x7D],
|
||||
[0x57, 0x14, 0x7D],
|
||||
[0x58, 0x15, 0x7E],
|
||||
[0x5A, 0x15, 0x7E],
|
||||
[0x5B, 0x16, 0x7E],
|
||||
[0x5D, 0x17, 0x7E],
|
||||
[0x5E, 0x17, 0x7F],
|
||||
[0x60, 0x18, 0x7F],
|
||||
[0x61, 0x18, 0x7F],
|
||||
[0x63, 0x19, 0x7F],
|
||||
[0x65, 0x1A, 0x80],
|
||||
[0x66, 0x1A, 0x80],
|
||||
[0x68, 0x1B, 0x80],
|
||||
[0x69, 0x1C, 0x80],
|
||||
[0x6B, 0x1C, 0x80],
|
||||
[0x6C, 0x1D, 0x80],
|
||||
[0x6E, 0x1E, 0x81],
|
||||
[0x6F, 0x1E, 0x81],
|
||||
[0x71, 0x1F, 0x81],
|
||||
[0x73, 0x1F, 0x81],
|
||||
[0x74, 0x20, 0x81],
|
||||
[0x76, 0x21, 0x81],
|
||||
[0x77, 0x21, 0x81],
|
||||
[0x79, 0x22, 0x81],
|
||||
[0x7A, 0x22, 0x81],
|
||||
[0x7C, 0x23, 0x81],
|
||||
[0x7E, 0x24, 0x81],
|
||||
[0x7F, 0x24, 0x81],
|
||||
[0x81, 0x25, 0x81],
|
||||
[0x82, 0x25, 0x81],
|
||||
[0x84, 0x26, 0x81],
|
||||
[0x85, 0x26, 0x81],
|
||||
[0x87, 0x27, 0x81],
|
||||
[0x89, 0x28, 0x81],
|
||||
[0x8A, 0x28, 0x81],
|
||||
[0x8C, 0x29, 0x80],
|
||||
[0x8D, 0x29, 0x80],
|
||||
[0x8F, 0x2A, 0x80],
|
||||
[0x91, 0x2A, 0x80],
|
||||
[0x92, 0x2B, 0x80],
|
||||
[0x94, 0x2B, 0x80],
|
||||
[0x95, 0x2C, 0x80],
|
||||
[0x97, 0x2C, 0x7F],
|
||||
[0x99, 0x2D, 0x7F],
|
||||
[0x9A, 0x2D, 0x7F],
|
||||
[0x9C, 0x2E, 0x7F],
|
||||
[0x9E, 0x2E, 0x7E],
|
||||
[0x9F, 0x2F, 0x7E],
|
||||
[0xA1, 0x2F, 0x7E],
|
||||
[0xA3, 0x30, 0x7E],
|
||||
[0xA4, 0x30, 0x7D],
|
||||
[0xA6, 0x31, 0x7D],
|
||||
[0xA7, 0x31, 0x7D],
|
||||
[0xA9, 0x32, 0x7C],
|
||||
[0xAB, 0x33, 0x7C],
|
||||
[0xAC, 0x33, 0x7B],
|
||||
[0xAE, 0x34, 0x7B],
|
||||
[0xB0, 0x34, 0x7B],
|
||||
[0xB1, 0x35, 0x7A],
|
||||
[0xB3, 0x35, 0x7A],
|
||||
[0xB5, 0x36, 0x79],
|
||||
[0xB6, 0x36, 0x79],
|
||||
[0xB8, 0x37, 0x78],
|
||||
[0xB9, 0x37, 0x78],
|
||||
[0xBB, 0x38, 0x77],
|
||||
[0xBD, 0x39, 0x77],
|
||||
[0xBE, 0x39, 0x76],
|
||||
[0xC0, 0x3A, 0x75],
|
||||
[0xC2, 0x3A, 0x75],
|
||||
[0xC3, 0x3B, 0x74],
|
||||
[0xC5, 0x3C, 0x74],
|
||||
[0xC6, 0x3C, 0x73],
|
||||
[0xC8, 0x3D, 0x72],
|
||||
[0xCA, 0x3E, 0x72],
|
||||
[0xCB, 0x3E, 0x71],
|
||||
[0xCD, 0x3F, 0x70],
|
||||
[0xCE, 0x40, 0x70],
|
||||
[0xD0, 0x41, 0x6F],
|
||||
[0xD1, 0x42, 0x6E],
|
||||
[0xD3, 0x42, 0x6D],
|
||||
[0xD4, 0x43, 0x6D],
|
||||
[0xD6, 0x44, 0x6C],
|
||||
[0xD7, 0x45, 0x6B],
|
||||
[0xD9, 0x46, 0x6A],
|
||||
[0xDA, 0x47, 0x69],
|
||||
[0xDC, 0x48, 0x69],
|
||||
[0xDD, 0x49, 0x68],
|
||||
[0xDE, 0x4A, 0x67],
|
||||
[0xE0, 0x4B, 0x66],
|
||||
[0xE1, 0x4C, 0x66],
|
||||
[0xE2, 0x4D, 0x65],
|
||||
[0xE4, 0x4E, 0x64],
|
||||
[0xE5, 0x50, 0x63],
|
||||
[0xE6, 0x51, 0x62],
|
||||
[0xE7, 0x52, 0x62],
|
||||
[0xE8, 0x54, 0x61],
|
||||
[0xEA, 0x55, 0x60],
|
||||
[0xEB, 0x56, 0x60],
|
||||
[0xEC, 0x58, 0x5F],
|
||||
[0xED, 0x59, 0x5F],
|
||||
[0xEE, 0x5B, 0x5E],
|
||||
[0xEE, 0x5D, 0x5D],
|
||||
[0xEF, 0x5E, 0x5D],
|
||||
[0xF0, 0x60, 0x5D],
|
||||
[0xF1, 0x61, 0x5C],
|
||||
[0xF2, 0x63, 0x5C],
|
||||
[0xF3, 0x65, 0x5C],
|
||||
[0xF3, 0x67, 0x5B],
|
||||
[0xF4, 0x68, 0x5B],
|
||||
[0xF5, 0x6A, 0x5B],
|
||||
[0xF5, 0x6C, 0x5B],
|
||||
[0xF6, 0x6E, 0x5B],
|
||||
[0xF6, 0x70, 0x5B],
|
||||
[0xF7, 0x71, 0x5B],
|
||||
[0xF7, 0x73, 0x5C],
|
||||
[0xF8, 0x75, 0x5C],
|
||||
[0xF8, 0x77, 0x5C],
|
||||
[0xF9, 0x79, 0x5C],
|
||||
[0xF9, 0x7B, 0x5D],
|
||||
[0xF9, 0x7D, 0x5D],
|
||||
[0xFA, 0x7F, 0x5E],
|
||||
[0xFA, 0x80, 0x5E],
|
||||
[0xFA, 0x82, 0x5F],
|
||||
[0xFB, 0x84, 0x60],
|
||||
[0xFB, 0x86, 0x60],
|
||||
[0xFB, 0x88, 0x61],
|
||||
[0xFB, 0x8A, 0x62],
|
||||
[0xFC, 0x8C, 0x63],
|
||||
[0xFC, 0x8E, 0x63],
|
||||
[0xFC, 0x90, 0x64],
|
||||
[0xFC, 0x92, 0x65],
|
||||
[0xFC, 0x93, 0x66],
|
||||
[0xFD, 0x95, 0x67],
|
||||
[0xFD, 0x97, 0x68],
|
||||
[0xFD, 0x99, 0x69],
|
||||
[0xFD, 0x9B, 0x6A],
|
||||
[0xFD, 0x9D, 0x6B],
|
||||
[0xFD, 0x9F, 0x6C],
|
||||
[0xFD, 0xA1, 0x6E],
|
||||
[0xFD, 0xA2, 0x6F],
|
||||
[0xFD, 0xA4, 0x70],
|
||||
[0xFE, 0xA6, 0x71],
|
||||
[0xFE, 0xA8, 0x73],
|
||||
[0xFE, 0xAA, 0x74],
|
||||
[0xFE, 0xAC, 0x75],
|
||||
[0xFE, 0xAE, 0x76],
|
||||
[0xFE, 0xAF, 0x78],
|
||||
[0xFE, 0xB1, 0x79],
|
||||
[0xFE, 0xB3, 0x7B],
|
||||
[0xFE, 0xB5, 0x7C],
|
||||
[0xFE, 0xB7, 0x7D],
|
||||
[0xFE, 0xB9, 0x7F],
|
||||
[0xFE, 0xBB, 0x80],
|
||||
[0xFE, 0xBC, 0x82],
|
||||
[0xFE, 0xBE, 0x83],
|
||||
[0xFE, 0xC0, 0x85],
|
||||
[0xFE, 0xC2, 0x86],
|
||||
[0xFE, 0xC4, 0x88],
|
||||
[0xFE, 0xC6, 0x89],
|
||||
[0xFE, 0xC7, 0x8B],
|
||||
[0xFE, 0xC9, 0x8D],
|
||||
[0xFE, 0xCB, 0x8E],
|
||||
[0xFD, 0xCD, 0x90],
|
||||
[0xFD, 0xCF, 0x92],
|
||||
[0xFD, 0xD1, 0x93],
|
||||
[0xFD, 0xD2, 0x95],
|
||||
[0xFD, 0xD4, 0x97],
|
||||
[0xFD, 0xD6, 0x98],
|
||||
[0xFD, 0xD8, 0x9A],
|
||||
[0xFD, 0xDA, 0x9C],
|
||||
[0xFD, 0xDC, 0x9D],
|
||||
[0xFD, 0xDD, 0x9F],
|
||||
[0xFD, 0xDF, 0xA1],
|
||||
[0xFD, 0xE1, 0xA3],
|
||||
[0xFC, 0xE3, 0xA5],
|
||||
[0xFC, 0xE5, 0xA6],
|
||||
[0xFC, 0xE6, 0xA8],
|
||||
[0xFC, 0xE8, 0xAA],
|
||||
[0xFC, 0xEA, 0xAC],
|
||||
[0xFC, 0xEC, 0xAE],
|
||||
[0xFC, 0xEE, 0xB0],
|
||||
[0xFC, 0xF0, 0xB1],
|
||||
[0xFC, 0xF1, 0xB3],
|
||||
[0xFC, 0xF3, 0xB5],
|
||||
[0xFC, 0xF5, 0xB7],
|
||||
[0xFB, 0xF7, 0xB9],
|
||||
[0xFB, 0xF9, 0xBB],
|
||||
[0xFB, 0xFA, 0xBD],
|
||||
[0xFB, 0xFC, 0xBF],
|
||||
],
|
||||
dtype="uint8",
|
||||
)
|
||||
@@ -1,132 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title id="header-title"></title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" type="image/png" href="./favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a
|
||||
class="title"
|
||||
id="page-title"
|
||||
href=""
|
||||
style="color: #f0ab3c"
|
||||
></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<br />
|
||||
<div id="page-message"></div>
|
||||
|
||||
<div id="pandas-source">
|
||||
<h3>Data Source</h3>
|
||||
<input type="text" id="txt-url" class="py-input" size="70" />
|
||||
<button
|
||||
type="submit"
|
||||
id="btn-load"
|
||||
class="py-button"
|
||||
py-click="loadFromURL()"
|
||||
>
|
||||
Load CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="pandas-repl" hidden>
|
||||
<h3>Python REPL</h3>
|
||||
<py-repl id="pandas-repl-inner" output="pandas-output-inner">
|
||||
# Hit SHIFT + ENTER to execute example code # Get all closed
|
||||
airports in Great Britain df2 = df.query("type == 'closed' &
|
||||
iso_country == 'GB'") df2
|
||||
</py-repl>
|
||||
</div>
|
||||
|
||||
<div id="pandas-output" hidden>
|
||||
<h3>Output</h3>
|
||||
<div id="pandas-output-inner"></div>
|
||||
</div>
|
||||
|
||||
<div id="pandas-dev-console" hidden>
|
||||
<h3>Dev Console</h3>
|
||||
<py-terminal auto></py-terminal>
|
||||
</div>
|
||||
|
||||
<py-tutor>
|
||||
<py-config>
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
packages = ["pandas"]
|
||||
</py-config>
|
||||
|
||||
<section class="pyscript">
|
||||
<py-script>
|
||||
import pandas as pd
|
||||
from pyodide.http import open_url
|
||||
import sys
|
||||
|
||||
title = "Pandas (and basic DOM manipulation)"
|
||||
page_message = "This example loads a remote CSV file into a Pandas dataframe, displays it and lets you manipulate it through a Python REPL"
|
||||
|
||||
url = "https://raw.githubusercontent.com/datasets/airport-codes/master/data/airport-codes.csv"
|
||||
|
||||
Element("header-title").element.innerText = title
|
||||
Element("page-title").element.innerText = title
|
||||
Element("page-message").element.innerText = page_message
|
||||
|
||||
Element("txt-url").element.value = url
|
||||
|
||||
# Depending on the type of DOM element, there are several alternative methods to write to it
|
||||
# Element("id-of-dom-element").write("example")
|
||||
# Element("id-of-dom-element").innerText = "example"
|
||||
# Element("id-of-dom-element").value = "example"
|
||||
# Element("id-of-dom-element").element.innerText = "example"
|
||||
# Element("id-of-dom-element").element.value = "example"
|
||||
# js.document.getElementById("id-of-dom-element").innerText = "example"
|
||||
# js.document.getElementById("id-of-dom-element").value = "example"
|
||||
|
||||
df = pd.DataFrame()
|
||||
|
||||
|
||||
def loadFromURL(*args, **kws):
|
||||
global df
|
||||
|
||||
# clear dataframe & output
|
||||
df = pd.DataFrame()
|
||||
Element("pandas-output-inner").element.innerHTML = ""
|
||||
|
||||
url = Element("txt-url").element.value
|
||||
log ("Trying to fetch CSV from " + url)
|
||||
|
||||
df = pd.read_csv(open_url(url))
|
||||
|
||||
Element("pandas-repl").element.style.display = "block"
|
||||
Element("pandas-output").element.style.display = "block"
|
||||
Element("pandas-dev-console").element.style.display = "block"
|
||||
|
||||
display (df, target="pandas-output-inner", append="False")
|
||||
|
||||
def log(message):
|
||||
# log to pyscript dev console
|
||||
print (message)
|
||||
|
||||
# log to JS console
|
||||
js.console.log (message)
|
||||
</py-script>
|
||||
</section>
|
||||
</py-tutor>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Panel Example</title>
|
||||
<meta charset="iso-8859-1" />
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c"
|
||||
>Panel Example</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div id="simple_app"></div>
|
||||
|
||||
<py-tutor>
|
||||
<script defer src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"></script>
|
||||
<script defer src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>
|
||||
<script defer src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.14.1/dist/panel.min.js"></script>
|
||||
<style>py-script{display:none}</style>
|
||||
<script type="module" src="https://esm.sh/@pyscript/core@latest/core.js"></script>
|
||||
<py-config>
|
||||
packages = [
|
||||
"https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",
|
||||
"numpy",
|
||||
"panel==0.14.1"
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<py-script>
|
||||
import panel as pn
|
||||
|
||||
slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
|
||||
|
||||
def callback(new):
|
||||
return f'Amplitude is: {new}'
|
||||
|
||||
pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app');
|
||||
</py-script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,284 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="theme-color" content="#0072b5" />
|
||||
<meta name="name" content="PyScript/Panel DeckGL Demo" />
|
||||
|
||||
<title>PyScript/Panel DeckGL Demo</title>
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css"
|
||||
type="text/css"
|
||||
/>
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/h3-js@3.7.2/dist/h3-js.umd.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/deck.gl@8.6.7/dist.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/@deck.gl/json@8.6.7/dist.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/@loaders.gl/csv@3.1.7/dist/dist.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/@loaders.gl/json@3.1.7/dist/dist.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/@loaders.gl/3d-tiles@3.1.7/dist/dist.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.js"
|
||||
></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/bootstraptemplate/bootstrap.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/defaulttheme/default.css"
|
||||
/>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<style>
|
||||
#sidebar {
|
||||
width: 400px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c"
|
||||
>Panel DeckGL NYC Taxi Demo</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div class="d-flex flex-nowrap" id="content">
|
||||
<div class="sidenav" id="sidebar">
|
||||
<ul class="nav flex-column">
|
||||
<div class="bk-root" id="widgets"></div>
|
||||
<py-repl id="my-repl" auto-generate="true"> </py-repl>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col mh-100" style="padding: 0">
|
||||
<div class="bk-root" id="plot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<py-tutor>
|
||||
<py-config>
|
||||
packages = [
|
||||
"https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",
|
||||
"numpy",
|
||||
"pandas",
|
||||
"panel==0.13.1"
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<py-script>
|
||||
import panel as pn
|
||||
import pandas as pd
|
||||
import param
|
||||
|
||||
from pyodide.http import open_url
|
||||
|
||||
MAPBOX_KEY = "pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ"
|
||||
|
||||
class App(param.Parameterized):
|
||||
|
||||
data = param.DataFrame(precedence=-1)
|
||||
|
||||
view = param.DataFrame(precedence=-1)
|
||||
|
||||
arc_view = param.DataFrame(precedence=-1)
|
||||
|
||||
radius = param.Integer(default=50, bounds=(20, 1000))
|
||||
|
||||
elevation = param.Integer(default=10, bounds=(0, 50))
|
||||
|
||||
hour = param.Integer(default=0, bounds=(0, 23))
|
||||
|
||||
speed = param.Integer(default=1, bounds=(0, 10), precedence=-1)
|
||||
|
||||
play = param.Event(label='▷')
|
||||
|
||||
def __init__(self, **params):
|
||||
self.deck_gl = None
|
||||
super().__init__(**params)
|
||||
self.deck_gl = pn.pane.DeckGL(
|
||||
dict(self.spec),
|
||||
mapbox_api_key=MAPBOX_KEY,
|
||||
throttle={'click': 10},
|
||||
sizing_mode='stretch_both',
|
||||
margin=0
|
||||
)
|
||||
self.deck_gl.param.watch(self._update_arc_view, 'click_state')
|
||||
self._playing = False
|
||||
self._cb = pn.state.add_periodic_callback(
|
||||
self._update_hour, 1000//self.speed, start=False
|
||||
)
|
||||
|
||||
@property
|
||||
def spec(self):
|
||||
return {
|
||||
"initialViewState": {
|
||||
"bearing": 0,
|
||||
"latitude": 40.7,
|
||||
"longitude": -73.9,
|
||||
"maxZoom": 15,
|
||||
"minZoom": 5,
|
||||
"pitch": 40.5,
|
||||
"zoom": 11
|
||||
},
|
||||
"layers": [self.hex_layer, self.arc_layer],
|
||||
"mapStyle": "mapbox://styles/mapbox/dark-v9",
|
||||
"views": [
|
||||
{"@@type": "MapView", "controller": True}
|
||||
]
|
||||
}
|
||||
|
||||
@property
|
||||
def hex_layer(self):
|
||||
return {
|
||||
"@@type": "HexagonLayer",
|
||||
"autoHighlight": True,
|
||||
"coverage": 1,
|
||||
"data": self.data if self.view is None else self.view,
|
||||
"elevationRange": [0, 100],
|
||||
"elevationScale": self.elevation,
|
||||
"radius": self.radius,
|
||||
"extruded": True,
|
||||
"getPosition": "@@=[pickup_x, pickup_y]",
|
||||
"id": "8a553b25-ef3a-489c-bbe2-e102d18a3211"
|
||||
}
|
||||
|
||||
@property
|
||||
def arc_layer(self):
|
||||
return {
|
||||
"@@type": "ArcLayer",
|
||||
"id": 'arc-layer',
|
||||
"data": self.arc_view,
|
||||
"pickable": True,
|
||||
"getWidth": 1,
|
||||
"getSourcePosition": "@@=[pickup_x, pickup_y]",
|
||||
"getTargetPosition": "@@=[dropoff_x, dropoff_y]",
|
||||
"getSourceColor": [0, 255, 0, 180],
|
||||
"getTargetColor": [240, 100, 0, 180]
|
||||
}
|
||||
|
||||
def _update_hour(self):
|
||||
self.hour = (self.hour+1) % 24
|
||||
|
||||
@param.depends('view', watch=True)
|
||||
def _update_arc_view(self, event=None):
|
||||
data = self.data if self.view is None else self.view
|
||||
if not self.deck_gl or not self.deck_gl.click_state:
|
||||
self.arc_view = data.iloc[:0]
|
||||
return
|
||||
lon, lat = self.deck_gl.click_state['coordinate']
|
||||
tol = 0.001
|
||||
self.arc_view = data[
|
||||
(df.pickup_x>=float(lon-tol)) &
|
||||
(df.pickup_x<=float(lon+tol)) &
|
||||
(df.pickup_y>=float(lat-tol)) &
|
||||
(df.pickup_y<=float(lat+tol))
|
||||
]
|
||||
|
||||
@param.depends('hour', watch=True, on_init=True)
|
||||
def _update_hourly_view(self):
|
||||
self.view = self.data[self.data.hour==self.hour]
|
||||
|
||||
@param.depends('speed', watch=True)
|
||||
def _update_speed(self):
|
||||
self._cb.period = 1000//self.speed
|
||||
|
||||
@param.depends('play', watch=True)
|
||||
def _play_pause(self):
|
||||
if self._playing:
|
||||
self._cb.stop()
|
||||
self.param.play.label = '▷'
|
||||
self.param.speed.precedence = -1
|
||||
else:
|
||||
self._cb.start()
|
||||
self.param.play.label = '❚❚'
|
||||
self.param.speed.precedence = 1
|
||||
self._playing = not self._playing
|
||||
|
||||
@param.depends('view', 'radius', 'elevation', 'arc_view', watch=True)
|
||||
def update_spec(self):
|
||||
self.deck_gl.object = dict(self.spec)
|
||||
|
||||
url = 'https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv'
|
||||
df = pd.read_csv(open_url(url))
|
||||
app = App(data=df)
|
||||
controls = pn.Param(app.param, sizing_mode='stretch_width', show_name=False)
|
||||
|
||||
app.deck_gl.servable(target='plot')
|
||||
controls.servable(target='widgets');
|
||||
</py-script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,230 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="name" content="PyScript/Panel KMeans Demo" />
|
||||
|
||||
<title>Pyscript/Panel KMeans Demo</title>
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.png" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css"
|
||||
type="text/css"
|
||||
/>
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/vega@5"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/vega-lite@5"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/vega-embed@6"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.min.js"
|
||||
></script>
|
||||
<script type="text/javascript">
|
||||
Bokeh.set_log_level("info");
|
||||
</script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/bootstraptemplate/bootstrap.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/defaulttheme/default.css"
|
||||
/>
|
||||
|
||||
<style>
|
||||
#sidebar {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c"
|
||||
>Panel KMeans Clustering Demo</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div class="row overflow-hidden" id="content">
|
||||
<div class="sidenav" id="sidebar">
|
||||
<ul class="nav flex-column">
|
||||
<div class="bk-root" id="x-widget"></div>
|
||||
<div class="bk-root" id="y-widget"></div>
|
||||
<div class="bk-root" id="n-widget"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col mh-100 float-left" id="main">
|
||||
<div class="bk-root" id="intro"></div>
|
||||
<div class="bk-root" id="cluster-plot"></div>
|
||||
<div class="bk-root" id="table"></div>
|
||||
</div>
|
||||
</div>
|
||||
<py-tutor>
|
||||
<py-config>
|
||||
packages = [
|
||||
"https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",
|
||||
"altair",
|
||||
"numpy",
|
||||
"pandas",
|
||||
"scikit-learn",
|
||||
"panel==0.13.1"
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<py-script>
|
||||
import altair as alt
|
||||
import panel as pn
|
||||
import pandas as pd
|
||||
import param
|
||||
|
||||
from sklearn.cluster import KMeans
|
||||
from pyodide.http import open_url
|
||||
|
||||
pn.config.sizing_mode = 'stretch_width'
|
||||
|
||||
url = 'https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-07-28/penguins.csv'
|
||||
penguins = pd.read_csv(open_url(url)).dropna()
|
||||
cols = list(penguins.columns)[2:6]
|
||||
|
||||
x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm').servable(target='x-widget')
|
||||
y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm').servable(target='y-widget')
|
||||
n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3).servable(target='n-widget')
|
||||
|
||||
brush = alt.selection_interval(name='brush') # selection of type "interval"
|
||||
|
||||
def get_clusters(n_clusters):
|
||||
kmeans = KMeans(n_clusters=n_clusters)
|
||||
est = kmeans.fit(penguins[cols].values)
|
||||
df = penguins.copy()
|
||||
df['labels'] = est.labels_.astype('str')
|
||||
return df
|
||||
|
||||
def get_chart(x, y, df):
|
||||
centers = df.groupby('labels').mean()
|
||||
return (
|
||||
alt.Chart(df)
|
||||
.mark_point(size=100)
|
||||
.encode(
|
||||
x=alt.X(x, scale=alt.Scale(zero=False)),
|
||||
y=alt.Y(y, scale=alt.Scale(zero=False)),
|
||||
shape='labels',
|
||||
color='species'
|
||||
).add_params(brush).properties(width=800) +
|
||||
alt.Chart(centers)
|
||||
.mark_point(size=250, shape='cross', color='black')
|
||||
.encode(x=x+':Q', y=y+':Q')
|
||||
)
|
||||
|
||||
intro = pn.pane.Markdown("""
|
||||
This app provides an example of **building a simple dashboard using
|
||||
Panel**.\n\nIt demonstrates how to take the output of **k-means
|
||||
clustering on the Penguins dataset** using scikit-learn,
|
||||
parameterizing the number of clusters and the variables to
|
||||
plot.\n\nThe plot and the table are linked, i.e. selecting on the plot
|
||||
will filter the data in the table.\n\n The **`x` marks the center** of
|
||||
the cluster.
|
||||
""").servable(target='intro')
|
||||
|
||||
chart = pn.pane.Vega().servable(target='cluster-plot')
|
||||
table = pn.widgets.Tabulator(pagination='remote', page_size=10).servable(target='table')
|
||||
|
||||
def update_table(event=None):
|
||||
table.value = get_clusters(n_clusters.value)
|
||||
|
||||
n_clusters.param.watch(update_table, 'value')
|
||||
|
||||
@pn.depends(x, y, n_clusters, watch=True)
|
||||
def update_chart(*events):
|
||||
chart.object = get_chart(x.value, y.value, table.value)
|
||||
|
||||
@param.depends('brush', watch=True)
|
||||
def update_filters(event=None):
|
||||
filters = []
|
||||
for k, v in (getattr(event, 'new') or {}).items():
|
||||
filters.append(dict(field=k, type='>=', value=v[0]))
|
||||
filters.append(dict(field=k, type='<=', value=v[1]))
|
||||
table.filters = filters
|
||||
|
||||
update_table()
|
||||
update_chart()
|
||||
</py-script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#sidebarCollapse").on("click", function () {
|
||||
$("#sidebar").toggleClass("active");
|
||||
$(this).toggleClass("active");
|
||||
var interval = setInterval(function () {
|
||||
window.dispatchEvent(new Event("resize"));
|
||||
}, 10);
|
||||
setTimeout(function () {
|
||||
clearInterval(interval);
|
||||
}, 210);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,162 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="name" content="PyScript/Panel Streaming Demo" />
|
||||
|
||||
<title>PyScript/Panel Streaming Demo</title>
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/widgets.css"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/css/markdown.css"
|
||||
type="text/css"
|
||||
/>
|
||||
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://unpkg.com/@holoviz/panel@0.13.1/dist/panel.min.js"
|
||||
></script>
|
||||
<script type="text/javascript">
|
||||
Bokeh.set_log_level("info");
|
||||
</script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/bootstraptemplate/bootstrap.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@holoviz/panel@0.13.1/dist/bundled/defaulttheme/default.css"
|
||||
/>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c"
|
||||
>Panel Streaming Demo</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div class="row overflow-hidden" id="content">
|
||||
<div class="col mh-100 float-left" id="main">
|
||||
<div class="bk-root" id="controls"></div>
|
||||
<div class="row">
|
||||
<div class="bk-root" id="table"></div>
|
||||
<div class="bk-root" id="plot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<py-tutor>
|
||||
<py-config>
|
||||
packages = [
|
||||
"https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",
|
||||
"numpy",
|
||||
"pandas",
|
||||
"panel==0.13.1"
|
||||
]
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
</py-config>
|
||||
|
||||
<py-script>
|
||||
import panel as pn
|
||||
import numpy as np
|
||||
import pandas as pd
|
||||
|
||||
from bokeh.models import ColumnDataSource
|
||||
from bokeh.plotting import figure
|
||||
|
||||
df = pd.DataFrame(np.random.randn(10, 4), columns=list('ABCD')).cumsum()
|
||||
|
||||
rollover = pn.widgets.IntInput(name='Rollover', value=15)
|
||||
follow = pn.widgets.Checkbox(name='Follow', value=True, align='end')
|
||||
|
||||
tabulator = pn.widgets.Tabulator(df, height=450, width=400).servable(target='table')
|
||||
|
||||
def color_negative_red(val):
|
||||
"""
|
||||
Takes a scalar and returns a string with
|
||||
the css property `'color: red'` for negative
|
||||
strings, black otherwise.
|
||||
"""
|
||||
color = 'red' if val < 0 else 'green'
|
||||
return 'color: %s' % color
|
||||
|
||||
tabulator.style.applymap(color_negative_red)
|
||||
|
||||
p = figure(height=450, width=600)
|
||||
|
||||
cds = ColumnDataSource(data=ColumnDataSource.from_df(df))
|
||||
|
||||
p.line('index', 'A', source=cds, line_color='red')
|
||||
p.line('index', 'B', source=cds, line_color='green')
|
||||
p.line('index', 'C', source=cds, line_color='blue')
|
||||
p.line('index', 'D', source=cds, line_color='purple')
|
||||
|
||||
def stream():
|
||||
data = df.iloc[-1] + np.random.randn(4)
|
||||
tabulator.stream(data, rollover=rollover.value, follow=follow.value)
|
||||
value = {k: [v] for k, v in tabulator.value.iloc[-1].to_dict().items()}
|
||||
value['index'] = [tabulator.value.index[-1]]
|
||||
cds.stream(value)
|
||||
|
||||
cb = pn.state.add_periodic_callback(stream, 200)
|
||||
|
||||
pn.pane.Bokeh(p).servable(target='plot')
|
||||
pn.Row(cb.param.period, rollover, follow, width=400).servable(target='controls')
|
||||
</py-script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,78 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
|
||||
<title>Simple Clock Demo</title>
|
||||
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="./assets/css/examples.css" />
|
||||
<style>
|
||||
py-script {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script
|
||||
type="module"
|
||||
src="https://esm.sh/@pyscript/core@latest/core.js"
|
||||
></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar" style="background-color: #000000">
|
||||
<div class="app-header">
|
||||
<a href="/">
|
||||
<img src="./logo.png" class="logo" />
|
||||
</a>
|
||||
<a class="title" href="" style="color: #f0ab3c">Simple Clock</a>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="pyscript">
|
||||
<div class="font-mono">
|
||||
start time: <label id="output1"></label>
|
||||
</div>
|
||||
<div id="output2" class="font-mono"></div>
|
||||
<div id="output3" class="font-mono"></div>
|
||||
|
||||
<py-tutor modules="utils.py">
|
||||
<py-config>
|
||||
plugins = [
|
||||
"https://pyscript.net/latest/plugins/python/py_tutor.py"
|
||||
]
|
||||
[[fetch]]
|
||||
files = ["./utils.py"]
|
||||
</py-config>
|
||||
<script type="py">
|
||||
import utils
|
||||
from pyscript import display
|
||||
display(utils.now(), target="output1")
|
||||
</script>
|
||||
|
||||
<py-script>
|
||||
from pyscript import display
|
||||
from utils import now
|
||||
import asyncio
|
||||
|
||||
async def foo():
|
||||
while True:
|
||||
await asyncio.sleep(1)
|
||||
output = now()
|
||||
display(output, target="output2")
|
||||
|
||||
if output[-1] in ["0", "4", "8"]:
|
||||
display("It's espresso time!", target="output3")
|
||||
else:
|
||||
display("", target="output3")
|
||||
|
||||
foo()
|
||||
</py-script>
|
||||
</py-tutor>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,202 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Raycaster</title>
|
||||
<link rel="icon" type="image/png" href="../favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid fixed-top header disable-selection">
|
||||
<div class="row">
|
||||
<div class="col"></div>
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.147.0/three.min.js"></script>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://pyscript.net/latest/pyscript.css"
|
||||
/>
|
||||
<style>
|
||||
py-script {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script
|
||||
type="module"
|
||||
src="https://esm.sh/@pyscript/core@latest/core.js"
|
||||
></script>
|
||||
<py-script>
|
||||
from pyodide.ffi import create_proxy, to_js
|
||||
from pyscript import window, document
|
||||
from js import Math
|
||||
from js import THREE
|
||||
from js import performance
|
||||
from js import Object
|
||||
import asyncio
|
||||
|
||||
mouse = THREE.Vector2.new();
|
||||
|
||||
renderer = THREE.WebGLRenderer.new({"antialias":True})
|
||||
renderer.setSize(1000, 1000)
|
||||
renderer.shadowMap.enabled = False
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap
|
||||
renderer.shadowMap.needsUpdate = True
|
||||
|
||||
document.body.appendChild( renderer.domElement )
|
||||
|
||||
import js, pyodide
|
||||
def onMouseMove(event):
|
||||
event.preventDefault();
|
||||
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||
js.document.addEventListener('mousemove', pyodide.ffi.create_proxy(onMouseMove))
|
||||
|
||||
camera = THREE.PerspectiveCamera.new( 35, window.innerWidth / window.innerHeight, 1, 500 )
|
||||
scene = THREE.Scene.new()
|
||||
cameraRange = 3
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight
|
||||
camera.updateProjectionMatrix()
|
||||
renderer.setSize( window.innerWidth, window.innerHeight )
|
||||
|
||||
setcolor = "#000000"
|
||||
|
||||
scene.background = THREE.Color.new(setcolor)
|
||||
scene.fog = THREE.Fog.new(setcolor, 2.5, 3.5);
|
||||
|
||||
sceneGroup = THREE.Object3D.new();
|
||||
particularGroup = THREE.Object3D.new();
|
||||
|
||||
def mathRandom(num = 1):
|
||||
setNumber = - Math.random() * num + Math.random() * num
|
||||
return setNumber
|
||||
|
||||
particularGroup = THREE.Object3D.new();
|
||||
modularGroup = THREE.Object3D.new();
|
||||
|
||||
perms = {"flatShading":True, "color":"#111111", "transparent":False, "opacity":1, "wireframe":False}
|
||||
perms = Object.fromEntries(to_js(perms))
|
||||
|
||||
particle_perms = {"color":"#FFFFFF", "side":THREE.DoubleSide}
|
||||
particle_perms = Object.fromEntries(to_js(particle_perms))
|
||||
|
||||
def create_cubes(mathRandom, modularGroup):
|
||||
i = 0
|
||||
while i < 30:
|
||||
geometry = THREE.IcosahedronGeometry.new();
|
||||
material = THREE.MeshStandardMaterial.new(perms);
|
||||
cube = THREE.Mesh.new(geometry, material);
|
||||
cube.speedRotation = Math.random() * 0.1;
|
||||
cube.positionX = mathRandom();
|
||||
cube.positionY = mathRandom();
|
||||
cube.positionZ = mathRandom();
|
||||
cube.castShadow = True;
|
||||
cube.receiveShadow = True;
|
||||
newScaleValue = mathRandom(0.3);
|
||||
cube.scale.set(newScaleValue,newScaleValue,newScaleValue);
|
||||
cube.rotation.x = mathRandom(180 * Math.PI / 180);
|
||||
cube.rotation.y = mathRandom(180 * Math.PI / 180);
|
||||
cube.rotation.z = mathRandom(180 * Math.PI / 180);
|
||||
cube.position.set(cube.positionX, cube.positionY, cube.positionZ);
|
||||
modularGroup.add(cube);
|
||||
i += 1
|
||||
|
||||
create_cubes(mathRandom, modularGroup)
|
||||
|
||||
|
||||
def generateParticle(mathRandom, particularGroup, num, amp = 2):
|
||||
gmaterial = THREE.MeshPhysicalMaterial.new(particle_perms);
|
||||
gparticular = THREE.CircleGeometry.new(0.2,5);
|
||||
i = 0
|
||||
while i < num:
|
||||
pscale = 0.001+Math.abs(mathRandom(0.03));
|
||||
particular = THREE.Mesh.new(gparticular, gmaterial);
|
||||
particular.position.set(mathRandom(amp),mathRandom(amp),mathRandom(amp));
|
||||
particular.rotation.set(mathRandom(),mathRandom(),mathRandom());
|
||||
particular.scale.set(pscale,pscale,pscale);
|
||||
particular.speedValue = mathRandom(1);
|
||||
particularGroup.add(particular);
|
||||
i += 1
|
||||
|
||||
generateParticle(mathRandom, particularGroup, 200, 2)
|
||||
|
||||
sceneGroup.add(particularGroup);
|
||||
scene.add(modularGroup);
|
||||
scene.add(sceneGroup);
|
||||
|
||||
camera.position.set(0, 0, cameraRange);
|
||||
cameraValue = False;
|
||||
|
||||
ambientLight = THREE.AmbientLight.new(0xFFFFFF, 0.1);
|
||||
|
||||
light = THREE.SpotLight.new(0xFFFFFF, 3);
|
||||
light.position.set(5, 5, 2);
|
||||
light.castShadow = True;
|
||||
light.shadow.mapSize.width = 10000;
|
||||
light.shadow.mapSize.height = light.shadow.mapSize.width;
|
||||
light.penumbra = 0.5;
|
||||
|
||||
lightBack = THREE.PointLight.new(0x0FFFFF, 1);
|
||||
lightBack.position.set(0, -3, -1);
|
||||
|
||||
scene.add(sceneGroup);
|
||||
scene.add(light);
|
||||
scene.add(lightBack);
|
||||
|
||||
rectSize = 2
|
||||
intensity = 14
|
||||
rectLight = THREE.RectAreaLight.new( 0x0FFFFF, intensity, rectSize, rectSize )
|
||||
rectLight.position.set( 0, 0, 1 )
|
||||
rectLight.lookAt( 0, 0, 0 )
|
||||
scene.add( rectLight )
|
||||
|
||||
raycaster = THREE.Raycaster.new();
|
||||
uSpeed = 0.1
|
||||
|
||||
time = 0.0003;
|
||||
camera.lookAt(scene.position)
|
||||
|
||||
async def main():
|
||||
while True:
|
||||
time = performance.now() * 0.0003;
|
||||
i = 0
|
||||
while i < particularGroup.children.length:
|
||||
newObject = particularGroup.children[i];
|
||||
newObject.rotation.x += newObject.speedValue/10;
|
||||
newObject.rotation.y += newObject.speedValue/10;
|
||||
newObject.rotation.z += newObject.speedValue/10;
|
||||
i += 1
|
||||
|
||||
i = 0
|
||||
while i < modularGroup.children.length:
|
||||
newCubes = modularGroup.children[i];
|
||||
newCubes.rotation.x += 0.008;
|
||||
newCubes.rotation.y += 0.005;
|
||||
newCubes.rotation.z += 0.003;
|
||||
|
||||
newCubes.position.x = Math.sin(time * newCubes.positionZ) * newCubes.positionY;
|
||||
newCubes.position.y = Math.cos(time * newCubes.positionX) * newCubes.positionZ;
|
||||
newCubes.position.z = Math.sin(time * newCubes.positionY) * newCubes.positionX;
|
||||
i += 1
|
||||
|
||||
particularGroup.rotation.y += 0.005;
|
||||
|
||||
modularGroup.rotation.y -= ((mouse.x * 4) + modularGroup.rotation.y) * uSpeed;
|
||||
modularGroup.rotation.x -= ((-mouse.y * 4) + modularGroup.rotation.x) * uSpeed;
|
||||
|
||||
renderer.render( scene, camera )
|
||||
await asyncio.sleep(0.02)
|
||||
|
||||
asyncio.ensure_future(main())
|
||||
</py-script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,55 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
cursor: crosshair;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.header {
|
||||
/*top:45%;*/
|
||||
top: 45%;
|
||||
color: #dddddd;
|
||||
}
|
||||
.footer {
|
||||
bottom: 3%;
|
||||
}
|
||||
.description {
|
||||
color: gray;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.btn {
|
||||
border-radius: 30px;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
}
|
||||
.disable-selection {
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer */
|
||||
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
|
||||
-webkit-user-select: none; /* Chrome, Safari, and Opera */
|
||||
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
|
||||
}
|
||||
h1::after {
|
||||
content: " V 2.0";
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
padding-left: 5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
h2::after {
|
||||
content: "2";
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
Reference in New Issue
Block a user