D3 Examples - d3 | Parallel Coordinates

xxxxxxxxxx
 
<!doctype html>
​
<title>Linking to Data Table</title> 
<!-- https://syntagmatic.github.com/parallel-coordinates/ -->
<link rel="stylesheet" type="text/css" href="style.css">
​
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="d3.parcoords.js"></script>
<script src="divgrid.js"></script>
​
<div id="example" class="parcoords"></div>
<div id="grid"></div>
​
<script id="brushing"> 
​
var green_to_blue = d3.scale.linear()
  .domain([9, 50])
  .range(["#7AC143", "#00B0DD"])
  .interpolate(d3.interpolateLab);
  
var encodedColors = function(d) { if(d['tier'] === 'All two-year schools') {return "#e02143";} else if(d['tier'] === "Elite schools") {return "#bfbf69";} else if(d['tier'] === "For profit") {return "#69bf69";} else if(d['tier'] === "Four-year public") {return "#69bfbf";} else if(d['tier'] === "Less than two-year schools of any type") {return "#0e0ebf";} else {return "#bf69bf"} };
​
var parcoords = d3.parcoords()("#example")
  .color(encodedColors)
  .alpha(0.8)
    .height(450)
    .width(940);
  
d3.csv('mrc_table2sample4.csv', function(data) {  
  parcoords
    .data(data)
    .hideAxis(["tier"])
    .render()
    .brushMode("1D-axes");  // enable brushing
  // create data table, row hover highlighting
  
//   var grid = d3.divgrid();
//   d3.select("#grid")
//     .datum(data.slice(0,10))
//     .call(grid)
//     .selectAll(".row")
//     .on({
//       "mouseover": function(d) { parcoords.highlight([d]) },
//       "mouseout": parcoords.unhighlight
//     });
​
//   // update data table on brush event
//   parcoords.on("brush", function(d) {
//     d3.select("#grid")
//       .datum(d.slice(0,10))
//       .call(grid)
//       .selectAll(".row")
//       .on({
//         "mouseover": function(d) { parcoords.highlight([d]) },
//         "mouseout": parcoords.unhighlight
//       });
//   });
});
</script>
​
    