For a while I’ve been waiting for an in-browser plotting library built on WebGL. Though there are many great browser-based plotting solutions, the current suite of tools don’t always address use cases in science.
In the sciences it not uncommon to work with large datasets. For instances, the Sloan Digital Sky Survey (SDSS) just announced its 10th data release containing vast information on millions of astronomical objects, including optical spectra for 3,358,200 objects. Attempting to visualize this many points on a scatter plot would cripple many plotting libraries, and not just those constrained to the browser.
Current browser libraries are built on one of two technologies, SVG or canvas. SVG based libraries offer vector based plots, allowing the graphic to resize to any dimension without losing quality. The drawback is that SVG graphics append one DOM element for every data point. Handling a large dataset such as the SDSS catalog bloats the DOM, creating a hierarchical structure that is tediously slow for the browser to parse. One idea is to move the plot to a canvas based library. Drawing on a canvas consolidates all points onto a single raster graphic represented as one DOM element. Being a raster graphic, it loses the freedom to losslessly resize, but allows for more points to be drawn. Despite scaling better than SVG, canvas suffers from performance problems due to a large number of draw calls pounding the CPU.
The next step is to use newer technologies as a foundation for a new library. Modern browsers, namely Firefox and Chrome, have implemented WebGL, an API to interface with the graphics card. Whereas SVG and canvas primarily use the CPU, WebGL taps into the power of the GPU for drawing graphics. The benefit is raw speed, and scalability of the dataset size.
Ruse is a new browser-based plotting library utilizing WebGL for plotting large datasets. In its current form, Ruse generates histograms and two-dimensional scatter plots. Using Ruse is simple.
// Initialize a plot by passing a parent DOM element, width, and height
var ruse = new astro.Ruse(el, width, height);
// Create a histogram by passing an array of objects.
var histogramData = [{x: 9309}, {x: 23098342089}, ..., {x: 3093232}];
ruse.plot(histogramData);
// Or create a scatter plot
var scatterData = [{x: 43843, y: 440943}, {x: 3902, y:49084}, ..., {x:39032, y:329824}];
ruse.plot(scatterData);
// Ruse creates the appropriate plot by checking the dimensionality
// of the first data point in the arrayRuse has not yet gone through rigorous stress testing, but it successfully plotted the right ascension and declination of all 3,358,200 objects in the optical spectra catalog of SDSS DR10, confirming that SDSS is a northern hemisphere optical telescope, blind along the galactic plane.