go.Heatmap and px.imshow distorted after converting to html?

📊 Plotly Python
1

I recently posted another question that shows my issue, but I felt as if this was a bit different and warranted its own thread.

I have a heatmap that displays perfectly in a JupyterLab notebook. I use nbconverter to convert this notebook to html, and then host it on a GitHub Pages site. When I do this, the cells in the heatmap are clearly distorted, and the hovertext does not behave as it should. I can’t figure out where the issue is occurring, or if it has something to do with the renderer, or something else entirely.

This is what my heatmap should look like (note the rectangular shape of all the cells):

ifsc-analysis(2)
ifsc-analysis(2)1200×900 51.7 KB

After conversion, it then becomes this:

ifsc-analysis(1)
ifsc-analysis(1)1200×900 49.9 KB

My jupyter notebook can be viewed here, and the GitHub Page it gets rendered to can be viewed here. You can clearly see that something is happening between the two - I just can’t figure out where.

Here’s the code related to the Heatmap:

# Creates NaN-filled dataframe using names and years
dat = pd.DataFrame(np.nan, columns=YEARS, index=names)

# Takes data from final_num series and inserts it into dataframe
for nameyear, count in final_num.items():
    dat.loc[nameyear[0], nameyear[1]] = count
    
# Filters climbers who have been in 3 or more finals
dat = dat[dat.sum(axis=1) >= 3] 

# Sort dat by average year weighted by number of finals
srt = ((dat * dat.columns).mean(1)/dat.mean(1)).argsort()
dat = dat.iloc[srt].astype("Int64")

# Create plotly figure with heatmap
fig = go.Figure(data=go.Heatmap(
                    x=dat.columns,
                    y=dat.index,
                    z=dat,
                    name='',
                    hoverongaps=False,
                    hovertemplate="<b>%{y}</b><br>Year: %{x}<br>Finals: %{z}"))

title = ("Finals Appearances Per Climber Per Year<br>"
        "<sup>As new climbers enter the scene, the older climbers get phased out - though some remain dominant")

fig.update_layout(    
    title=dict(text=title,
               font=dict(size=30)),
    plot_bgcolor='#f0f0f0',
    paper_bgcolor='#f0f0f0',
    height=900,
    width=1200,
    autosize=False,
    margin=dict(l=25, r=25, t=85, b=45),
    yaxis=dict(autorange='reversed',
               tickfont=dict(size=9))
    )

fig.show(config=config)

Any input on this would help me a lot. I’ve been stuck on this for several days now.

2

Anyone have any ideas?

3

Hi, I have also faced a similar problem, my cells without direct right neighbor are extended to the next neighboring cell to the right (15cells wide). Did you find any solution in the meantime? Thanks!