✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Setting specific colors for each plot within drop-down menu [Stretch Goal]

Hi - I have the following code for a plot with a drop down menu for each political party:

import os

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

# Read in the data

active_inactive10 = pd.read_csv("https://github.com/thedatasleuth/New-York-Congressional-Districts/blob/master/active_inactive10.csv?raw=True")

# Read in the data
df = active_inactive10

# Get a list of all the parties
parties = active_inactive10['Party'].unique()

# Create the app
app = dash.Dash()
server = app.server

# Populate the layout with HTML and graph components
app.layout = html.Div([
    html.H2("Active v. Inactive Voters in 2018"),
    html.Div(
        [
            dcc.Dropdown(
                id="Party",
                options=[
                     {'label': 'Democratic Party', 'value': 'DEM'},
                     {'label': 'Republican Party', 'value': 'REP'},
                     {'label': 'Conservative Party', 'value': 'CON'},
                     {'label': 'Working Families Party', 'value': 'WOR'},
                     {'label': 'Independent Party', 'value': 'IND'},
                     {'label': 'Green Party', 'value': 'GRE'},
                     {'label': "Women's Equality Party", 'value': 'WEP'},
                     {'label': 'Reform Party', 'value': 'REF'},
                     {'label': 'Other', 'value': 'OTH'},
                     {'label': 'Blank', 'value': 'BLANK'}
                    ],

                value='All Parties'),
#
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    dcc.Graph(id='funnel-graph'),
])


# Add the callbacks to support the interactive componets
@app.callback(
    dash.dependencies.Output('funnel-graph', 'figure'),
    [dash.dependencies.Input('Party', 'value')])
def update_graph(Parties):
    if Parties == "All Parties":
        df_plot = df.copy()
    else:
        df_plot = df[df['Party'] == Parties]

    trace1 = go.Bar(x=df_plot ['DISTRICT'], y=df_plot [('Active')], name='Active')
    trace2 = go.Bar(x=df_plot ['DISTRICT'], y=df_plot [('Inactive')], name='Inactive')



    return {
        'data': [trace1, trace2],
        'layout':
        go.Layout(
            title='{}'.format(Parties),
            barmode='stack')
    }


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

And the plot can be viewed here.

Ideally, I would love to be able to set a color for each of the political parties, as I have done here where the ‘Active’ trace would pick up the color of the political party and the ‘Inactive’ trace would be set to black. Can this be done?

If you made a dictionary of the party value to color mapping, e.g.:

colors = {'DEM': '#0000FF',
 'REP': '#FF0000',
 ...}

you can then set the color in the funnel graph when you create it based on the value in the dropdown:

    trace1 = go.Bar(x=df_plot ['DISTRICT'], y=df_plot [('Active')], name='Active', marker=dict(color=colors[Parties]))
    trace2 = go.Bar(x=df_plot ['DISTRICT'], y=df_plot [('Inactive')], name='Inactive', marker=dict(color='black'))

This worked! Thank you so much!