Heatmap Generation

📊 Plotly Python
1

Hello Folks.
I am trying to create a animated plot using plotly graph objects. My aim is plot player heatmap on NFL field for different games he has played. The following is the code for the same. However after running the plots, the heatmap is not generated.
def player_heatmap(df,displayName):
reqdf = df.loc[df.displayName == displayName]
unique_games = reqdf.gameId.unique()

fig = go.Figure()
x_val = np.arange(20,110,10)

for x in x_val:
    vertical_lines = go.Scatter(x=[x,x],
                                y=[0,58],
                                mode = 'lines',
                                line_dash = 'dash',
                                line=dict(color='orange',width=2))
    
    fig.add_trace(vertical_lines)

text_annotations_up = go.Scatter(x = np.arange(20,110,10),
                                 y = [5]*len(np.arange(20,110,10)),
                                 mode = 'text',
                                 text = list(map(str,list(np.arange(20,61,10)-10)+list(np.arange(40,9,-10)))),
                                 textfont_size = 30,
                                 textfont_color= 'orange',showlegend=False)
fig.add_trace(text_annotations_up)

text_annotations_down = go.Scatter(x= np.arange(20,110,10),
                                   y = [53.3-5]*len(np.arange(20,110,10)),
                                   mode = 'text',
                                   text = list(map(str,list(np.arange(20,61,10)-10) + list(np.arange(40,9,-10)))),
                                   textfont_size = 30,
                                   textfont_color = 'orange',
                                   showlegend=False)
fig.add_trace(text_annotations_down)

density_contours = go.Heatmap(
    x=[],y=[],colorscale='Greens',opacity=0.8,zsmooth='best')
fig.add_trace(density_contours)


df1 = []
frames = []
for games in reqdf.gameId.unique():
    sub = reqdf.loc[reqdf.gameId == games]
    df1.append(sub)
    sub_df = pd.concat(df1,ignore_index=True)   
    
    frame_data = [go.Heatmap(x = sub_df['x'],y = sub_df['y'],
                              colorscale='Greens',zsmooth='best',
                              opacity = 0.8)]
    
    frames.append(go.Frame(data = frame_data,name = str(games)))

layout = go.Layout(
    xaxis=dict(range=[0, 120], showgrid=False, showticklabels=True, zeroline=False),
    yaxis=dict(range=[0, 53.3], showgrid=False, showticklabels=True, zeroline=False),
    plot_bgcolor='rgb(247,252,245)',
    showlegend=False,
    margin=dict(l=100, r=0, b=0, t=0),
    updatemenus=[{
        'buttons': [
            {
                'args': [None, {'frame': {'duration': 500, 'redraw': True}, 'fromcurrent': True}],
                'label': 'Play',
                'method': 'animate'
            },
            {
                'args': [[None], {'frame': {'duration': 0, 'redraw': True}, 'mode': 'immediate',
                                  'transition': {'duration': 0}}],
                'label': 'Pause',
                'method': 'animate'
            }],
        'direction': 'left',
        'pad': {'r': 10, 't': 87},
        'showactive': False,
        'type': 'buttons',
        'x': 0.1,
        'xanchor': 'right',
        'y': 0,
        'yanchor': 'top'
    }],
    sliders=[{
        'active': 0,
        'yanchor': 'top',
        'xanchor': 'left',
        'currentvalue': {
            'font': {'size': 16},
            'prefix': 'Game ID:',
            'visible': True,
            'xanchor': 'right'
        },
        'transition': {'duration': 300, 'easing': 'cubic-in-out'},
        'pad': {'b': 10, 't': 50},
        'len': 0.9,
        'x': 0.1,
        'y': 0,
        'steps': [
            {'args': [[str(game_id)]],
             'label': str(game_id),
             'method': 'animate'}
            for game_id in unique_games
        ]
    }]
)

fig.show()

player_heatmap(final_df,‘Stefon Diggs’)
Any suggestion what might be wrong?

2

Hi, I think you need to pass an argument for the z parameter of three heatmap.

3

There are only 2 co-ordinates in my data. So by z what do you mean here exactly ?
Thanks.

4

There are two types of Heatmaps, this is described here:

Not sure which one are you intend to use.

Imagine a grayscale image. The pixel values itself provide the heatmap, that’s why you have to specify them as z argument.