visgl / visgl/deck.gl

pydeck: Extend the support of JavaScript syntaxes that can be used in pydeck.Layer

Open
#4,937 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature pydeck
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

Target Use case

Extending the support of JavaScript syntaxes that can be used in pydeck.Layer's argument will help users simplify their code. Users don't need to make additional columns that are not essentially related to their analysis but are just required for visualization.

Proposed feature

Support JavaScript syntaxes such as ** and Math object among others so that they can be used in pydeck.Layer's argument. Let me explain the motivation behind this request.

Suppose we have the following pydeck visualization (based on this example in the documentation). As you can see in the keyword argument get_fill_color="entries % 2 === 1 ? [255, 140, 0] : [0, 140, 255]", strings containing a JavaScript expression can be passed. Modulo, strict equality, and ternary operators are obviously accepted.

import pydeck as pdk
import pandas as pd

SCATTERPLOT_LAYER_DATA = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json"
df = pd.read_json(SCATTERPLOT_LAYER_DATA)

# Use pandas to calculate additional data
df["exits_radius"] = df["exits"].pow(0.5)

# Define a layer to display on a map
layer = pdk.Layer(
    "ScatterplotLayer",
    df,
    radius_scale=6,
    get_position="coordinates",
    get_radius="exits_radius",
    get_fill_color="entries % 2 === 1 ? [255, 140, 0] : [0, 140, 255]",
)

# Set the viewport location
view_state = pdk.ViewState(latitude=37.7749295, longitude=-122.4194155, zoom=10, bearing=0, pitch=0)

# Render
r = pdk.Deck(layers=[layer], initial_view_state=view_state)
r.show()
スクリーンショット 2020-09-11 18 34 59

If the following change is applied in order to calculate the radius on the JavaScript end, it won't work and claims "Error displaying widget". Exponentiation operator **, which was introduced in ES2016, results in the same error as well.

@@ -4,16 +4,13 @@
 SCATTERPLOT_LAYER_DATA = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json"
 df = pd.read_json(SCATTERPLOT_LAYER_DATA)

-# Use pandas to calculate additional data
-df["exits_radius"] = df["exits"].pow(0.5)
-
 # Define a layer to display on a map
 layer = pdk.Layer(
     "ScatterplotLayer",
     df,
     radius_scale=6,
     get_position="coordinates",
-    get_radius="exits_radius",
+    get_radius="Math.sqrt(exits)",
     get_fill_color="entries % 2 === 1 ? [255, 140, 0] : [0, 140, 255]",
 )

I'd be happy to have these operator and built-in objects available in this context.

To Do List
  • Add label and assign to milestone
  • Coding
  • Doc update
  • What’s new update
  • Test

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the provided pydeck.Layer scatterplot example and compare the existing expression handling for get_radius and get_fill_color. Trace the Layer argument path that evaluates JavaScript strings, then verify that Math.sqrt(exits) and exponentiation work without an extra derived dataframe column.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, python, typescript
Domain
data-visualization
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.