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.
Update: Jason Davies has derived an example with reorderable axes!
forked from mbostock's block: Parallel Coordinates
| name Share of Wallet Households Occasions $ per Occasion Sales | |
| Ahold 5.3 968 1.89 8.56 15662 | |
| BJ's 10.5 768 1.58 20.33 24605 | |
| Costco 14.4 2909 1.56 24.32 110487 | |
| CVS 17.7 7847 2.04 13.71 219906 | |
| Dollar General 2.7 2194 1.66 4.72 17182 | |
| Family Dollar 1.4 1080 1.45 3.69 5797 | |
| Food Lion 1.3 193 1.52 6.2 1820 | |
| Harris Teeter 5.7 440 1.8 5.72 4520 | |
| Hy Vee 3.3 147 1.85 8.84 2410 | |
| Kmart 2.7 1000 1.28 11.92 15296 | |
| Meijer 20.9 1618 2.38 8.92 34358 | |
| Publix 8.3 1262 1.97 8.33 20678 | |
| Rite Aid 10.2 2742 1.95 11.58 61881 | |
| Safeway 3.5 1214 1.71 8.37 17400 | |
| Sam's 5.8 1194 1.36 25.71 41745 | |
| ShopRite 7.6 858 1.85 7.05 11216 | |
| SuperValu 2.3 220 1.57 7.32 2521 | |
| Target 14.7 12799 2.05 9.65 252953 | |
| Walgreens 10 7102 1.65 12.34 144666 | |
| Walmart 26.9 26741 2.38 8.51 540358 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| font: 10px sans-serif; | |
| } | |
| .background path { | |
| fill: none; | |
| stroke: #ddd; | |
| shape-rendering: crispEdges; | |
| } | |
| .foreground path { | |
| fill: none; | |
| stroke: steelblue; | |
| } | |
| .brush .extent { | |
| fill-opacity: .3; | |
| stroke: #fff; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis line, | |
| .axis path { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 30, right: 10, bottom: 10, left: 10}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scale.ordinal().rangePoints([0, width], 1), | |
| y = {}; | |
| var line = d3.svg.line(), | |
| axis = d3.svg.axis().orient("left"), | |
| background, | |
| foreground; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.tsv("cars.csv", function(error, cars) { | |
| // Extract the list of dimensions and create a scale for each. | |
| x.domain(dimensions = d3.keys(cars[0]).filter(function(d) { | |
| return d != "name" && (y[d] = d3.scale.linear() | |
| .domain(d3.extent(cars, function(p) { return +p[d]; })) | |
| .range([height, 0])); | |
| })); | |
| // Add grey background lines for context. | |
| background = svg.append("g") | |
| .attr("class", "background") | |
| .selectAll("path") | |
| .data(cars) | |
| .enter().append("path") | |
| .attr("d", path); | |
| // Add blue foreground lines for focus. | |
| foreground = svg.append("g") | |
| .attr("class", "foreground") | |
| .selectAll("path") | |
| .data(cars) | |
| .enter().append("path") | |
| .attr("d", path); | |
| // Add a group element for each dimension. | |
| var g = svg.selectAll(".dimension") | |
| .data(dimensions) | |
| .enter().append("g") | |
| .attr("class", "dimension") | |
| .attr("transform", function(d) { return "translate(" + x(d) + ")"; }); | |
| // Add an axis and title. | |
| g.append("g") | |
| .attr("class", "axis") | |
| .each(function(d) { d3.select(this).call(axis.scale(y[d])); }) | |
| .append("text") | |
| .style("text-anchor", "middle") | |
| .attr("y", -9) | |
| .text(function(d) { return d; }); | |
| // Add and store a brush for each axis. | |
| g.append("g") | |
| .attr("class", "brush") | |
| .each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); }) | |
| .selectAll("rect") | |
| .attr("x", -8) | |
| .attr("width", 16); | |
| }); | |
| // Returns the path for a given data point. | |
| function path(d) { | |
| return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; })); | |
| } | |
| // Handles a brush event, toggling the display of foreground lines. | |
| function brush() { | |
| var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }), | |
| extents = actives.map(function(p) { return y[p].brush.extent(); }); | |
| foreground.style("display", function(d) { | |
| return actives.every(function(p, i) { | |
| return extents[i][0] <= d[p] && d[p] <= extents[i][1]; | |
| }) ? null : "none"; | |
| }); | |
| } | |
| </script> |
