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

Morten Bendiksen: Parallel Coordinates and GPU Accelerated Brushing in WebGL


Using one of the new inclusions to the HTML 5 standard, webgl enables hardware accelerated rendering in webbrowsers. This project provides an implementation of Parallel coordinates in webgl, as a "gadget" for google spreadsheets. The major advantage of using webgl is the interactivity that hardware accelerated brushing provides.



To test it, do this in you google spreadsheet. You will need a browser with webgl enabled ( see ) It only works in chromium at the moment (maybe the new chrome)

  1. Mark the rows and columns you want to visualize.
  2. Press Insert
  3. Press Gadget
  4. Go to Custom...
  5. Paste the url: , or if you don't want to use cached versions:


The code is itself divided into the gadget.xml and the ParallellCoordinates.js files. The gadget.xml file only sets up two canvases. One for showing the polylines with webgl, and one for drawing the axes, numbers, brushes and so on. It then fetches the data object from the spreadsheet using the visualization api and creates an instance of ParCoord, the class that does the main work. The ParallellCoordinates.js file defines the ParCoord class, which then recieves the data-object. It then creates the 3D and 2D contexts, generates vertex and fragment shaders, and uploads the data to the graphics card, for fast rendering. The vertex-shader is generated anew according to the number of data columns, and the number of brushes in use. The upper and lower value of each brush is sent as uniforms to the shaders, and this is the used as criteria for whether the line should be drawn, and in what color. The data is first rendered showing the non-brushed lines, and then the brushed, in order to always render the brushed on top of the non-brushed.

Open source repository on google code
 Last change: Ove Lampe, 2010-08-03