This parallel coordinates visualization of cars from the ‘70s and ‘80s demonstrates one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension. The brush component is also used in the updated scatterplot matrix example.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
date | Airbus | Boeing | |
---|---|---|---|
2000-07-31 | 0 | 0 | |
2000-08-31 | -0.884 | 9.8912 | |
2000-09-29 | 9.6685 | 32.1383 | |
2000-10-31 | 32.5967 | 38.9245 | |
2000-11-30 | 33.1492 | 41.4853 | |
2000-12-29 | 30.7182 | 35.2113 | |
2001-01-31 | 27.0718 | 19.8464 | |
2001-02-28 | 24.3094 | 27.4264 | |
2001-03-30 | 16.0773 | 14.1306 |
The fill transition does not work in Chrome when the target of the transition is within an <a>
tag with the xlink:href attribute set.
This example demonstrates the use of post-selection to customize an axis, even across transitions. After the axis is rendered, its elements (such as text labels, here) are reselected and modified to produce the desired appearance. When transitioning the axis, the post-selection modifies entering, updating and exiting elements. Passing null values to transition.tween cancels default tweens scheduled by the axis in favor of the customized styles.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
margin: 0; | |
} | |
path.line { |