8000 Add Panel DeckGL example by philippjfr · Pull Request #27 · pyscript/pyscript · GitHub
[go: up one dir, main page]
Skip to content
8000

Add Panel DeckGL example #27

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 19, 2022
Merged

Add Panel DeckGL example #27

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
239b5c1
Add Panel DeckGL example
philippjfr Apr 17, 2022
bb1c80c
Update existing panel examples
philippjfr Apr 17, 2022
05dbc2e
Improvements for deckgl demo
philippjfr Apr 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Improvements for deckgl demo
  • Loading branch information
@philippjfr
philippjfr committed Apr 17, 2022
commit 05dbc2eaf662ed1ab5b9efb0f115b42a0f156f86
82 changes: 45 additions & 37 deletions pyscriptjs/examples/panel_deckgl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pyscript/Panel DeckGL Demo</title>
<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">

<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/icons/favicon.ico" type="">
<meta name="name" content="PyScript/Panel KMeans Demo">
<title>Pyscript/Panel DeckGL Demo</title>

<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.0/dist/css/widgets.css" type="text/css" />
Expand All @@ -24,23 +26,18 @@
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.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.0/dist/bundled/bootstraptemplate/bootstrap.css">
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/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: 350px;
width: 400px;
}
</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="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script>
</head>
Expand Down Expand Up @@ -98,6 +95,8 @@

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))
Expand All @@ -111,14 +110,17 @@
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.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, 1000//self.speed, start=False)
self._cb = pn.state.add_periodic_callback(
self._update_hour, 1000//self.speed, start=False
)

@param.depends('speed', watch=True)
def _update_speed(self):
self._cb.period = 1000//self.speed
def __panel__(self):
return self.deck_gl

@property
def spec(self):
Expand Down Expand Up @@ -168,24 +170,32 @@
"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):
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:
Expand All @@ -198,12 +208,10 @@
self.param.speed.precedence = 1
self._playing = not self._playing

@param.depends('view', 'radius', 'elevation', watch=True)
def update_spec(self, *events):
@param.depends('view', 'radius', 'elevation', 'arc_view', watch=True)
def update_spec(self):
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()))
Expand Down
0