Example on geographical data visualization by laying a 2D heatmap over a picture of a map.

This example displays a heat map data set of temperature grid measurements on the area of the United States. In geographical data visualization, grid measurements mean that data points are layed with regular latitude and longitude steps.

The data set used in this example has 500 columns (longitude) and 400 rows (latitude). This translates to roughly 12 km step between longitude measurements and 6 km step between latitude measurements. The total number of measurements is 200 000 data points.

The visualization is done by laying a predefined picture of a map under the heatmap, which is styled with transparent colours. This approach is simple, but only suitable when the geographical view is predefined.

LightningChart JS can also be combined with mapping solutions such as Leaflet, which allows the combination of interactive, dynamic maps and the data visualization power of LightningChart.

The picture used in this example is quite low resolution (1600 x 883 px), if a high resolution picture is used, then zooming and panning can be enabled. Otherwise, the map picture would stretch and not look very good.

This example also generates a random data set that is used to showcase the real-time capabilities of LightningChart JS - the heat map visualization is animated continuously with smooth 60 refresh rate. Traditionally, this kind of applications do not exist in web pages because it requires too much processing power and results in bad user experience. However, LightningCharts real-time performance oriented heat map features enable running this example as well as even more stressful usage cases on desktop, mobile and tablet devices while leaving plenty of resources for the rest of the web page.

To learn more about the ground-breaking performance differences between LightningChart and traditional data visualization tools, please refer to our performance comparison studies.

More map examples:

• Data visualization over LightningChart JS Map Charts
• Data visualization over Google Maps
• LightningChart JS Map Charts with Drill-down
• Simple Countries Visualization

Since September 2021, LightningChart JS is the proven performance leader in real-time and static heatmaps visualization in the web.

At that time, we took the initiative to compare the performance of the different commercial data visualization tools as well as open source tools, who offer generic heatmap chart solutions. You can find the study description and results here.

The most important finding from this study was that the maximum data visualization capacity of LightningChart JS greatly exceeds that of any other visualization library, being able to display more than 5 billion data points. In context of this example, this translates to the latitude/longitude step between measurements that can be interpreted.

Another performance attribute where LightningChart dominated was real-time updates - for example, updating the heatmap data displayed over this map.
This is a crucial feature in real-time geographical data monitoring applications.