Plotly.express, pandas and NaNs

Question

Based on the code below, I want to visualise my data in plotly. However, the pie chart I created shows also Nulls, which I want to omit.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

df = pd.DataFrame([
        ['January', 'Violin'],
        ['February', 'Piano'], 
        ['March', 'Violin'],
        ['February', 'Violin'],
        ['January', 'Piano'],
        ['January', 'Violin']], 
    columns=['Month', 'Instrument']
)

df = df.pivot(columns='Month', values='Instrument')

app = dash.Dash(__name__)

app.layout = html.Div([
    html.P("Select a month:"),
    dcc.Dropdown(
        id='my_dropdown',
        value = 'January',
        options=[
                  {'label': 'January', 'value': 'January'},
                  {'label': 'February', 'value': 'February'},
                  {'label': 'March', 'value': 'March'}
        ],
        clearable=False,
        style={"width": "50%"}
    ),
    dcc.Graph(id="pie-chart"),
])

@app.callback(
    Output("pie-chart", "figure"),
    [Input("my_dropdown", "value")])
def generate_chart(my_dropdown):
    fig = px.pie(df, names=my_dropdown)
    return fig

app.run_server(debug=True)

In this case, should I change something into the plotly part of the code or should I convert my initial DataFrame differently (instead of using the df.pivot() option)?

null should not be visible

user_5327068 · Answer

It looks like what you want is a count of the number of instances of each instrument, so I don't think you need to pivot your DataFrame. You can leave it as is:

df
      Month Instrument
0   January     Violin
1  February      Piano
2     March     Violin
3  February     Violin
4   January      Piano
5   January     Violin

If you pass the argument names='Instrument' to px.pie, it will create the pie chart by counting occurrences of the unique values in the Instrument column, and you won't have to worry about null values appearing. Then you can subset your DataFrame by the month that the user selects in dash in your generate_chart function.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

df = pd.DataFrame([
        ['January', 'Violin'],
        ['February', 'Piano'], 
        ['March', 'Violin'],
        ['February', 'Violin'],
        ['January', 'Piano'],
        ['January', 'Violin']], 
    columns=['Month', 'Instrument']
)

# df = df.pivot(columns='Month', values='Instrument')

app = dash.Dash(__name__)

app.layout = html.Div([
    html.P("Select a month:"),
    dcc.Dropdown(
        id='my_dropdown',
        value = 'January',
        options=[
                  {'label': 'January', 'value': 'January'},
                  {'label': 'February', 'value': 'February'},
                  {'label': 'March', 'value': 'March'}
        ],
        clearable=False,
        style={"width": "50%"}
    ),
    dcc.Graph(id="pie-chart"),
])

@app.callback(
    Output("pie-chart", "figure"),
    [Input("my_dropdown", "value")])
def generate_chart(my_dropdown):
    fig = px.pie(
        df[df['Month'] == my_dropdown], 
        names='Instrument'
    )
    # fig = px.pie(df, names=my_dropdown)
    return fig

app.run_server(debug=True)

Plotly.express, pandas and NaNs

1 Answers