Changing axis data using dropdown menus

📊 Plotly Python
1

Hello!

I’m trying to write a GUI that takes multiple lists and produces a scatter plot using Jupyter Notebook. The scatter plot has a dropdown menu that changes the data and colors from the menu choices. I know that the color change works because I pulled it from the example code. Right now, I have got the buttons displayed, but I can’t seem to interact with the data. As of now, there is nothing displayed except for a blank graph and three dropdown menus. I took a look at https://plot.ly/python/dropdowns/ and https://plot.ly/python/dropdown-widget/. Because I’m relatively new to this, I’m not sure what I need to pick out from it.

I would appreciate it if anyone could help me out. The script is below.

Thanks in advance!

import plotly
from plotly.graph_objs import Scattergl, Layout
import plotly.figure_factory as ff
import plotly.graph_objs as go
import pandas as pd

plotly.offline.init_notebook_mode(connected=True)

columns = ["x","y","z"]
x = [1,2,3,4,5,6,7,8,9,10]
y = [2,3,4,5,6,7,8,9,10,11]
z = [3,4,5,6,7,8,9,10,11,12]

colors = ['#ffaeb9', '#ffb6c0', '#ffbec7', '#ffc6ce', '#ffced5',
          '#ffd6dc', '#ffdee3', '#ffe6ea', '#ffeef1', '#fff6f8']
color_buttons = []
column_buttons_x = []
column_buttons_y = []

for i in colors:
    color_buttons.append(
        dict(args=['line.color', i],
             label=i, method='restyle')
    )
for j in columns:
    column_buttons_x.append(
        dict(args=['x',j],
            label=j,method='update')
    )
for k in columns:
    column_buttons_y.append(
        dict(args=['y',k],
            label=k,method='update')
    )
    
layout = Layout(

    annotations=[dict(text='Change Color',
                      x=-0.25, y=0.83,
                      xref='paper', yref='paper',
                      showarrow=False)],
    updatemenus=list([
        dict(x=-0.1, y=0.7,
             yanchor='middle',
             bgcolor='c7c7c7',
             buttons=list(color_buttons)),
        dict(x=-0.1,y=0.5,
            yanchor = 'middle',
            bgcolor = 'c7c7c7',
            buttons=list(column_buttons_x)),
        dict(x=-0.1,y=0.3,
            yanchor = 'middle',
            bgcolor = 'c7c7c7',
            buttons=list(column_buttons_y))
    ])
)

trace = go.Scatter(
    x=j,
    y=k,
    mode='markers'
)

data = [trace]
fig = go.Figure(data=data, layout=layout)
plotly.offline.iplot(fig)
2

@mattc6 In the trace definition x, and y must be lists. Hence you should change it to:

trace = go.Scatter( x=[j],
                    y=[k],
                    mode='markers'
                            )
1 Like
3

here’s a code for your values. Things that you may need to understand are

  • Logic of the loop
  • use of visible in any plot (go.Scatter, go.Bar…)
  • List Comprehension to initialize visible in updatemenus
    It’s a while since this question was asked so I’m hoping the slightly different code is okay.

colors = [’#ffaeb9’, ‘#ffb6c0’, ‘#ffbec7’, ‘#ffc6ce’, ‘#ffced5’,
‘#ffd6dc’, ‘#ffdee3’, ‘#ffe6ea’, ‘#ffeef1’, ‘#fff6f8’]
df=pd.DataFrame()
x = [1,2,3,4,5,6,7,8,9,10]
y = [2,3,4,5,6,7,8,9,10,11]
z = [3,4,5,6,7,8,9,10,11,12]
df[‘x’]=x
df[‘y’]=y
df[‘z’]=z
DataOut=[]
label=[]
N=int(n*(n-1)/2)
cor=[]
feat=list(df)
n=len(feat)
k=0
for i in range (n-1):
for j in range (n):
if i!=j and j>i:
label.append(feat[j]+’ vs '+feat[i])
cor.append(df[feat[i]].corr(df[feat[j]]))
data = go.Scatter(
x = df[feat[i]],
y = df[feat[j]],
mode=‘markers’,
visible=False,
text = cor[k],
marker = dict(
size = 10,
color = colors[i*n+j],
symbol = ‘pentagon’,
line = dict(
width = 0.5,
)
)
)
#print (data[0],"************************")
k=k+1
DataOut.append(data)

DataOut[-1][‘visible’]=True
updatemenus = list([dict(active=-1,
showactive = True,
buttons=list([
dict(label = label[k],
method = ‘update’,
args = [{‘visible’:[True if k==j else False for j in range(N)]},
{‘title’: 'Scatter plot of '+label[k],
‘xaxis’: {‘title’: label[k][0]},
‘yaxis’: {‘title’: label[k][5]}}],

                 ) for k in range(N)]
                 ),
    )

])
layout = go.Layout(

title = 'Scatter plot of '+label[-1],

hovermode ='closest', # handles multiple points landing on the same vertical
updatemenus= updatemenus)

fig = go.Figure(data=DataOut, layout=layout)
config={‘showLink’: False}
pyo.plot(fig,filename=‘Scatter.html’, config=config)