D3 Examples - Parallel Coordinates2

Parallel Coordinates2
This is a version of Mike Bostock’s parallel coordinates example, modified to include reorderable axes.
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.
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>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
var margin = {top: 30, right: 80, bottom: 10, left: 80},
    width = 1300 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  
var dimensions = [
  {
    name: "specieA_gen_start",
    scale: d3.scale.linear().range([height, 0]),
    type: "number"
  },
  {
    name: "specieA_gen_end",
    scale: d3.scale.linear().range([height, 0]),
    type: "number"
  },
  {
    name: "specieA_cmsm",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: "string"
  },
  {
    name: "specieA_gen",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: "string"
  },
  {
    name: "specieB_gen",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: "string"
  },
  {
    name: "specieB_cmsm",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: "string"
  },
  {
    name: "specieB_gen_start",
    scale: d3.scale.linear().range([height, 0]),
    type: "number"
  },
  {
    name: "specieB_gen_end",
    scale: d3.scale.linear().range([height, 0]),
    type: "number"
  },
];
​
var x = d3.scale.ordinal().rangePoints([0, width]),
    y = {},
    dragging = {};
​
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.csv("cars.csv", function(error, cars) {
  
  //add mean column
  
  cars=addMean(cars);
  //cars ordering 
  cars= orderByChrom(cars);
  console.log(cars);
  // Extract the list of dimensions and create a scale for each.
  x.domain(dimensions.map(function(d) { return d.name; }))
  
  dimensions.forEach(function(dimension) {
    dimension.scale.domain(dimension.type === "number"
        ? d3.extent(cars, function(d) { return +d[dimension.name]; })
        : cars.map(function(d) { return d[dimension.name]; }).sort());
    y[dimension.name] = dimension.scale;
  });
​
  // 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.name) + ")"; })
      .call(d3.behavior.drag()
        .origin(function(d) { return {x: x(d.name)}; })
        .on("dragstart", function(d) {
          dragging[d.name] = x(d.name);
          background.attr("visibility", "hidden");
        })
        .on("drag", function(d) {
          dragging[d.name] = 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.map(function(d) { return d.name; }));
          g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
        })
        .on("dragend", function(d) {
          delete dragging[d.name];
            console.log(this)
          transition(d3.select(this)).attr("transform", "translate(" + x(d.name) + ")");
          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(axis.scale(y[d.name])); })
    .append("text")
      .style("text-anchor", "middle")
      .attr("y", -9)
      .text(function(d) { return d.name; });
​
  // Add and store a brush for each axis.
  g.append("g")
      .attr("class", "brush")
      .each(function(d) {
        d3.select(this).call(y[d.name].brush = d3.svg.brush().y(y[d.name]).on("brushstart", brushstart).on("brush", brush));
      })
    .selectAll("rect")
      .attr("x", -8)
      .attr("width", 16);
});
​
function position(d) {
  var v = dragging[d.name];
  return v == null ? x(d.name) : v;
}
​
function transition(g) {
  return g.transition().duration(500);
}
​
// Returns the path for a given data point.
function path(d) {
  //console.log(d)
  //var a = line(dimensions.map(function(p) { 
    //console.log(p)
    //return [position(p), y[p](d[p])]; }));
  //console.log(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }))
  //return a;
  
  return line(dimensions.map(function(dimension) {
    return [x(dimension.name), dimension.scale(d[dimension.name])];
  }));
}
​
function brushstart() {
  d3.event.sourceEvent.stopPropagation();
}
​
// Handles a brush event, toggling the display of foreground lines.
function brush() {
  var actives = dimensions.filter(function(p) {
    return !y[p.name].brush.empty(); }),
      extents = actives.map(function(p) { return y[p.name].brush.extent(); });
  console.log(actives)
  console.log(extents)
  foreground.style("display", function(d) {
    console.log(d);
    return actives.map(a => a.name).every(function(p, i) {
      console.log(extents[i][0],d[p],extents[i][1])
      console.log(isNaN(parseInt(d[p]))?y[p](d[p]):d[p])
      var w = isNaN(parseInt(d[p]))?y[p](d[p]):d[p]
      return extents[i][0] <= w && w <= extents[i][1];
    }) ? null : "none";
  });
}
  
  function orderByChrom(data){
    data.sort(compareGenome);
    return data;
  } 
  function addMean(data){
    for(i=1;i<data.length;i++){
      data[i].promedio=(Number(data[i].specieA_gen_end)+Number(data[i].specieA_gen_start))/2;
    }
    return data;
  }
  function compareGenome(a,b){
    if (a.specieA_cmsm< b.specieA_cmsm)
    return -1;
  if (a.specieA_cmsm> b.specieA_cmsm)
    return 1;
  return 0;
  }
</script>
    