Hello everyone,
To anyone who’d like see yet another COVID dashboard, here’s my finished product. It has animated heatmaps using Choroplethmapbox maps, graphs to plot time history of infection data and sandboxes to simulate a generic epidemic.
https://seecovid.herokuapp.com/
All of my code is on Github:
Very nice! Curious to see the graph jumping around during the animation… I wonder why that’s happening
Thanks!
The graph jumping was a major problem I had to overcome. The cause is the character length of the bar name labels. As the days change, some labels drop off the list and others are introduced. When the list of labels changes, the longest label length changes. One way you can test this is to only move the slider one day, so hopefully all the names in the graph remain in it. You shouldn’t see any jumping in this case.
The problem was much worse when I originally made this figure. I mitigated it by clipping long county names so that no label is more than 25 characters. I also left-padded all labels with space characters so that labels less than 25 characters would still be 25 characters long. While it reduced the problem, it didn’t solve it. I just confirmed this is the root cause by omitting the bar name labels. When I do this there is no horizontal jumping that you are seeing. Maybe I need to specify a special monospace font for the these labels?
It seems to me the best long-term fix to this issue within plotly is to make the bar subplot respect the the column width regardless of label length. In this case the labels would take up however much room they need and the bars will use whatever space remains. As it is now, the whole bar graph is changing width as the labels change, causing the browser recalculate the layout.
I am happy to say that using a monospace font has fixed almost all of the jumpiness. I just needed to add the following line of code. Strangely, there is still some slight jumping happening with the Australian states map animation. But it is slight. I’ve pushed my update to Heroku and Github, so you can the see results for yourself.
fig.update_yaxes(tickfont=dict(family="Courier New, monospace"))
I think the monospace font is ugly and looks out of place, but I’m willing to trade aesthetics to make the jumpiness go away.
