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.

This current implementation is architected by Alper Sarikaya to test the practicality of WebGL as a visualization medium. A short paper on this (continuing) effort was presented at the Data Systems for Interactive Analysis workshop at IEEE VIS 2015. The project contents are available for browsing and forking on GitHub.

Loading data into Splatterplots JS

Load a file into the Splatterplot interface by clicking the blue Load File button. A modal dialog will pop-up, asking for a filename. Select a text file for uploading, and the dialog will automatically interpret the first couple of lines of the datafile.

Fill in the parameters based on the composition of the data. You will have the option to select the columns that represent the x- and y-axis. By selecting a Group By column, the data will be split into data series based on the unique values in that column.

Clicking on the Save Options and Load Dataset button will load the dataset into Splatterplots. You can return to the dataset setup page to change data parsing parameters without having to re-upload your data.

The URL will update to contain the datafile uploaded as well as parsing parameters. You can use this URL with the hash intact to return to your view of the data.

Interacting with Splatterplots

Interact with Splatterplots by dragging the canvas with the mouse button and zooming using the scroll wheel. The visual parameters of Splatterplots can be changed by moving the sliders under the canvas; the visualization will update when the slider is released.

By default, each individual data series will use the highest density value visible on the canvas to determine the filled, thresholded region. The Use Global Maximum? checkbox will force all data series to use the same global maximum of the current view. This may help to view direct comparisons, but will de-emphasize underrepresented data series.

Implementation Notes

This implementation of Splatterplots has only been tested in Google Chrome (v36). Client computers must support WebGL (GPU, drivers, browser, OS) and the OES_float_texture WebGL extension for correct rendering. Check WebGL support of your current configuration on RenderingPipeline. Firefox support is forthcoming. Internet Explorer and Safari do not support WebGL due to security concerns.

Choose a file to upload below. Currently, the tool only supports comma-separated values with the file extensions of .csv, .txt, or .dat. The name of the file you upload cannot have spaces, or the file will fail to load.