diff --git a/pyscriptjs/examples/panel.html b/pyscriptjs/examples/panel.html index 119a3fc4..e1e2e4dd 100644 --- a/pyscriptjs/examples/panel.html +++ b/pyscriptjs/examples/panel.html @@ -20,7 +20,7 @@ import asyncio import micropip -await micropip.install(['panel==0.13.0rc10']) +await micropip.install(['panel']) import panel as pn diff --git a/pyscriptjs/examples/panel_deckgl.html b/pyscriptjs/examples/panel_deckgl.html new file mode 100644 index 00000000..b70e99ae --- /dev/null +++ b/pyscriptjs/examples/panel_deckgl.html @@ -0,0 +1,226 @@ + + + + + + + + + + Pyscript/Panel DeckGL Demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - bokeh + - numpy + - pandas + + +
+ + +
+ +
+
+
+
+
+ +import asyncio +import micropip + +from io import StringIO +from js import fetch + +await micropip.install(['panel==0.13.1a1']) + +import panel as pn +import param +import pandas as pd + +from panel.io.pyodide import show + +MAPBOX_KEY = "pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ" + +class App(pn.viewable.Viewer): + + 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 + ) + + def __panel__(self): + return self.deck_gl + + @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] + else: + 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) + 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) + + +data = await fetch('https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv') +df = pd.read_csv(StringIO(await data.text())) + +app = App(data=df) +controls = pn.Param(app.param, sizing_mode='stretch_width', show_name=False) + +await show(controls, 'widgets') +await show(app, 'plot') + + + diff --git a/pyscriptjs/examples/panel_kmeans.html b/pyscriptjs/examples/panel_kmeans.html index 7fe153c4..501fdcd0 100644 --- a/pyscriptjs/examples/panel_kmeans.html +++ b/pyscriptjs/examples/panel_kmeans.html @@ -4,14 +4,14 @@ Pyscript/Panel KMeans Demo - + - - - - + + + + @@ -20,14 +20,14 @@ - + - - + +