Fork me on GitHub

Parallel Coordinates (0.7.0)

A visual toolkit for multidimensional detectives.

d3.parcoords.js - requires D3.js
d3.parcoords.css - default styles

This library is unstable and in development, but you're welcome to try it out.

Examples

These standalone examples can be used as starting places for your own application.

Brushing

Click and drag along an axis to filter data

Show code

Minimal Example

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.parcoords.js"></script>
<link rel="stylesheet" type="text/css" href="d3.parcoords.css">
<div id="example" class="parcoords" style="width:360px;height:150px"></div>

<script>
var data = [
  [0,-0,0,0,0,3 ],
  [1,-1,1,2,1,6 ],
  [2,-2,4,4,0.5,2],
  [3,-3,9,6,0.33,4],
  [4,-4,16,8,0.25,9]
];

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .createAxes();
</script>

Reordering

Data for this chart is generated from built-in JavaScript math functions.

Pure mathematical relationships may emerge in your explorations, though real data tends to be much noisier. The cars dataset has several roughly inverse relationships, revealed by dense crossings. The first two dimensions in this chart, -x and x, have a perfectly inverse relationship. All lines between those axes meet at a single point.

Only relationships between adjacent dimensions are revealed.
Learn more about read out patterns here.
Drag the axes titles around to reorder the dimensions.

Shuffle dimensions!

Show code

Color

CSS color string. This group of plots is colored with values from d3.scale.category20b().

Show code

Statistical Coloring

One useful way to use coloring is to compute a statistic for each row, and color by that value. This plot is colored by Z-score along the *weight* dimension.

Click a different axis label to color by Z-score for that dimension.

Show code

Try using science.js, clusterfck, or implement your own statistics. You may find Underscore.js and Underscore.math useful to calculate statistics from scratch.

Compositing and Opacity

Control compositing and opacity with composite() and alpha(), respectively. Compositing controls how pixels are combined to form the final image.

Four useful settings are:

Use this slider to change alpha/opacity. The current value is 0.3

Show code

Progressive Rendering

With thousands of data points, the chart will get less responsive when brushing. The interface may stutter or freeze, frustrating the user. To solve this, enable progressive rendering by setting the render mode to "queue".

Change the speed of rendering by setting the rate. You can read more about this technique on the Render Queue page.

Show code

Bundling

Bundling violates the point-line duality but can be used to visualize clusters using geometry only, leaving the color channel free for other uses (e.g. statistical coloring, see below). Bundling can be achieved using different algorithms. Details on the algorithm used here can be found in this paper.

Use this slider to change the curve smoothness. The current value is 0.0

Use this slider to change the bundling strength. The current value is 0

Bundle using clusters determined by:
Show code

More on the way...

This library is in active development, so keep an eye out for new features and documentation. Major changes will be announced on the d3.js mailing list, or you can watch the GitHub repository to track every change.

For past versions of parallel coordinates that demonstrate various features and techniques, see this list of bl.ocks.

Credits

Created by Kai Chang with many collaborators

In the Wild

Talk

I gave this talk on parallel coordinates at OpenVisConf
Slides

Version 0.x.x Changes

7.0: Improved shadow functionality
6.0: Display dimensions with cardinality of one
5.0: 2d brushing, OR brushing
4.0: Repo reorganization
3.2: Bug fixes, brushevents and extents
3.1: Brush and resize bugfixes
3.0: Non-selectable CSS, bundling, axis inversion and axis hiding
2.2: Added Date dimension type
2.1: Overriding dimension titles
2.0: Code organization and Makefile
1.7: Preliminary ordinal dimension support
1.6: Added dimension types
1.5: Progressive rendering
1.4: More examples
1.3: Shadows
1.2: Interactive mode for console use
1.1: ReorderAxes is now updateAxes, transition adding/removing/reordering dimensions
1.0: Initial relase