error somewhere in the code while adding colorscale in dash barplot

Question

I have written some code to represent a barplot with a colorscale, in dash. The expected result looks something like this but with only one dropdown menu

https://brandatastudio.shinyapps.io/visualization-practica/

, therefore I wrote the following code:

    #!/usr/bin/env python

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.offline as pyo
import plotly.graph_objs as go
import pandas as pd
from dash.dependencies import Input, Output

app = dash.Dash()
datause = pd.read_csv("datawind.csv" , sep = ",")






app.layout = html.Div([
dcc.Graph(
       id = 'barplot1'),
dcc.Dropdown(
       id="dropmenu" ,
       options=[{'label' : i , 'value' : i } for i in datause.columns.values
],
       value='Total Investment ($ Millions)')

],
)

@app.callback(Output(component_id = 'barplot1', component_property = 'figure'),
              [Input(component_id = 'dropmenu' , component_property = 'value')])
def update_figure(dropmenuinput):

    potato = dropmenuinput
    return {
        'data':  [
        go.Bar(
        x = datause["State"],
        y = datause[potato],
        mode = 'markers',
            marker = {
                "color" : datause[potato],
                "colorbar" : dict(title = "hola"),
                "colorscale" : 'Viridis'
                })],
        'layout': go.Layout(
        title = "pene"
        ,xaxis={'title': "state"},
        yaxis ={'title' : potato})  }


if __name__ == '__main__':
    app.run_server(debug=True)

Instead, the obtained results ends up looking like this

After testing and retesting, I discover that the main error of the code seems to be in this section

mode = 'markers',
marker = dict(
    size=16,
    color = datause['Total Investment ($ Millions)'],
    colorbar = dict(title = "hola"),
    colorscale = 'Viridis'
    ))]

If I remove that section of the code, the dashboard looks something like it should, without the colorscale of course.

So, the question is, what is failing in my insertion of the colorscale? I have been checking different posts of how to add them https://community.plot.ly/t/add-a-colorbar-to-scatter-plot-in-python/13349

https://plot.ly/python/colorscales/#custom-contour-plot-colorscale

and I find no examples applied to dash dashboard, or barplots, only here can I hope to find help.

Notes: Heres is the information regarding to the enviroment and packages affecting:

chardet==3.0.4
click==6.7
Cython==0.28.2
dash==0.21.0
dash-core-components==0.22.1
dash-html-components==0.10.0
dash-renderer==0.12.1
decorator==4.3.0
nbformat==4.4.0
numpy==1.14.2
pandas==0.22.0
pandas-datareader==0.6.0
plotly==2.5.1
python-dateutil==2.7.2
pytz==2018.4
requests==2.18.4
urllib3==1.22
Werkzeug==0.14.1

Here is the dataset Iḿ using https://drive.google.com/open?id=1Cr74jKf2FHDA7XVAblQX3d9_dVHfXyVG

Answer 1

I have had a similar issue when adding a color scale to a Map using Dash and the way I resolved this was by finding out the underlying colour schemes by running the code:

import plotly.express as px

print(px.colors.sequential.Plasma)

['#0d0887', '#46039f', '#7201a8', '#9c179e', '#bd3786', '#d8576b', '#ed7953', '#fb9f3a', '#fdca26', '#f0f921']

Then my command in Dash is:

"colorscale":[[0.0,'#0d0887'], [0.1,'#46039f'], [0.2,'#7201a8'], [0.3,'#9c179e'], [0.4,'#bd3786'], [0.5,'#d8576b'], [0.6,'#ed7953'], [0.7,'#fb9f3a'], [0.8,'#fdca26'], [1.0,'#f0f921']]

Answer 2

The only problem I see is the line

mode = 'markers',

inside the go.Bar. If you go to the reference you will see that Bar traces do not have this attribute. If it still doesn't work I suggest updating plotly, as version 3 was a major upgrade to the library (actually I would recommend updating even if it works).

Here is a minimal example from a notebook:

trace = go.Bar(
    x = [1, 2, 3, 4],
    y = [1, 2, 3, 4],
    marker = {
        "color" : [1, 2, 3, 4],
        "colorbar" : dict(),
        "colorscale" : 'Viridis',
        "showscale": True
    }
)