Legend in Graduated Circle Viz only works when both color_property and radius_property specified

[Geo-C-Data]

I want to make a GraduatedCircleViz where the circles are sized by a column in a Pandas DataFrame. I don't have a secondary feature for which I'd like to vary the color.

If I only specify radius_propery, the visualization is correct, but the Legend is not shown (works fine when a secondary color feature is specified)

[akacarlyann]

@caerus-data Can you provide example code? Using the examples in examples/notebooks/legend-controls.ipynb, I was unable to recreate your issue. I'd like to help out -- I definitely hope to expand the customization on the map legends going forward :)

Here's what I tried just now:

import pandas as pd
import os
from mapboxgl.utils import *
from mapboxgl.viz import *

# Set Mapbox Acces Token; Must be a public token, starting with `pk`
token = os.getenv('MAPBOX_ACCESS_TOKEN')

# Load data from sample csv
data_url = 'https://raw.githubusercontent.com/mapbox/mapboxgl-jupyter/master/examples/data/points.csv'
df = pd.read_csv(data_url).round(3)

# Generate radius breaks from data domain and circle-radius range
measure_radius = 'Avg Medicare Payments'
radius_breaks = [round(df[measure_radius].quantile(q=x*0.1), 2) for x in range(2,10)]
radius_stops = create_radius_stops(radius_breaks, 0.5, 10)

# Create the viz
viz2 = GraduatedCircleViz('../data/healthcare_points.geojson', 
                          access_token=token,
                          # color_property='Avg Covered Charges',
                          # color_stops=color_stops,
                          radius_property='Avg Medicare Payments',
                          radius_stops=radius_stops,
                          stroke_color='black',
                          stroke_width=0.5,
                          center=(-95, 40),
                          zoom=2.5,
                          opacity=0.75,
                          below_layer='waterway-label',
                          height='300px')
viz2.show()

This yielded a map with only the variable radius legend, which seems like what you are looking for. I'm on the master branch (after the maintainer merged in #135 earlier today). Since #135 included some changes to CSS and JS in the project, maybe if you clear your browser cache you'll have better luck?

[Geo-C-Data]

import pandas as pd
import os
from mapboxgl.utils import *
from mapboxgl.viz import *

# Set Mapbox Acces Token; Must be a public token, starting with `pk`
token = os.getenv('MAPBOX_ACCESS_TOKEN')

# Load data from sample csv
data_url = 'https://raw.githubusercontent.com/mapbox/mapboxgl-jupyter/master/examples/data/points.csv'
df = pd.read_csv(data_url).round(3)

# Generate radius breaks from data domain and circle-radius range
measure_radius = 'Avg Medicare Payments'
radius_breaks = [round(df[measure_radius].quantile(q=x*0.1), 2) for x in range(2,10)]
radius_stops = create_radius_stops(radius_breaks, 0.5, 10)

data=df_to_geojson(df
              #, filename='K22W.geojson'
              , lat='lat'
              , lon='lon'
              , precision=5)

# Create the viz
viz2 = GraduatedCircleViz(data, 
                          access_token=token,
                          # color_property='Avg Covered Charges',
                          # color_stops=color_stops,
                          radius_property='Avg Medicare Payments',
                          radius_stops=radius_stops,
                          stroke_color='black',
                          stroke_width=0.5,
                          center=(-95, 40),
                          zoom=2.5,
                          opacity=0.75,
                          below_layer='waterway-label',
                          height='300px')
viz2.show()

[Geo-C-Data]

[Geo-C-Data]

Sorry for the multiple comments - as you can see, I've duplicated the selected code with a minor change for geojson, and no legend displays.

I've deleted my browser (Chome, latest build) cache through the settings menu, but no effect.

Thanks so much for a wonderful toolbox and so much help!

[akacarlyann]

@caerus-data No problem! Thanks for sharing the snippet above. Since it looks like we are running essentially the same thing with different results, can you confirm the latest commit you have checked out? I do work on a different OS so I want to rule everything else out before tackling dev-environment differences.

[Geo-C-Data]

Sure thing! I think this is what you're asking...

import mapboxgl
mapboxgl.__version__

'0.10.1'

[Geo-C-Data]

Sorry if this wasn't clear, I'm on Windows 10.

[akacarlyann]

What method did you use for installing the package? Did you clone the repository using git? And if so, have you updated the master branch after the recent PR was merged?

I'm also starting to think this may be a bug in JavaScript. Can you access the JS console using the browser developer tools and let me know if there are any error messages there? Thanks!

[Geo-C-Data]

pip install mapboxgl

Working on JS now

[Geo-C-Data]

No Errors. I've been getting this warning within Jupyter though, which I've mentioned in other chains but not here. Sorry for not bringing it up sooner

C:\Users\MYUSERNAME\AppData\Local\Continuum\anaconda2\envs\geo36\lib\site-packages\IPython\core\display.py:689: UserWarning: Consider using IPython.display.IFrame instead
warnings.warn("Consider using IPython.display.IFrame instead")

[Geo-C-Data]

My Anaconda is 2.7, but the environment is Python 3.6. I have this same problem in a 2.7 environment though.

[akacarlyann]

How about if you try pip install git+https://github.com/mapbox/mapboxgl-jupyter.git to install the latest development version?

[Geo-C-Data]

Latest GitHub version resolved the issue! Thanks!