Black Lives Matter. Please consider donating to Black Girls Code today.

Help turning bar plot into line plot

Hi all,

I’m trying to make this bar plot into a line plot but every time I try to change it, the lines do not at all represent the data (they go crazy directions.) Ideally I’d like the line plot to track the change in active voter percentage through years 2014-2018 for each District. Here’s the code I have written so far:

import os

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

# Read in the data
gaining_ground = pd.read_csv('https://github.com/thedatasleuth/New-York-Congressional-Districts/blob/master/gaining_ground2.csv?raw=True', index_col=0)

# Get a list of drop down menu items
districts = gaining_ground['DISTRICT'].unique()

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

# Populate the layout with HTML and graph components
app.layout = html.Div([
    
    html.H2(children="Gaining Ground: Percentage of Active Voters",
           style={'textAlign': 'center',
#                  'color': layout_colors['text'],
#                  'backgroundColor': layout_colors['background']
                 }),
    html.Div(
        [
            dcc.Dropdown(
                id="DISTRICT",
                options=[{
                    'label': i,
                    'value': i
                } for i in districts],
                value='All Districts'),
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    dcc.Graph(id='graph')
])

@app.callback(
    dash.dependencies.Output('graph', 'figure'),
    [dash.dependencies.Input('DISTRICT', 'value')])
def update_graph(Districts):
    if Districts == 'All Districts':
        gaining_ground_plot = gaining_ground.copy()
    else:
        gaining_ground_plot = gaining_ground[gaining_ground['DISTRICT'] == Districts]

    trace1 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('DEM')], name='DEM')
                       
    trace2 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('REP')], name='REP')
                       
    trace3 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('CON')], name='CON')
                       
    trace4 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('WOR')], name='WOR')
                     
    trace5 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('IND')], name='IND')
                      
    trace6 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('GRE')], name='GRE')
                     
    trace7 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('WEP')], name='WEP')
                     
    trace8 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('REF')], name='REF')
                     
    trace9 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('OTH')], name='OTH')
                      
    trace10 = go.Scatter(x=gaining_ground_plot['Year'], y=gaining_ground_plot[('BLANK')], name='BLANK')
                        


    return {
        'data': [trace1, trace2, trace3, trace4, trace5, 
                     trace6, trace7, trace8, trace9, trace10],
        'layout':
        go.Layout(
            title='District {}'.format(Districts))
    }

if __name__ == '__main__':
    app.run_server(port=8050, host='127.0.0.1')

Here is what the output looks like:

My hunch is that this is related to how you are filtering the dataframe in each tracex = go.Bar assignment.

Shouldn’t it be the gaining_ground_plot that you should be using?

trace1 = go.Bar(
    x=gaining_ground_plot['Year'], 
    y=gaining_ground_plot[('DEM')], name='DEM')

Hi,

Thank you for your input - I tried your suggestion and still no luck - it’s broadcasting the same crazy lines. I’m not sure why it works fine for barplot mode and goes off the rails in a line graph.

@thedatasleuth, could you update the code in your first post with the go.Scatter method you used? It will be easier to help that way.

Updated! Thank you for your interest and help!

I think your problem is that some districts had 0 voter participation for some years in certain parties.

For example, district 2 REF and WEP were both 0 in 2014.

You might have to either remove those data points or change the range.

I haven’t looked closely at your code but this generally happens when the data is not in chronological order. So you probably need to sort your data.

You’re right - sorting values worked. Thank you all for your help and interest!