Mapbox Jupyter doesn't render ChoroplethViz

[samirak93]

I've the following data and I'm trying to plot the Choropleth Viz using Mapbox Jupyter:

data= {"type": "FeatureCollection", "features": [{"id": "0", "type": "Feature", "properties": {"ID": 1, "GRIDCODE": "2"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.19626705829167, 41.99373103107739], [-124.201058326111, 41.9934289837606], [-124.20146339159642, 41.99700317753936], [-124.1990676349445, 41.99715424480156], [-124.1988651589845, 41.99536713917695], [-124.19646944995517, 41.99551814746546], [-124.19626705829167, 41.99373103107739]]]}}, {"id": "1", "type": "Feature", "properties": {"ID": 2, "GRIDCODE": "2"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.15334355886935, 41.99822782049714], [-124.15094750259264, 41.99837788692177], [-124.15074636440538, 41.99659059233919], [-124.15054524444224, 41.99480329641264], [-124.15294116874556, 41.99465324869], [-124.15334355886935, 41.99822782049714]]]}}, {"id": "2", "type": "Feature", "properties": {"ID": 3, "GRIDCODE": "2"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.13377326465698, 41.99585224227081], [-124.13856534983393, 41.995552791357824], [-124.13876613984962, 41.99734013399236], [-124.13397392268034, 41.99763960356722], [-124.13377326465698, 41.99585224227081]]]}}, {"id": "3", "type": "Feature", "properties": {"ID": 4, "GRIDCODE": "4"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.13137719480609, 41.996001893351924], [-124.13377326465698, 41.99585224227081], [-124.13397392268034, 41.99763960356722], [-124.13157778683046, 41.99778926397471], [-124.13137719480609, 41.996001893351924]]]}}, {"id": "4", "type": "Feature", "properties": {"ID": 5, "GRIDCODE": "5"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.12898110678809, 41.996151494848036], [-124.13137719480609, 41.996001893351924], [-124.13157778683046, 41.99778926397471], [-124.12918163281154, 41.99793887479414], [-124.12898110678809, 41.996151494848036]]]}}, {"id": "5", "type": "Feature", "properties": {"ID": 6, "GRIDCODE": "2"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.131176620957, 41.99421452138939], [-124.13357262481475, 41.99406487963413], [-124.13377326465698, 41.99585224227081], [-124.13137719480609, 41.996001893351924], [-124.131176620957, 41.99421452138939]]]}}, {"id": "6", "type": "Feature", "properties": {"ID": 7, "GRIDCODE": "3"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.12878059893404, 41.994364113562696], [-124.131176620957, 41.99421452138939], [-124.13137719480609, 41.996001893351924], [-124.12898110678809, 41.996151494848036], [-124.12878059893404, 41.994364113562696]]]}}, {"id": "7", "type": "Feature", "properties": {"ID": 8, "GRIDCODE": "4"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.12878059893404, 41.994364113562696], [-124.12898110678809, 41.996151494848036], [-124.12418887627409, 41.99645054908096], [-124.12398850041586, 41.99466314915913], [-124.12878059893404, 41.994364113562696]]]}}, {"id": "8", "type": "Feature", "properties": {"ID": 9, "GRIDCODE": "3"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.12618413505629, 41.992726264209224], [-124.12858010924755, 41.992576730938204], [-124.12878059893404, 41.994364113562696], [-124.12398850041586, 41.99466314915913], [-124.12418887627409, 41.99645054908096], [-124.12179273378982, 41.99660000181562], [-124.12159242393231, 41.99481259258014], [-124.11919632930696, 41.9949619864149], [-124.1189961035962, 41.99317456653169], [-124.12618413505629, 41.992726264209224]]]}}, {"id": "9", "type": "Feature", "properties": {"ID": 10, "GRIDCODE": "2"}, "geometry": {"type": "Polygon", "coordinates": [[[-124.02254750546336, 41.99374589981529], [-124.024944056708, 41.993598527051816], [-124.02514165333511, 41.99538631160286], [-124.02274503603581, 41.99553369355296], [-124.02254750546336, 41.99374589981529]]]}}]}

from mapboxgl.viz import *
from mapboxgl.utils import *

token = 'public token'

viz = ChoroplethViz(data, 
                    access_token=token)
viz.show()

The output comes out empty as below.

When I try the same data using http://geojson.io

I get the following output.

Am I missing something when plotting in Mapbox?

Any help would be appreciated. Thank you.

[akacarlyann]

Hi there, @samirak93. I'm happy to take a look. Have you tried registering your own public token on Mapbox's website? It should start with the prefix pk. After that, the first thing I would try would be to save your data input as a .geojson file and reference that from your ChoroplethViz initialization.

You may also want to try

viz = ChoroplethViz(data, 
                    access_token='pk........',
                    color_property='GRIDCODE',
                    color_stops=[['2', 'gray'], ['3', 'red']],
                    color_function_type='match')
viz.show()

I'm at work now but will take a closer look tonight :)

[samirak93]

Hi @akacarlyann , Yes I'd inserted the public token and tried basic plots, which all seem to work without any issue.

I'd try to save the data as a GeoJSON and try the plot again. Thank you :)

[samirak93]

Hey @akacarlyann , converting the data to a geojson file worked out. Thank you. Would it be possible to save the map in a html file? Thank you.

Edit: Managed to save the output as html. Couple more question. Apologies for using Github to raise queries. I searched for any gitter chat channel for Mapbox jupyter, but couldn't find one. If there is a chat channel, I'd be happy to raise questions there.

How can I edit contents on tooltip ? Is it possible to edit Legend title?

Thank you.

[akacarlyann]

@samirak93 No worries! As far as I know, there aren't any chat channels, though seems like it could be useful!

So far the legend titles are automatically populated from the color_property, radius_property, or height_property, depending on the type of visualization. It seems like a useful thing to be able to add custom text though -- do you mind opening a ticket for that?

If you are just looking for a quick fix to change a title in the HTML, you can open the html file exported with something like

with open('map.html', 'w') as f:
    f.write(viz.create_html())

with a text editor. You should see something like this:

In the editor, change the text inside the HTML tag to something else and reopen in your browser.

<div class="legend-title">YOUR LEGEND TITLE</div>

Can you describe more about what you want to see in the tooltips? Right now they are also automatically populated from the properties included in the GeoJSON. We don't have a ton of features relating to tooltips yet, so your ideas are welcome!

[samirak93]

Hi,

I'll raise a separate ticket for legend titles. As far as the tooltip goes, it'd be great if we could maybe rename the names on tooltip and remove unwanted properties showing up. For instance, we could probably rename "GRIDCODE" to something more meaningful. Renaming GRIDCODE in source data would solve this issue, but doing it in Mapbox would be even more simpler. Also something like making "ID" not show up would also be helpful.

In general case: renaming texts (and maybe formatting text) on tooltip, stopping all map related properties to show up on tooltip would also be helpful.

Thanks.

[akacarlyann]

Ah, this sounds similar to the question raised in #116. Some sort of exclusion filter for the tooltip seems to be in demand.

Perhaps we can add some some utilities for handling source data that would include altering the titles of different properties. I think that will be a higher level of effort for vector layers than for dictionaries, DataFrames or GeoJSON files. Hopefully we can come up with a solution that covers all of the potential data sources.

[samirak93]

I've raised a new ticket/feature request for legends title. Thank you :)