- 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)
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, sizing_mode='stretch_both', margin=0)
self.deck_gl.param.watch(self.update_spec, 'hover_state')
self._playing = False
self._cb = pn.state.add_periodic_callback(self._update, 1000//self.speed, start=False)
@param.depends('speed', watch=True)
def _update_speed(self):
self._cb.period = 1000//self.speed
@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]
}
@property
def arc_view(self):
data = self.data if self.view is None else self.view
if not self.deck_gl or not self.deck_gl.hover_state:
return data.iloc[:0]
lon, lat = self.deck_gl.hover_state['coordinate']
tol = 0.001
return 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))
]
def _update(self):
self.hour = (self.hour+1) % 24
self.view = self.data[self.data.hour==self.hour]
@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', watch=True)
def update_spec(self, *events):
self.deck_gl.object = dict(self.spec)
def __panel__(self):
return self.deck_gl
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')