University of Bergen | Faculty of Mathematics and Natural Sciences | Department of Informatics | Visualization Group
Visualization
You are here: Department of Informatics > Visualization Group > Teaching > INF219: Project in Visualization > Spring 2011 > Ove Daae Lampe
 Visualization
 > about
 > team & contact info
 > research
 > publications
 > projects
 > teaching
 --- > INF219: vis-project
 > seminars
 > resources
 > network
 > events
 > links

Ove Daae Lampe: Kernel Density Estimation in WebGL

Abstract
From Wikipedia:
In statistics, kernel density estimation (KDE) is a non-parametric way of estimating the probability density function of a random variable. Kernel density estimation is a fundamental data smoothing problem where inferences about the population are made, based on a finite data sample. It is also known as the Parzen-Rosenblatt window method, named after Emanuel Parzen and Murray Rosenblatt, who are usually credited with independently creating it in its current form, though it appears that this latter nomenclature is more common amongst certain specialists e.g. signal processing, econometrics. Within statistical and mathematical sciences, kernel density estimation is more prevalent.
We provide an implemenation of the bivariate (2D) KDE in Javascript and WebGL. To go directly to the live WebGL version click here, but first you need to make sure you use a browser version that supports the fairly new HTML5 addition WebGL. This version is tested and working in both Firefox 4beta and in both Chrome beta and Chrome dev. version. This implementation does, however, not provide a very good resolution if used with a browser that does not support floating point textures, at the writing date, only google chrome dev. version.

Details

A 2D KDE is almost like a smoothed scatterplot. E.g., a scatterplot of displacement and horsepower in the 1983 ASA Data Exposition Cars dataset would look like this:

This scatterplot shows the individual samples, i.e., an item based visualization. A KDE on the other hand is a frequency based visualization, and it shows the density of samples, i.e., not the individual samples, but how many and how close there are. The same dataset and axis with our WebGL KDE looks like this:

These two images show different kernel size, or a different level of smoothing, and two different colormaps applied to show density.

Demo

This video shows interaction with WebGL KDE

Interaction

  • Panning: Left click and drag within the view
  • Zooming: Right click and drag within the view. The initial position of the right click will be the center of the zoom.
  • Changing bandwidth and color scale: Middle click and drag within the view. Up and down changes the color scale, and left right changes the bandwidth size.

Code Excample

The following example is all that is needed to include an interactive Kernel Density Estimate using WebGL on your webpage. 

<html>
<head>
<title>WebGL KDE</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="sylvester.js"></script>
<script type="text/javascript" src="glUtils.js"></script>
<script type="text/javascript" src="KDE.js"></script>
<link type="text/css" rel="stylesheet" href="ui-lightness/jquery-ui-1.8.7.custom.css">
</head>
<body>
    <div id="viscontainer" style="width:800px;height:600px;"></div>
    <script type="text/javascript">
        // Creating a new KDE requires only the id of the container (in jquery style).
        my_kde = new KDE( '#viscontainer' );
        // Load data from a google spreadsheet.
        my_kde.setGoogleData( '0Ah8aKdOzkIVEdGlDZjc3VW1nenFrMnlfeVZfc0hLN0E' );
    </script>
</body>
</html>

The above code will create this output ( here just an image ):
 Last change: Ove Lampe, 2010-08-03