This project is a JavaScript implementation of viewing data encoded in a matrix around the matrix diagonal. The current use case is to find co-occurrences in viral populations, which can indicate how viruses adapt to environmental pressures, such as the host organism's immune system.

This current implementation is architected by Alper Sarikaya to test the practicality of WebGL as a visualization medium. The project is version-controlled in a private repository. The stable version of the visualization is available (temporarily) here, while an in-progress version is available here.

 

Interacting with the Data

The data is displayed diagonally by default, with the ith position on the y-axis, and the jth position on the x-axis. The following methods itemize the ways to interact with the visualization.

• Clicking in the overview will navigate the main view to the area highlighted by the green bar. The mouse must stay within the top bar when panning the dataset.
• Using the scroll wheel within the canvas will change the zoom level of the current view. The position of the cursor will focus the area of zoom, but the zoom position will always be fixed toward the diagonal of the matrix.
• Hovering the mouse over the dataset at a particular position brings up the encoded data in the 'super-zoom' at top-right, which shows the a view of the current coordinates and metric value(s) under the mouse.
• Clicking the dataset will freeze the 'super-zoom' (which will blink), allowing for more detailed examination of the data. Further, clicking on a 'pixel' in the 'super-zoom' will display the counts of non-variant and variant reads in the below view.
• Clicking a count rectangle in the counts view will condition the reads of the paired read. This conditioned view can be reset by again clicking on the appropriate pixel in the 'super-zoom.'
• Switching the metric will cause the visualization to ask for the data file (up to 15 seconds) and load it into the visualization (1 second). The equation used to compute each metric is displayed below the drop-down.
• Enabling gating will blank out any color if the ith position does not contain at least x% variants. This helps to elimate noise in the visualization and promotes salience of highly-correlated variants.

 

Implementation Notes

This implementation of Splatterplots has been tested in Google Chrome (v36) and Firefox (v32). 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 WebGL Report. Internet Explorer and Safari do not support WebGL due to security concerns.