CODEWITHSUNDEEP
javascriptchartsvisualizationheatmap
greenfrontend
greenfrontend

Reputation: 111

Heatmap 25 millions points to render

I need to render a heatmap with 5000x5000 size (25 million points) and update it every 10 seconds.

Question: What approach I should follow if I would like to write this from scratch?

Upvotes: 0

Views: 161

Answers (1)

Vinicius Scheidegger
Vinicius Scheidegger

Reputation: 200

If you are displaying this in a single regular monitor (Full HD) that has a 1920 x 1080 resolution you won't probably be able to display every single point.

This is because the resolution is actually the number of pixels you can represent - so your max, considering you are using the whole screen, would be 1920 pixels x 1080 pixels (~2M pixels/dots).

So, in order to represent the amount of pixels you want, in a single regular monitor you have to go with the options below:

  • Group the items;
  • Adding a panel with scrolling bars;
  • Reduce the data set.

After you decide on your strategy, you can use the D3 javascript library to plot it.

Here you can find a good post about a strategy to group the items and them plot them using D3: https://int21.io/post/50-million-points/index.html

Upvotes: 1

Related Questions