Black Lives Matter. Please consider donating to Black Girls Code today.

# Poor javascript heatmap performance

Please have a look at this heatmap:

Heatmap

It takes 5 seconds to render the colors.

Any idea why?

The heatmap itself should render pretty fast. I think the problem is with the text annotations.

You might want to read https://github.com/plotly/plotly.js/issues/1115 for possible solutions.

Thanks @etienne.

Without annotations it is faster, but still sluggish.

You can see here I added a parameter to skip annotations:

Without Annotations

Ok. Maybe something is up with your code then. Would you mind sharing a snippet with us to help us debug?

Thanks @etienne. Sorry for the delayed response.

Here is a simple example. This page has only render data embedded in the page and the render call. As you can see it is unusable. It improves somewhat removing annotations (which we need, so that’s not an option) however it is still unusable.

I’m going to experiment with other ways of generating these heatmaps. Hopefully you guys can figure out what’s going on here.

http://s3-us-west-1.amazonaws.com/tapcast-bi/app/performance-example.html

Thanks!

For comparison, here is an example with Highcharts (different sample data set from their examples).

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/heatmap-canvas/

I tried the same heatmap on highcharts. It was also slow with the labels, but super fast without them.

Here’s a few things you can do to help performance:

• use https://cdn.plot.ly/plotly-latest.min.js instead of the un-minified version, this will make the page load faster
• remove the MathJax <script> tag, looks like you’re not using any LaTeX symbol so don’t make plotly.js unnecessary try to parse them (yeah, plotly.js is a little dumb in its handling of MathJax at the moment)
• try to plot your text labesl as one scatter trace of mode: 'text' instead of 100+ annotations items. See example: http://codepen.io/etpinard/pen/YZbEGa