Embedded Files
Post date: Feb 09, 2011 7:22:40 PM
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
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.
Interaction
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
Demo
Demo
This video shows interaction with WebGL KDE
Code Excample
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 ):
Page updated
Google Sites
Report abuse