Black Lives Matter. Please consider donating to Black Girls Code today.

Updatemenu Mixed Plot Types

Hi,

I have been attempting to create a dynamic visualisation that includes scatter plots, a stacked area plot and choropleth map. And having the option to switch between them using a drop-down box.

The scatter plot and stacked area plot work fine. The problem is that when attempting to switch to the choropleth map the shape from the scatter plot or stacked area chart is drawn over the top of the choropleth map so I can’t see it. In addition when first loading the visualisation the shape(or layout) of the scatterplot and stacked area plot is drawn behind the choropleth(not ideal but at least i can see the choropleth at this point)

Essentially I need a way to stop the shape or layout from the scatterplot/stacked area chart from being drawn by default and have it only drawn when they are selected from the dropdown.

Thank you in advance for any assistance i have been trying to get this to work for weeks.

below is code, its not mine it is a quick creation using plotly examples for scatter plot and choropleth so that aythone viewing can cut and paste to test. The error/problem I am having is still present with this code.

import plotly.plotly as py
import pandas as pd

import plotly.plotly as py
import plotly.graph_objs as go

# Create random data with numpy
import numpy as np

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv')


N = 1000
random_x = np.random.randn(N)
random_y = np.random.randn(N)

# Create a trace
trace = go.Scatter(
    x = random_x,
    y = random_y,
    mode = 'markers'
)

choropleth = dict(
        type = 'choropleth',
        locations = df['CODE'],
        z = df['GDP (BILLIONS)'],
        text = df['COUNTRY'],
        colorscale = [[0,"rgb(5, 10, 172)"],[0.35,"rgb(40, 60, 190)"],[0.5,"rgb(70, 100, 245)"],\
            [0.6,"rgb(90, 120, 245)"],[0.7,"rgb(106, 137, 247)"],[1,"rgb(220, 220, 220)"]],
        autocolorscale = False,
        reversescale = True,
        marker = dict(
            line = dict (
                color = 'rgb(180,180,180)',
                width = 0.5
            ) ),
        colorbar = dict(
            autotick = False,
            tickprefix = '$',
            title = 'GDP<br>Billions US$'),
      )
data = [choropleth,trace]


updatemenus = list(    
    [dict(active=0,
          showactive = True,
          x= -0.10, 
         buttons=list([  
             dict(label = 'choropleth_map',
                 method = 'update',
                 args = [{'visible': [True,False]},
                         {'title': 'The Map'}]),                   
             dict(label = 'Renewable vs GDP Per Capita',
                 method = 'update',
                 args = [{'visible': [False,True]},
                         {'title': 'Renewable vs GDP Per Capita',
                         'xaxis' : {'title': 'GDP Per Capita'},
                         'yaxis': {'title': '% Renewable Consumption'}}]),
                 ]),        
    )])


layout = dict(
    title = '2014 Global GDP<br>Source:\
            <a href="https://www.cia.gov/library/publications/the-world-factbook/fields/2195.html">\
            CIA World Factbook</a>',
    geo = dict(
        showframe = False,
        showcoastlines = False,
        projection = dict(
            type = 'Mercator'
        )
    ),
    updatemenus=updatemenus
)

fig = dict( data=data, layout=layout )
py.iplot( fig, validate=False, filename='d3-world-map' )

Hi @nvragain,

I don’t see any problems with your code at first glance. Perhaps you’re running into a bug. Could you simplify the example a bit (just remove extra traces and properties that aren’t part of the problem) and add some inline data so that I can copy and paste the code to run it?

Thanks,
-Jon

Hi jmmease,

Thank you so much for your quick response. I have changed to code as requested so that you should be able to cut and paste. Note the code provided is not mine but a mix of plotly examples. That said the problem is still present and the code is not so different from mine that you fixing this wouldn’t fix my problem too.

Thanks for the help.

Hi @nvragain,

I see what you mean, it does look like you’re running into a bug. Could you open an issue with the plotly.js project at https://github.com/plotly/plotly.js/. You can use this Python example in the report and mention my GitHub handle, @jonmmease, and I can help translate it to JavaScript if the Plotly.js devs have questions about the Python part.

Thanks!
-Jon