D3 Examples - Parallel Coordinates

Parallel Coordinates

This is a fix of Dmitri Ischenko's fork of Jason Davis example of parallel coordinates example, with reorderable axes. Modified to use d3 v4. Originally created by Mike Bostock.

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. Click off the brush (but on the axis) to clear the brush.

xxxxxxxxxx
 
<!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;
  cursor: move;
}
​
</style>
<body id="body">
<script src="//d3js.org/d3.v4.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.scaleBand().rangeRound([0, width]).padding(1),
    y = {},
    dragging = {};
​
​
var line = d3.line(),
    //axis = d3.axisLeft(x),
    background,
    foreground,
    extents;
​
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.csv("cars.csv", function(error, cars) {
  // Extract the list of dimensions and create a scale for each.
    //cars[0] contains the header elements, then for all elements in the header
    //different than "name" it creates and y axis in a dictionary by variable name
  x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
    if(d == "name") {
        return false;
    }
    return y[d] = d3.scaleLinear()
        .domain(d3.extent(cars, function(p) { 
            return +p[d]; }))
        .range([height, 0]);
  }));
​
  extents = dimensions.map(function(p) { return [0,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) + ")"; })
      .call(d3.drag()
        .subject(function(d) { return {x: x(d)}; })
        .on("start", function(d) {
          dragging[d] = x(d);
          background.attr("visibility", "hidden");
        })
        .on("drag", function(d) {
          dragging[d] = Math.min(width, Math.max(0, d3.event.x));
          foreground.attr("d", path);
          dimensions.sort(function(a, b) { return position(a) - position(b); });
          x.domain(dimensions);
          g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
        })
        .on("end", function(d) {
          delete dragging[d];
          transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
          transition(foreground).attr("d", path);
          background
              .attr("d", path)
            .transition()
              .delay(500)
              .duration(0)
              .attr("visibility", null);
        }));
  // Add an axis and title.
  g.append("g")
      .attr("class", "axis")
      .each(function(d) { d3.select(this).call(d3.axisLeft(y[d])); })
  .append("text")
      .style("text-anchor", "middle")
      .attr("y", -9)
      .attr("fill", "#000")
      .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.brushY().extent([[-8, 0], [8,height]]).on("start", brushstart).on("brush end", brush_parallel_chart));
      })
    .selectAll("rect")
      .attr("x", -8)
      .attr("width", 16);
});
​
function position(d) {
  var v = dragging[d];
  return v == null ? x(d) : v;
}
​
function transition(g) {
  return g.transition().duration(500);
}
​
// Returns the path for a given data point.
function path(d) {
  return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }));
}
​
function brushstart() {
  d3.event.sourceEvent.stopPropagation();
}
​
​
// Handles a brush event, toggling the display of foreground lines.
function brush_parallel_chart() {
  var brushSelections = new Map();
  d3.selectAll('.brush').each(function(d) { brushSelections.set(d, d3.brushSelection(this)) });
  var actives = dimensions.filter(function(p) { return brushSelections.get(p) !== null });
  // get extent and convert to data range
  var extents = actives.map(function(p) { return brushSelections.get(p).map(y[p].invert) });
  foreground.style("display", function(d) {
    return actives.every(function(p, i) {
      return extents[i][1] <= d[p] && d[p] <= extents[i][0];
   }) ? null : "none";
  });
}
​
</script>
​
    