Deck.gl

Download this notebook from GitHub (right-click to download).


Demonstrates loading deck.gl as external JSS and CSS components, rendering it as part of an app, and then linking it to Panel widgets.

import panel as pn

js_files = {'deck': 'https://cdn.jsdelivr.net/npm/deck.gl@8.1.12/dist.min.js',
            'mapboxgl': 'https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js'}
css_files = ['https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css']

pn.extension(js_files=js_files, css_files=css_files, sizing_mode="stretch_width")

First, let’s declare the cities we are interested in using Python:

cities = [
    {"city":"San Francisco","state":"California","latitude":37.7751,"longitude":-122.4193},
    {"city":"New York","state":"New York","latitude":40.6643,"longitude":-73.9385},
    {"city":"Los Angeles","state":"California","latitude":34.051597,"longitude":-118.244263},
    {"city":"London","state":"United Kingdom","latitude":51.5074,"longitude":-0.1278},
    {"city":"Hyderabad","state":"India","latitude":17.3850,"longitude":78.4867}]

Next, let’s declare an HTML <div> to render the plot into, then define the deck.gl script code to render a plot for those cities.

html = """
<div id="deckgl-container" style="height: 500px;width: 100p"></div>

<script type="text/javascript">
// Data
var CITIES = %s;
var deckgl = new deck.DeckGL({
  container: 'deckgl-container',
  mapboxApiAccessToken: 'pk.eyJ1IjoicGhpbGlwcGpmciIsImEiOiJjajM2bnE4MWcwMDNxMzNvMHMzcGV3NjlnIn0.976fZ1azCrTh50lEdZTpSg',
  initialViewState: {
      longitude: CITIES[0].longitude,
      latitude: CITIES[0].latitude,
      zoom: 10,
  },
  controller: true,
  layers: [
    new deck.ScatterplotLayer({
      data: CITIES,
      getPosition: d => [d.longitude, d.latitude],
      radiusMinPixels: 10
    })
  ],
});
</script>
""" % cities
deckgl = pn.pane.HTML(html, height=500)

Next we can declare a Panel widget and define a jslink to update the deck.gl plot whenever the widget state changes. The example is adapted from https://deck.gl/gallery/viewport-transition but replaces D3 widgets with Panel-based widgets.

widget = pn.widgets.RadioButtonGroup(options=[c["city"] for c in cities])

update_city = """
var d = CITIES[source.active];
deckgl.setProps({
    initialViewState: {
        longitude: d.longitude,
        latitude: d.latitude,
        zoom: 10,
        transitionInterpolator: new deck.FlyToInterpolator({speed: 1.5}),
        transitionDuration: 'auto'
      }
});
"""

widget.jslink(deckgl, code={'active': update_city});

component = pn.Column(widget, deckgl)
component

App

Lets wrap it into nice template that can be served via panel serve deckgl.ipynb

pn.template.FastListTemplate(site="Panel", title="Deck.gl", main=["This app **demonstrates loading deck.gl JSS and CSS components** and then linking it to Panel widgets.", component]).servable();
This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).