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

Dash Python
1

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?

2

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'))
3

This worked! Thank you so much!