D3 Examples - FinalParallelCoordinates

FinalParallelCoordinates
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;
}
​
​
​
.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 = 700 - 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 dimensionss = [
  {
    name: "averageA",
    scale: d3.scale.linear().range([height, 0]),
    type: "number"
  },
  {
    name: "averageB",
    scale: d3.scale.linear().range([height, 0]),
    type: "number"
  }
];
​
var x = d3.scale.ordinal().rangePoints([0, width]),
    y = {},
    dragging = {};
​
var c20 = d3.scale.category20();
​
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) {
  d3.csv("crms.csv", function(error, crmsA){
    d3.csv("crmsB.csv", function(error, crmsB){
    crmsA[0].startt = crmsA[0].start
    crmsA[0].endd = crmsA[0].end
    console.log(crmsA[0])
  for(var i = 1; i<crmsA.length; i++){
    crmsA[i].startt = crmsA[i-1].endd
    crmsA[i].endd = ""+(Number(crmsA[i].end)+Number(crmsA[i].startt))
  }
        crmsB[0].startt = crmsB[0].start
    crmsB[0].endd = crmsB[0].end
    console.log(crmsB[0])
  for(var i = 1; i<crmsB.length; i++){
    crmsB[i].startt = crmsB[i-1].endd
    crmsB[i].endd = ""+(Number(crmsB[i].end)+Number(crmsB[i].startt))
  }      
      
      
    
    chrmsA = toObject(crmsA);
    chrmsB = toObject(crmsB);
    console.log(chrmsB)
  for(var j = 0; j<cars.length; j++){
    genomeA = cars[j].specieA_cmsm
    cars[j].averageA = Number(chrmsA[genomeA].startt)+(Number(cars[j].averageA)-Number(chrmsA[genomeA].start))
    
    genomeB = cars[j].specieB_cmsm
    cars[j].averageB = Number(chrmsB[genomeB].startt)+(Number(cars[j].averageB)-Number(chrmsB[genomeB].start))    
    
  }
  // Extract the list of dimensions and create a scale for each.
  x.domain(dimensionss.map(function(d) { return d.name; }))
  
  dimensionss.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)
        //.attr("stroke",function(d){return c20(d.specieA_cmsm+d.specieB_cmsm)});
        //Esta es para asignar color para las que peguen en el mismo cromosoma. 
      .attr("stroke",function(d){return c20(d.specieA_cmsm)});
​
  // Add a group element for each dimension.
  var g = svg.selectAll(".dimension")
      .data(dimensionss)
    .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);
          dimensionss.sort(function(a, b) { return position(a) - position(b); });
          x.domain(dimensionss.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;
  linee = line(dimensionss.map(function(dimension) {
    return [x(dimension.name), dimension.scale(d[dimension.name])];
  }));
  return linee;
}
​
function brushstart() {
  d3.event.sourceEvent.stopPropagation();
}
​
// Handles a brush event, toggling the display of foreground lines.
function brush() {
  var actives = dimensionss.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 toObject(arr) {
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[arr[i].chrms] = arr[i];
  return rv;
}
​
</script>
    