Animated SPLOMs

Using Animation to Alleviate Overdraw in Multiclass Scatterplot Matrices (SPLOMs).

  Website Repository   User Study Repository

Attending CHI 2018? We will be presenting this work on Thursday April 26th at 11:00am in the Perception in Visualization 2 session in room 519AB in Montréal.


There are several ways to interact with our demo using the mouse, as demonstrated below. Touch interactivity is not currently supported.

Select Dataset

Use the dropdown to change datasets.

Use the "Select Dataset" dropdown to load a different dataset.

The dataset size is given in parentheses. For example, the name "generated (800x6)" indicates the dataset named "generated" has 800 rows and 6 columns.

Highlight Grid Labels

Hover over a subplot to highlight the associated row and column labels.

We start with a traditional scatterplot matrix (SPLOM). Since the cells along the diagonal and lower triangle are redundant, we only draw cells in the upper triangle and rotate the triangle so that it lies in the upper-left quadrant. This leaves room for other controls in the lower-right corner.

Hover over a subplot in the SPLOM to highlight the associated row and column labels on the left and top of the matrix in black. For example, the top-left subplot in the pictured SPLOM shows the variable z in the horizontal direction and v in the vertical direction.

Animation Controls

Use the spinner, play button, and pause button to control the animation rate.

We continuously loop through the data to animate the SPLOM, redrawing one or more rows of points at a time. The amount of flickering movement indicates the amount of overdraw in a region.

Click the grey play and pause buttons to start and stop the animation at any time.

Use the number input to control how many rows are animated per frame.

The progress bar shows the percent of rows that have been drawn. Once all of the rows have been drawn, the progress bar shows the percent of rows that have been redrawn since the last loop.

Class Legend

Use the class legend to toggle on/off color for points belonging to different classes.

We use color to encode the class of each point using a qualitative color scheme adapted from ColorBrewer. The legend can be found in the lower right of the SPLOM.

Click the colored key boxes in the class legend to toggle on/off color for points of that class. This allows you to focus only on classes of interest or disable color entirely.

When toggling on a class color, all points belonging to that class will also be brought infront of other points. If animation is enabled, those points will eventually be redrawn in subsequent animation frames.


To illustrate how to interpret an animated SPLOM, individual subplots from the diamonds dataset will be shown below with a red arrow to highlight the example region.

Example Description

table vs carat

An outlier is a single point that is distant from other points. In an animated SPLOM, outliers will appear static (i.e. no movement).

x vs depth

A region with low density has few points and little overdraw. A region with low diversity has few classes. Regions with low density and diversity will have little to no movement or color flickering.

depth vs carat

A region with low density has few points and little overdraw. A region with high diversity has many classes (i.e. many colors). Regions with low density and high diversity have little to no movement but many different colors.

table vs depth

A region with high density has many points and significant overdraw. A region with high diversity has many classes (i.e. many colors). Regions with high density and diversity will have significant movement and significant color flickering.

Regions with both high density and high diversity will result in the most movement and color flickering, bringing attention to regions that could potentially be misinterpreted due to overdraw in static SPLOMs.

Advanced Usage

Our tool supports the following URL query parameters for advanced users. Default values are provided in bold.

Parameter Possible Values Description
animate true, false If true, enables the animation loop.
prerender true, false If true, prerenders the entire dataset before the first animation frame. Disabled for very large datasets.
shuffle true, false If true, shuffles the row order every loop through the dataset.
shape circle, square Changes the shape drawn for each point. See also the encoding parameter.
encoding normal, open, alpha, blend Changes the point encoding. If normal, uses a shape filled by class with a white outline. If open, uses a shape with a outline colored by class and no fill. If alpha, uses the normal encoding plus alpha blending (turning on transparency). If blend, uses the normal encoding plus color blending.
rows 1, 2, ..., n A positive integer value that controls the number of rows redrawn every animation frame. Must be less than n, the total number of rows in the dataset.
scale 0.75, 1.0, 1.5, ... A positive floating point value that controls the scale of the SPLOM. Sizes between 0 and 1 will result in a smaller SPLOM, and sizes greater than 1 will increase the SPLOM size.

Multiple parameters may be combined together using the ampersand & symbol. For example, consider the following:


This set of parameters will disable prerendering, use square shapes with no fill and an outline colored by class, animate 4 rows per frame, and use a 25% larger size for the SPLOM.

Point Encodings

Using the URL parameters above, it is possible to use the following point encodings in our tool:

  circle square

Click on any image above to use the shape and encoding values depicted. Some combinations (such as circles combined with color blending) are slower to load.

This website is implemented using Animate.css, FontAwesome, and the Bulma CSS framework. Most datasets are from the UCI Machine Learning Repository or generated using the scikit-learn Python package. The visualization demo is implemented using the p5.js JavaScript library. This tool is free and unencumbered public domain software. For more information, see or the accompanying LICENSE file.