Updatemenu to get colorscale in Dash

@msuths1 wrote:

Hi,
I have attempted to add buttons to change the color scale of my scatter plot like in the plotly example:https://plot.ly/python/custom-buttons/
The buttons appear but they do not respond when I press them.
Any advice would be appreciated.
Thank you!

import dash
import dash_core_components as dcc
import dash_html_components as html
import json
from textwrap import dedent as d
import dash_table
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import flask

df = pd.read_csv('/Users/mythilisutharson/documents/cam_work/mof_explorer_flourish/MOF_trans_data2.csv')

server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)
features = df.columns

styles = {
    'pre': {

    }
}
tabs_styles = {}
tab_style = {
}

tab_selected_style = {
}
app.layout = html.Div([
    html.H1('',
            style={}),
    html.Div([
        dcc.Tabs([
            dcc.Tab(label='MOF explorer', style=tab_style, selected_style=tab_selected_style,
                    children=[
                        html.Div([
                            html.Div([dash_table.DataTable(
                                id='datatable-interact',
                                columns=[
                                    {"name": i, "id": i, "deletable": True, 'selectable': True} for i in df.columns
                                ],
                                data=df.to_dict('records')
                                style_table={},
                                style_cell={
                                }
                            ), html.Div(id='datatable-interact-container')
                            ], style={'padding': 15}),
                            html.Div([
                                html.Label(["Select X variable:",
                                            dcc.Dropdown(id='xaxis',
                                                         options=[{'label': i, 'value': i} for i in features],
                                                         value='Grav. Uptake (mol/kg)', clearable=False)])
                            ], style={'display': 'inline-block', 'fontSize': 14, 'font-family': 'Arial',
                                      'width': '23%'}),
                            html.Div([
                                html.Label(["Select Y variable:",
                                            dcc.Dropdown(id='yaxis',
                                                         options=[{'label': i, 'value': i} for i in features],
                                                         value='Vol. Uptake (cm3/cm3)', clearable=False)])
                            ], style={'width': '23%', 'display': 'inline-block', 'fontSize': 14,
                                      'font-family': 'Arial'}),
                            html.Div([
                                html.Label(
                                    ["Select Size variable:",
                                     dcc.Dropdown(id='marker_size',
                                                  options=[{'label': i, 'value': i} for i in features],
                                                  value='Pore Limiting Diameter (A)', clearable=False)])
                            ], style={'width': '23%', 'display': 'inline-block', 'fontSize': 14,
                                      'font-family': 'Arial'}),
                            html.Div([
                                html.Label(
                                    ["Select Color variable:",
                                     dcc.Dropdown(id="marker_color",
                                                  options=[{'label': i, 'value': i} for i in features],
                                                  value='Void Fraction', clearable=False)])
                            ], style={'width': '23%', 'display': 'inline-block', 'fontSize': 14,
                                      'font-family': 'Arial'}),
                            html.Div([
                                html.Label(["Select Pressure (bar):",
                                            dcc.Slider(id='pressure-slider',
                                                       min=df['Pressure (bar)'].min(),
                                                       max=df['Pressure (bar)'].max(),
                                                       value=df['Pressure (bar)'].max(),
                                                       marks={str(pressure): str(pressure) for pressure in
                                                              df['Pressure (bar)'].unique()},
                                                       step=None,
                                                       ), ])
                            ], style={'fontSize': 14, 'font-family': 'Arial', 'height': '20%', 'padding': 15,
                                      'width': '90%'})
                        ])
                    ]),

            dcc.Tab(label='Statistical Analysis', style=tab_style, selected_style=tab_selected_style,
                    children=[ ], className='container')
                    ])

        ], style=tabs_styles),

    ]),

], style={})  # style for outter div


@app.callback(
    Output('datatable-interact-container', 'children'),
    [Input('datatable-interact', 'derived_virtual_data'),
     Input('datatable-interact', 'derived_virtual_selected_rows'),
     Input('xaxis', 'value'),
     Input('yaxis', 'value'),
     Input('marker_size', 'value'),
     Input('marker_color', 'value'),
     Input('pressure-slider', 'value')
     ]
)
def update_graphs(rows, derived_virtual_selected_rows, xaxis_name, yaxis_name, size_name, color_name,
                  pressure_value):
    if derived_virtual_selected_rows is None:
        return []
    dff = df if rows is None else pd.DataFrame(rows)
    dfff = dff[dff['Pressure (bar)'] == pressure_value]

    return [
        html.Div([dcc.Graph(
            id='HTS-plot',
            figure={
                'data': [go.Scatter(x=dfff[xaxis_name],
                                    y=dfff[yaxis_name], mode='markers',
                                    marker_color=dfff[color_name], marker_size=2 * dfff[size_name],
                                    marker=dict(sizemode='area', sizeref=max(dfff[size_name]/(15 ** 2)),
                                                sizemin=4,
                                                opacity=0.7, showscale=True,
                                                line=dict(width=0.5, color='DarkSlateGrey'),
                                                colorbar=dict(title=color_name),
                                                colorscale='Viridis', ),
                                    text=dfff['DDEC code'],
                                    hovertemplate=
                                    "<b>%{text}</b><br><br>" +
                                    "Y Variable: %{y:.0f}<br>" +
                                    "X Variable: %{x:. bar}<br>"
                                    "S Variable : %{marker.size:. }<br>" +
                                    "C Variable: %{marker.color:.}"
                                    "<extra></extra>", )],
                'layout': go.Layout(
                    title=f"<b><br>MOF Explorer tool at {str(pressure_value)} bar</b><br> ",
                    xaxis={'title': xaxis_name, 'autorange': True},
                    yaxis={'title': yaxis_name, 'autorange': True},
                    clickmode='event+select',  # double click to discharge
                    template="simple_white",
                    updatemenus=[{'buttons': [
                        {
                            'args': [{'colorscale': 'Viridis'}],
                            'label': 'Viridis',
                            'method': 'restyle',
                        },
                        {'args': [{'colorscale': 'Cividis'}],
                         'label': 'Cividis',
                         'method': 'restyle', },
                        {'args': [{'colorscale': 'Blues'}],
                         'label': 'Blues',
                         'method': 'restyle', }

                    ]}]
                )
            }
        )], style={'padding': 25, 'width': '60%'}
        )
    ]


app.run_server(debug=True)

Posts: 1

Participants: 1

Read full topic