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.
These standalone examples can be used as starting places for your own application.
Click and drag along an axis to filter data
Show code
<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>
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.
Show code
CSS color string. This group of plots is colored with values from d3.scale.category20b().
Show code
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.
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
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
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
Show code
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.
Created by Kai Chang with many collaborators
I gave this talk on parallel coordinates at OpenVisConf
Slides
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