Fork me on GitHub

Parallel Coordinates (0.2.2)

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 an axis label to start an oscillating brush. The brush creates a sliding window, filtering out data outside the range. Multiple brushes can be created at once.

Stop the brush by clicking the axis label again. You can drag, resize and remove stopped brushes.

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()
  .ticks(3)
  .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

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

Changes

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