Design and evaluation of WebGL-based heat map visualization for big point data

Abstract

Depicting a large number of points on a map may lead to overplotting and to a visual clutter. One of the widely accepted visualization methods that provides a good overview of a spatial distribution of a large number of points is a heat map. Interactions for efficient data exploration, such as zooming, filtering or parameters’ adjustments, are highly demanding on the heat map construction. This is true especially in the case of big data. In this paper, we focus on a novel approach of estimating the kernel density and heat map visualization by utilizing a graphical processing unit. We designed a web-based JavaScript library dedicated to heat map rendering and user interactions through WebGL. The designed library enables to render a heat map as an overlay over a background map provided by a third party API (e.g. Open Layers) in the scope of milliseconds, even for data size exceeding one million points. In order to validate our approach, we designed a demo application visualizing a car accident dataset in the Great Britain. The described solution proves fast rendering times (below 100 ms) even for dataset up to 1.5 million points and outperforms mainstream systems such as the Google Maps API, Leaflet heat map plugin or ESRI’s ArcGIS online. Such performance enables interactive adjustments of the heat map parameters required by various domain experts. The described implementation is a part of the WebGLayer open source information visualization library.