Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit05dbc2e

Browse files
committed
Improvements for deckgl demo
1 parentbb1c80c commit05dbc2e

File tree

1 file changed

+45
-37
lines changed

1 file changed

+45
-37
lines changed

‎pyscriptjs/examples/panel_deckgl.html

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
<htmllang="en">
33
<head>
44
<metacharset="utf-8">
5-
<title>Pyscript/Panel DeckGL Demo</title>
5+
<metaname="apple-mobile-web-app-capable"content="yes">
6+
<metaname="apple-mobile-web-app-status-bar-style"content="default">
7+
<metaname="theme-color"content="#0072b5">
8+
<metaname="name"content="Pyscript/Panel DeckGL Demo">
69

7-
<linkrel="icon"href="https://unpkg.com/@holoviz/panel@0.13.0/dist/icons/favicon.ico"type="">
8-
<metaname="name"content="PyScript/Panel KMeans Demo">
10+
<title>Pyscript/Panel DeckGL Demo</title>
911

1012
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"type="text/css"/>
1113
<linkrel="stylesheet"href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css"type="text/css"/>
@@ -24,23 +26,18 @@
2426
<scripttype="text/javascript"src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
2527
<scripttype="text/javascript"src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
2628
<scripttype="text/javascript"src="https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.js"></script>
27-
<scripttype="text/javascript">
28-
Bokeh.set_log_level("info");
29-
</script>
30-
29+
3130
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
3231
<linkrel="stylesheet"href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css">
3332
<linkrel="stylesheet"href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css">
3433

34+
<scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
35+
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
3536
<style>
3637
#sidebar {
37-
width:350px;
38+
width:400px;
3839
}
3940
</style>
40-
41-
<scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
42-
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
43-
4441
<linkrel="stylesheet"href="../build/pyscript.css"/>
4542
<scriptdefersrc="../build/pyscript.js"></script>
4643
</head>
@@ -98,6 +95,8 @@
9895

9996
view = param.DataFrame(precedence=-1)
10097

98+
arc_view = param.DataFrame(precedence=-1)
99+
101100
radius = param.Integer(default=50, bounds=(20, 1000))
102101

103102
elevation = param.Integer(default=10, bounds=(0, 50))
@@ -111,14 +110,17 @@
111110
def __init__(self, **params):
112111
self.deck_gl = None
113112
super().__init__(**params)
114-
self.deck_gl = pn.pane.DeckGL(dict(self.spec), mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_both', margin=0)
115-
self.deck_gl.param.watch(self.update_spec, 'hover_state')
113+
self.deck_gl = pn.pane.DeckGL(
114+
dict(self.spec), mapbox_api_key=MAPBOX_KEY, throttle={'click': 10},
115+
sizing_mode='stretch_both', margin=0)
116+
self.deck_gl.param.watch(self._update_arc_view, 'click_state')
116117
self._playing = False
117-
self._cb = pn.state.add_periodic_callback(self._update, 1000//self.speed, start=False)
118+
self._cb = pn.state.add_periodic_callback(
119+
self._update_hour, 1000//self.speed, start=False
120+
)
118121

119-
@param.depends('speed', watch=True)
120-
def _update_speed(self):
121-
self._cb.period = 1000//self.speed
122+
def __panel__(self):
123+
return self.deck_gl
122124

123125
@property
124126
def spec(self):
@@ -168,24 +170,32 @@
168170
"getTargetColor": [240, 100, 0, 180]
169171
}
170172

171-
@property
172-
def arc_view(self):
173-
data = self.data if self.view is None else self.view
174-
if not self.deck_gl or not self.deck_gl.hover_state:
175-
return data.iloc[:0]
176-
lon, lat = self.deck_gl.hover_state['coordinate']
177-
tol = 0.001
178-
return data[
179-
(df.pickup_x>=float(lon-tol)) &
180-
(df.pickup_x<=float(lon+tol)) &
181-
(df.pickup_y>=float(lat-tol)) &
182-
(df.pickup_y<=float(lat+tol))
183-
]
184-
185-
def _update(self):
173+
def _update_hour(self):
186174
self.hour = (self.hour+1) % 24
175+
176+
@param.depends('view', watch=True)
177+
def _update_arc_view(self, event=None):
178+
data = self.data if self.view is None else self.view
179+
if not self.deck_gl or not self.deck_gl.click_state:
180+
self.arc_view = data.iloc[:0]
181+
else:
182+
lon, lat = self.deck_gl.click_state['coordinate']
183+
tol = 0.001
184+
self.arc_view = data[
185+
(df.pickup_x>=float(lon-tol)) &
186+
(df.pickup_x<=float(lon+tol)) &
187+
(df.pickup_y>=float(lat-tol)) &
188+
(df.pickup_y<=float(lat+tol))
189+
]
190+
191+
@param.depends('hour', watch=True)
192+
def _update_hourly_view(self):
187193
self.view = self.data[self.data.hour==self.hour]
188194

195+
@param.depends('speed', watch=True)
196+
def _update_speed(self):
197+
self._cb.period = 1000//self.speed
198+
189199
@param.depends('play', watch=True)
190200
def _play_pause(self):
191201
if self._playing:
@@ -198,12 +208,10 @@
198208
self.param.speed.precedence = 1
199209
self._playing = not self._playing
200210

201-
@param.depends('view', 'radius', 'elevation', watch=True)
202-
def update_spec(self, *events):
211+
@param.depends('view', 'radius', 'elevation','arc_view',watch=True)
212+
def update_spec(self):
203213
self.deck_gl.object = dict(self.spec)
204214

205-
def __panel__(self):
206-
return self.deck_gl
207215

208216
data = await fetch('https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv')
209217
df = pd.read_csv(StringIO(await data.text()))

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp