Introducing choroplethmapbox traces by etpinard · Pull Request #3988 · plotly/plotly.js

etpinard · 2019-06-26T22:52:33Z

Based off #3987

This PR adds a new mapbox-based trace type: choroplethmapbox 🎉 🗺️ 🛰️

Example: https://codepen.io/etpinard/pen/orGQNe

In brief, choroplethmapbox traces have a very similar API as their geo-subplot cousin choropleth. Both use locations and z to set the polygon-to-color mapping. But unlike choropleth, choroplethmapbox traces (currently) must be set with a geojson attribute that contains polygon coordinates.

Note that, this PR also fixes a choropleth bug in 91e0319 - where we didn't use the correct marker.line.color default.

Things that work

geojson can be set either as URL string or { } GeoJSON object. We accept GeoJSONs of type Feature and FeatureCollection and geometries of type Polygon and MultiPolygon.
colorscale / coloraxis work just like choropleth
hover and selections reuse the choropleth logic, where the polygons' centroid is used.
GeoJSON properties fields are accessible in hovertemplate (example)

Things worthy of discussion

The below default. below (like in mapbox.layers) sets the id of the layer just below where the choroplethmapbox trace will be plotted. I tentatively chose the layer just above the last "water" layer. That is, choroplethmapbox traces are plotted below roads and labels by default.
Maybe instead of some "smart" default for below, we could plot choroplethmapbox traces above all background layers (but below scattermapbox traces) and have a default marker.opacity of e.g. 0.7?

Things that we could add

topojson support, that way users could (easily) use https://cdn.plot.ly/world_110m.json and friends
locationmode. The current behavior would correspond to locationmode: 'geojson-id'. Some users might expect to identify GeoJSON features using their properties.name (this would correspond to e.g. locationmode: 'geojson-prop-name'. Moreover, we could also support the locationmode values found in geo traces: 'ISO-3', 'USA-states', 'country names'
some zkey attribute as an alternative to the z array. For example, zkey: 'value' would read off the properties.value values in the GeoJSON set by geojson

cc @plotly/plotly_js @nicolaskruchten @chriddyp

- valid choropleth datum must have a valid location AND `z` value - set calcdata[i][j].index during calc so that choroplethmapbox can use it in its convert.js

... and update choropleth baselines that didn't show the "correct" default "black"

for geo AND mapbox base plot modules ... that way we do this only once when geo and mapbox modules are registered

- reusing choropleth calc, hover, select, eventData and feature2polygon - use `PlotlyGeoAssets` to stash fetched geojson url data - use two layers, one fill (to filled choropleth polygon), one line to draw `marker.line` styles - add mockAxis on mapbox subplot instances, used to format choroplethmapbox 'z' on hover

... similar to how we do things on geo subplots

- use _rehover wrapper similar to cartesian subplots and call it on moveend - split fx init code into prototype.initFx

- where by default chroroplethmapbox traces are placed above the top most "water" layer - N.B. we need to remove/add again layers when *below* is updated

archmoj · 2019-06-27T11:42:51Z

+ moduleType: 'trace',
+ name: 'choroplethmapbox',
+ basePlotModule: require('../../plots/mapbox'),
+ categories: ['mapbox', 'gl', 'noOpacity'],


Later on the road, it may be of interest to have traces with opacity. Right?

opacity here for choroplethmapbox traces would be equivalent to marker.opacity, so we don't need it.

What about dimming marker.lines? Trace opacity may be handy for adjusting both.

Maybe, but I'm not going to do this now for consistency with choropleth:
plotly.js/src/traces/choropleth/index.js
Line 26 in cb202a8
categories: ['geo','noOpacity'],

- move isNonBlankString in outer scope - add "" around URL in invalid-url error msg

... when marker.line.width===0

@gl

... and set for npm run test-jasmine "$s" --tags=gl --skip-tags=noCI so that suites (e.g. choroplethmapbox_test.js) where all @gl tests are also @noci do not fail.

Introducing densitymapbox traces

etpinard · 2019-07-02T13:43:27Z

Is everyone subscribed to this PR ok with the behavior?

etpinard · 2019-07-03T14:00:55Z

No news, good news I guess. Merging this PR into #3987 to have all 1.49.0 mapbox items in one place

etpinard added 14 commits June 26, 2019 16:18

improve Choropleth.calc
43c568f
- valid choropleth datum must have a valid location AND `z` value - set calcdata[i][j].index during calc so that choroplethmapbox can use it in its convert.js

add dflt to choropleth marker.line.color
91e0319
... and update choropleth baselines that didn't show the "correct" default "black"

add choroplethmapbox attributes
8fc1dbe

add PlotlyGeoAssets to window during Plotly.register
70878b7
for geo AND mapbox base plot modules ... that way we do this only once when geo and mapbox modules are registered

fetch GeoJSON URLs found in calcdata before updateData()
012a749

sort all choroplethmapbox traces below scattermapbox traces
f7f3190
... similar to how we do things on geo subplots

add GeoJSON feature 'properties' to eventData
4e88075

improve mapbox hover after drag
a166761
- use _rehover wrapper similar to cartesian subplots and call it on moveend - split fx init code into prototype.initFx

first cut choroplethmapbox tests
9a602ba

allow numbers as *locations* items when using custom *geojson*
a457722

fixup choroplethmapbox hover content post-#3968
1359307

implement *below* in choroplethmapbox traces
4d7e0aa
- where by default chroroplethmapbox traces are placed above the top most "water" layer - N.B. we need to remove/add again layers when *below* is updated

add 3️⃣ choroplethmapbox mocks
cb202a8

etpinard added bug something broken status: reviewable labels Jun 26, 2019

etpinard added this to the v1.49.0 milestone Jun 26, 2019

archmoj reviewed Jun 27, 2019
View reviewed changes

etpinard added 5 commits June 27, 2019 10:05

mojtaba-proof a few things
e509047
- move isNonBlankString in outer scope - add "" around URL in invalid-url error msg

fixup choroplethmapbox "below" test
7dd04e7

do not coerce choropleth* marker.line.color
654c08e
... when marker.line.width===0

add missing@gltag to mapbox tests
22c2a1e

add doNotFailOnEmptyTestSuite CLI option
fe6782d
... and set for npm run test-jasmine "$s" --tags=gl --skip-tags=noCI so that suites (e.g. choroplethmapbox_test.js) where all @gl tests are also @noci do not fail.

antoinerg reviewed Jun 28, 2019
View reviewed changes

Comment threadsrc/traces/choropleth/attributes.js

etpinard added 4 commits June 28, 2019 11:23

add densitymapbox attributes
7e15d81

implement densitymapbox
91a9bc4

add densitymapbox jasmine tests
4f42d1b

add 3️⃣ densitymapbox mocks
4299857

etpinard mentioned this pull request Jun 28, 2019
Introducing densitymapbox traces #3993
Merged

etpinard added 2 commits June 28, 2019 15:46

remove layers from last to first
1add90e

Merge pull request#3993from plotly/densitymapbox-pr
ca48461
Introducing densitymapbox traces

Merge branch 'mapbox-v1' into choroplethmapbox-pr
6d7929c

etpinard merged commit eb04b4c into mapbox-v1Jul 3, 2019

etpinard deleted the choroplethmapbox-pr branch July 3, 2019 14:01

etpinard mentioned this pull request Jul 3, 2019
Feature Request: Add plotly event listeners to Mapbox layers #1966
Closed

Mahdis-z mentioned this pull request Jul 31, 2019
1.49 Mapbox features plotly/documentation#1412
Closed

cpsievert mentioned this pull request Aug 29, 2019
Add new choroplethmapbox locationmode for geojson properties.id#4154
Closed

huonw mentioned this pull request Aug 5, 2020
Support Choropleth's locationmode in Choroplethmapbox #5048
Closed

Navigation Menu

Uh oh!

Uh oh!

Introducing choroplethmapbox traces - #3988

Introducing choroplethmapbox traces#3988
etpinard merged 26 commits into
mapbox-v1from
choroplethmapbox-pr

etpinard commented Jun 26, 2019•
edited
Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

archmojJun 27, 2019

Uh oh!

etpinardJun 27, 2019•
edited
Loading

Uh oh!

archmojJun 27, 2019

Uh oh!

etpinardJun 27, 2019

Uh oh!

Uh oh!

etpinard commented Jul 2, 2019•
edited
Loading

Uh oh!

etpinard commented Jul 3, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

etpinard commented Jun 26, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Things that work

Things worthy of discussion

Things that we could add

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

archmojJun 27, 2019

Choose a reason for hiding this comment

Uh oh!

etpinardJun 27, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

archmojJun 27, 2019

Choose a reason for hiding this comment

Uh oh!

etpinardJun 27, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

etpinard commented Jul 2, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etpinard commented Jul 3, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

etpinard commented Jun 26, 2019•
edited
Loading

etpinardJun 27, 2019•
edited
Loading

etpinard commented Jul 2, 2019•
edited
Loading