Not displaying scatter plots

📊 Plotly Python
1 
import plotly.express as px
import plotly.graph_objects as go

# Creating a simple animation for plays along with tracking data.
def animate_player(tracking_df,play_df,gameId,playId):
    """This functions helps in creating dataset for animating player movements on field."""
    relations = {'ballCarrierDisplayName':'displayName'}
    tracking_df.rename(columns=relations,inplace=True)
    
    # Cleaning the required data for plotting.
    final_df = tracking_df.merge(play_df,on = ['gameId','playId','displayName'],how = 'inner')
    final_df.drop([ 'preSnapHomeTeamWinProbability',
       'preSnapVisitorTeamWinProbability', 'homeTeamWinProbabilityAdded',
       'visitorTeamWinProbilityAdded', 'expectedPoints', 'expectedPointsAdded',
       'foulName1', 'foulName2', 'foulNFLId1', 'foulNFLId2','frameId'],axis=1,inplace=True)
    
    # Subsetting the required game and play.
    animated_df = final_df.loc[(final_df['gameId'] == gameId) & (final_df['playId'] == playId)]

    for i in range(0,animated_df.shape[0]):
        animated_df['frame'] = i
    
    colors = {'ARI':"#97233F",'ATL':"#A71930",'BAL':'#241773','BUF':"#00338D",'CAR':"#0085CA", 'CHI':"#C83803",'CIN':"#FB4F14",'CLE':"#311D00",'DAL':'#003594',
    'DEN':"#FB4F14",'DET':"#0076B6",'GB':"#203731",'HOU':"#03202F",'IND':"#002C5F",'JAX':"#9F792C",'KC':"#E31837",'LA':"#003594",'LAC':"#0080C6",
    'LV':"#000000",'MIA':"#008E97",'MIN':"#4F2683",'NE':"#002244", 'NO':"#D3BC8D", 'NYG':"#0B2265",'NYJ':"#125740", 'PHI':"#004C54",
    'PIT':"#FFB612", 'SEA':"#69BE28", 'SF':"#AA0000",'TB':'#D50A0A','TEN':"#4B92DB", 'WAS':"#5A1414", 'football':'#CBB67C'}


    fig = go.Figure()

    fig.add_shape(type='rect', x0=0, y0=53.3, x1=120, y1=0, line=dict(color='SeaGreen', width=2),fillcolor = 'SeaGreen')

    #Add yard lines on the field.
    for x in range(20,110,10):
        number = x
        if x > 50:  # Subtracting the value if number exceeds 50.
           number = 120 - x
           fig.add_shape(type='line', x0 = x, x1 = x, y0 = 53.3 ,y1 = 0, line=dict(color='white',width = 2, dash = 'dash'), xref = 'x')
           # Add labels
           fig.add_annotation(x=x,y=53.3,text=str(number-10),showarrow=False,
           font=dict(color='red', size=15),xref='x',yref='y')

        else:
           fig.add_shape(type='line', x0 = x, x1 = x, y0 = 53.3 ,y1 = 0, line=dict(color='white',width = 2, dash = 'dash'), xref = 'x')
           fig.add_annotation(x=x,y=53.3,text=str(number-10),showarrow=False,font = dict(color='red',size=15),xref='x',yref='y',align='center')
    

    fig.add_trace(go.Scatter(x = animated_df['x'], y = animated_df['y'],mode = 'markers',marker = dict(size=12,color = animated_df['possessionTeam'].apply(lambda x : colors[x]))))
    #Update layout to create NFL field.
    fig.update_layout(
    title = 'NFL field dimension',
    xaxis = dict(range=[0,125], showgrid = False, showticklabels = True, zeroline = False),
    yaxis = dict(range=[-3,58], showgrid = False, showticklabels = True, zeroline = False),
    showlegend = False,updatemenus=[dict(type='buttons', showactive=False,
                                          buttons=[dict(label='Play',method='animate', args=[None,dict(frame=dict(duration=500,redraw=True),fromcurrent=True)])])])

    fig.show()

Can anybody help me understanding why scatter plot is not been displayed after running this function.

2

Hi @SaishS,

Can you share the dataframe or sample data that has similar content ?

it will help us a lot to reproduce the issue.

Thanks.

3

Hi @farispriadi
Sure I am attaching the screenshot of the dataframe, as the data is quite huge and includes many operations.

Screenshot 2023-12-15 111251
Screenshot 2023-12-15 1112511855×518 65.8 KB

4

Hi @SaishS,

Okay thanks.
if I am not wrong, maybe your problem is the seagreen square shape that is blocking your Scatter plot. Maybe it will be displayed like below:

image
image1723×802 14.4 KB

Refering to the docs below.

The shape will be drawn above trace by default.

Then you can try to add layer="below" when call add_shape.

So shape will be drawn below trace.

... 

fig.add_shape(type='rect', x0=0, y0=53.3, x1=120, y1=0, line=dict(color='SeaGreen', width=2),fillcolor = 'SeaGreen', layer="below")

...

When you run the function, your scatter plot will be above the shape.

image
image1674×778 42.2 KB

Hope this help.

1 Like
5

Hi @farispriadi thanks for the help!!
Really helpful!

6

Hi @SaishS ,

Glad to help.

Is this the solution what you mean ?