A WebGL/JavaScript implementation of the Splatterplot research project.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
fonts
img
libs
shaders
.gitignore
LICENSE
README.md
color.js
debug.js
docco-modified.css
fileops.js
index.html
splatterplot.js
style.css

README.md

SplatterJs

This project is a JavaScript implementation of the Splatterplot interface described by Adrian Mayorga and Michael Gleicher in their TVCG submission entitled Splatterplots: Overcoming Overdraw in Scatter Plots. A short demonstration of the architecture of this project was presented at the Data Systems for Interactive Analysis workshop at IEEE VIS 2015, and details can be found in our workshop paper titled Using WebGL as an Interactive Visualization Medium: Our Experience Developing SplatterJs.

SplatterJs rendering a 5-set gaussian dataset

The JavaScript implementation utilizes WebGL to bring Splatterplots to the web browser. When deployed on a server, the interface allows for analysts to upload their data files, select the dimensions to display on the splatterplot, and plot the data. The analyst then has the ability to pan and zoom around the data-space to find clusters and correlations between different data series.

Demo

An assorted collection of example datasets loaded into SplatterJs. Please be aware that the URI may change in the future as SplatterJs finds a more permanent home. You are also welcome to upload your own text-based, comma-separated value files to the visualization; the Load File dialog allows for picking the relevant dimensions and a label column to group series together.

Documentation

The main splatterplot.js file is loosely documented with Markdown syntax. Please use docco to generate a side-by-side of code with comments. The following command works well: docco -c docco-modified.css splatterplot.js.

Limitations

Since SplatterJs depends on using WebGL, only browsers that support WebGL are supported. To get the necessary precision, the OES_texture_float WebGL extension is required. RenderingPipeline.com has a good script to determine which WebGL extensions your browser and computer support.

In its current implementation, SplatterJs manages 9 textures per data series, with nearly 20 texture writes per data series (density map, blurring, GPGPU-based max value, threshold distance calculation [jump flooding], drawing of outliers, shading), as well as the final compositing operation. This entire rendering process is repeated on pan and zoom. It is therefore suggested that the client computer have a modern GPU. A nVidia GeForce 250 or equivalent is the minimum suggested GPU (achieves 3-4 fps); GPUs on the order of an nVidia 770 achieve nearly interactive rates.

Libraries used

SplatterJs uses a multitude of libraries to help it go. Below is a list of the libraries used, their licenses, and how they are used in the system.

  • Bootstrap (MIT) -- Used to style and organize UI components on the page, including modal windows.
  • jQuery (MIT) -- Used to support Bootstrap and provide event listeners for mouse
  • jQuery UI (MIT) -- Supports the operation of sliders
  • jquery-mousewheel (MIT) -- Adds normalized support for mousewheel events (zooming on canvas)
  • jQuery-File-Upload (MIT) -- Adds ajax-y support for uploading data files
  • Hashable.js (none?) -- Adds support for parsing/updating the URL hash to save current viewing state
  • lightgl.js (MIT?) -- Provides a nice abstraction layer for doing low-level WebGL commands (e.g. drawing to texture, managing shaders, binding textures)
  • kd-tree-javascript (MIT) -- Provides an implementation of k-d trees to answer the question "what points are here?"

Contact

Please contact Alper Sarikaya with any comments or questions, or feel free to open an issue or pull request.