### Home

• My Forsker Grand Prix Talk  In Norwegian :)I got four minutes presenting my PhD topic on visualization of data from drilling operations. First I present what visualization is, and then I show how visualization can be used to understand the magnitude of the Deepwater Horizon oil spill.
Posted May 9, 2011, 2:15 AM by Ove Daae Lampe
• Linear Interpolation between Points in Color Space  To create a gradient or a continuous colormap, we select some colors, and then do linear interpolation to fill in the rest. After reading about the Lab color space, which is made to resemble the human perception system, I wondered excactly how large the differences where in this linear interpolation. A short python script later, with good help from the color-math package, here is some results:When interpolating from red to green in RGB space, we get this un-intuitive brown in the middle. Furthermore, lchuv and lchab looks very similar to xyY and xyz, but changing the initial colors a bit reveals their dissimilarity.LCHuv and LCHab is very similar to HSV and HSL, but they do avoid the luminance spikes at yellow and light blue (which is one of several reasons why we should avoid the rainbow colormap). It would be interesting to test which of these gradients actually performs the best, e.g. show a color, and rate it from 0-100 in where it lies between the start and the end.Code available if requested.
Posted May 1, 2011, 12:25 PM by Ove Daae Lampe
• KDE in WebGL
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

### Code Excample

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

```<html>
<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="sylvester.js"></script>
<script type="text/javascript" src="glUtils.js"></script>
<script type="text/javascript" src="KDE.js"></script>
<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' );
</script>
</body>
</html>
```

The above code will create this output ( here just an image ):

Posted Feb 9, 2011, 11:41 AM by Ove Daae Lampe
• One Year in Colors
Inspired by Viégas and Wattenberg and their amazing Flickr flow, I created a Python script to create a similar result from a video. The result below is made from Eirik Solheims video which is a timelapse of an entire year.

This image shows from left to right January through December. The grey areas to the left are due to the snow ( also see the video below ), and the green area in the middle show trees getting their leaves. The image below shows the same image as above, but here using polar coordinates instead, to highlight the seasonal change :)

#### Technical Details

To create a summary of the colors that occur in a video, we need to compress the colors in each frame down from three dimension (RGB) to one. We need to stick to one dimension so we can create a static image as above, where the horizontal dimension is used to depict time. To perform this dimensionality reduction, I utilized a space filling curve named the Hilbert curve. After reducing the dimensionality of the colors in one frame, I sorted them, and then inserted the colors as a single column in the image above. One visible artifact of using the Hilbert curve, is the multiple bands of green and brown you see appear before summer. Optimally, visually similar colors should be closer together. If I get the time, I will experiment with other sorting algorithms of color.

#### One Year in Two Minutes

The source video by Eirik Solheim