Improvements to the polygon spatial viz #6178

betodealmeida · 2018-10-24T17:55:49Z

Many improvements to the polygon spatial viz, ported from the (private) ZIP code viz:

Legend for the heatmap

When a metric is selected, we can optionally show a legend mapping values to colors. This uses the same <Legend> component used for showing/toggling categories:

Bucketing data into groups

By default the legend shows 10 buckets, and the colors are linearly interpolated. It's possible to specify a different number of buckets, eg:

It's also possible to explicitly define the break points:

Anything outside the break points is masked out with opacity 0.

Map elevation to a secondary metric

It's now possible to represent elevation using a secondary metric, and users can also specify a multiplier for the elevation:

Play slider

The polygon spatial viz now can be animated using the play slider. Note that the CSS is broken in master — I'll fix that in a separate PR.

Toggling polygons

It's now possible to toggle polygons when sending events, when the "Multiple filtering" control is enabled. This allows the user to select multiple polygons and filter another chart accordingly:

(It also works when "extrude" is false and the viz has no elevation.)

…TOOLS-1244

mistercrunch · 2018-10-24T18:21:17Z

superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx

+const DOUBLE_CLICK_TRESHOLD = 250;  // milliseconds
+
+function getElevation(d, colorScaler) {
+  /* in deck.gl, if a polygon has opacity zero it will make everything behind


NIT: this looks like a deck.gl bug to me, we may want to comment more precisely: in deck.gl version x.x.x (used in Superset as of 2018-10-12), ...

mistercrunch · 2018-10-24T18:27:01Z

superset/viz.py

@@ -2319,15 +2319,19 @@ class DeckPathViz(BaseDeckGLViz):
    viz_type = 'deck_path'
    verbose_name = _('Deck.gl - Paths')
    deck_viz_key = 'path'
+    is_timeseries = True


I think you'll want the control override time_grain_sqla: timeGrainSqlaAnimationOverrides in visTypes.jsx

Thanks, will add!

mistercrunch · 2018-10-24T18:39:30Z

superset/viz.py

@@ -2347,8 +2351,14 @@ def get_properties(self, d):
        d[self.deck_viz_key] = path
        if line_type != 'geohash':
            del d[line_column]
+        d['metric'] = d.get(self.metric_label)


Does that do anything? I thought the query_obj only took metrics as an arg (?)

It's leftover, will remove.

mistercrunch

A few minor comments, otherwise looks great!

…TOOLS-1244

kristw · 2018-10-24T21:21:39Z

superset/assets/src/visualizations/deckgl/utils.js

+  return fd.break_points.sort((a, b) => parseFloat(a) - parseFloat(b));
+}
+
+export function hexToRGB(hex, alpha = 255) {


There is already a hexToRGB function in colors.js.
Why create a new copy here?

I think it got duplicated because of refactoring. Will remove this one.

It seems like only deck.gl components are using hexToRGB so you can consider moving it here too. I may try to refactor and deprecate colors.js in the near term.

kristw · 2018-10-24T21:22:55Z

superset/assets/src/visualizations/deckgl/utils.js

+  let scaler;
+  let maskPoint;
+  if (breakPoints !== null) {
+    // bucket colors into discrete colors


There is d3.scale.quantize()

I looked at it and it didn't work in this case because we want to quantize into buckets of different widths (eg, 0-10 and 10-100).

kristw · 2018-10-24T21:25:35Z

superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx

+import Legend from '../../../Legend';
+import { getBuckets, getBreakPointColorScaler } from '../../utils';
+
+import * as common from '../common';


better import specific functions import { fn } than import * to fully benefit from tree-shaking.

Definitely, will fix.

kristw · 2018-10-24T21:28:31Z

superset/assets/src/visualizations/deckgl/utils.js

+import getSequentialSchemeRegistry from '../../modules/colors/SequentialSchemeRegistrySingleton';
+import { colorScalerFactory } from '../../modules/colors';
+
+export function getBreakPoints(fd, features) {


I would strongly recommend listing out the fields you need for this function than the ambiguous fd. This will make it clearer what are needed for this function to work.

export function getBreakPoints({ break_points, metric, num_buckets, }, features) { }

Cool, will do that. Thanks!

kristw · 2018-10-24T21:28:51Z

superset/assets/src/visualizations/deckgl/utils.js

+  return [r, g, b, alpha];
+}
+
+export function getBreakPointColorScaler(fd, features) {


Same issue with fd as above.

codecov-io · 2018-10-24T22:21:51Z

Codecov Report

Merging #6178 into master will increase coverage by 0.01%.
The diff coverage is 84%.

@@            Coverage Diff             @@
##           master    #6178      +/-   ##
==========================================
+ Coverage   76.91%   76.93%   +0.01%     
==========================================
  Files          47       47              
  Lines        9362     9386      +24     
==========================================
+ Hits         7201     7221      +20     
- Misses       2161     2165       +4

Impacted Files	Coverage Δ
superset/viz.py	`80.98% <84%> (-0.03%)`	⬇️
superset/connectors/sqla/models.py	`80.94% <0%> (+0.18%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6ec9e1a...4776a8e. Read the comment docs.

mistercrunch · 2018-10-25T00:21:41Z

LGTM!

* WIP * WIP * WIP * WIP * Fix color bucketing * Fixed colors * Fix no num categories selected * Colors working * Fix no metric selected * Visual cues for selection * Add unit tests * Remove jest from deps * Rename category to bucket * Small fixes * Fix lint * Fix unit tests * Remove duplicate hexToRGB * Fix import * Change order of arguments in getBuckets * Refactor function signature (cherry picked from commit f1089c4)

* WIP * WIP * WIP * WIP * Fix color bucketing * Fixed colors * Fix no num categories selected * Colors working * Fix no metric selected * Visual cues for selection * Add unit tests * Remove jest from deps * Rename category to bucket * Small fixes * Fix lint * Fix unit tests * Remove duplicate hexToRGB * Fix import * Change order of arguments in getBuckets * Refactor function signature (cherry picked from commit f1089c4) (cherry picked from commit 699813f)

* WIP * WIP * WIP * WIP * Fix color bucketing * Fixed colors * Fix no num categories selected * Colors working * Fix no metric selected * Visual cues for selection * Add unit tests * Remove jest from deps * Rename category to bucket * Small fixes * Fix lint * Fix unit tests * Remove duplicate hexToRGB * Fix import * Change order of arguments in getBuckets * Refactor function signature

betodealmeida added 16 commits October 10, 2018 16:40

WIP

41d70c7

WIP

28daaf9

Merge branch 'master' of github.com:apache/incubator-superset into DP…

8a18dd0

…TOOLS-1244

WIP

5a5cf2d

WIP

643f00b

Fix color bucketing

72435fd

Fixed colors

a3c5734

Fix no num categories selected

0dbe494

Colors working

d6a5220

Fix no metric selected

d67e4d2

Visual cues for selection

17e0574

Add unit tests

6b19bbc

Remove jest from deps

39761e3

Fix merge conflict

d2042a7

Rename category to bucket

1f84ae3

Merge

ac7254b

mistercrunch reviewed Oct 24, 2018

View reviewed changes

mistercrunch requested changes Oct 24, 2018

View reviewed changes

betodealmeida added 3 commits October 24, 2018 13:16

Small fixes

bb817ea

Merge branch 'master' of github.com:apache/incubator-superset into DP…

fa70d9b

…TOOLS-1244

Fix lint

b869f84

kristw reviewed Oct 24, 2018

View reviewed changes

betodealmeida added 5 commits October 24, 2018 14:34

Fix unit tests

240d5a8

Remove duplicate hexToRGB

a2694d7

Fix import

516c159

Change order of arguments in getBuckets

065bdc3

Refactor function signature

4776a8e

mistercrunch approved these changes Oct 25, 2018

View reviewed changes

betodealmeida merged commit f1089c4 into apache:master Oct 25, 2018

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.34.0 labels Feb 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improvements to the polygon spatial viz #6178

Improvements to the polygon spatial viz #6178

betodealmeida commented Oct 24, 2018

mistercrunch Oct 24, 2018

betodealmeida Oct 24, 2018

mistercrunch Oct 24, 2018

betodealmeida Oct 24, 2018

mistercrunch Oct 24, 2018

betodealmeida Oct 24, 2018

mistercrunch left a comment

kristw Oct 24, 2018

betodealmeida Oct 24, 2018

kristw Oct 24, 2018

kristw Oct 24, 2018

betodealmeida Oct 24, 2018

kristw Oct 24, 2018

kristw Oct 24, 2018

betodealmeida Oct 24, 2018

kristw Oct 24, 2018

betodealmeida Oct 24, 2018

kristw Oct 24, 2018

betodealmeida Oct 24, 2018

codecov-io commented Oct 24, 2018

mistercrunch commented Oct 25, 2018

Improvements to the polygon spatial viz #6178

Improvements to the polygon spatial viz #6178

Conversation

betodealmeida commented Oct 24, 2018

Legend for the heatmap

Bucketing data into groups

Map elevation to a secondary metric

Play slider

Toggling polygons

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mistercrunch left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-io commented Oct 24, 2018

Codecov Report

mistercrunch commented Oct 25, 2018