d3 | Parallel Coordinates no lib

ESAT Encuenta de Satisfacción Estudiantil

forked from eesur's block: d3 | Parallel Coordinates

forked from jcamilort's block: d3 | Parallel Coordinates

<!doctype html>

<title>Linking to Data Table</title> 

<link rel="stylesheet" type="text/css" href="style.css">

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3.parcoords.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="tree.js"></script>
<script src="dndTree.js"></script>
<script src="divgrid.js"></script>

<div id="table_container" class="csvTable">Seleccione el pais:</div>
<div class = "container" id="granslider">
  <div id="treecontainer" class="fixed" ></div> 
  <div id="selectedName" class="parcoords" ></div>  
</div>
<div id="grid"></div>

var color = function(d) { return green_to_blue(d['Length of Day (hours)']); };

/**
var parcoords = d3.parcoords()("#example")
  .color(color)
  .alpha(0.4);
  */

// load csv file and create the chart
d3.csv('planet.csv', function(data) {
  //TODO asignar data a coordenadas
  
  
  // create data table, row hover highlighting
  var grid = d3.divgrid();
  d3.select("#grid")
    .datum(data.slice(0,10))
    .call(grid)
    .selectAll(".row")
    .on({
    	//mouseover sobre las celdas
      //"mouseover": function(d) { parcoords.highlight([d]) },
    	//mouseout
      //"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
      });
      
  });*/
});
  
  //Parralel coords
  var margin = {top: 100, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 400 - 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.csv("planet.csv", function(error, surveys) {

// Extract the list of dimensions and create a scale for each.
  dimensions = d3.keys(surveys[0]).filter(function(d) {    
    return d != "Country" && (      
         y[d] = d3.scale.linear()
        .domain(d3.extent(surveys, function(p) { return +p[d]; }))
        .range([height, 0]));
  });
  x = d3.scale.ordinal().rangePoints([0, width], 1).domain(dimensions);
  
    
	function change() {
    var selectedIndex = dropDown.property('selectedIndex'),
        selectedCountry          = options[0][selectedIndex].__data__;    
    foreground.style("display", function(d) {
    	if(d.Country==selectedCountry["Country"]){
       return null;
    	}
      else{
       return "none";
      }
     });    
  }

// Add grey background lines for context.
  background = svg.append("g")
      .attr("class", "background")
    .selectAll("path")
      .data(surveys)
    .enter().append("path")
      .attr("d", path);

// Add blue foreground lines for focus.
  foreground = svg.append("g")
      .attr("class", "foreground")
    .selectAll("path")
      .data(countries)
    .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) { 
    			if(d!="Rank"){
    			  return d.toString().split("-")[1].trim();
          }
    			else{
            return d;
          }
          })
      .style("fill",function(d){
    			var randomColor = Math.floor(Math.random()*16777215).toString(16);
    			return randomColor;
      });

// 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);
  // add style linepath
  d3.selectAll(".foreground path").style("stroke",function(d,i){ 
            return "hsl("+(((170-d.Rank)*90)/170)+",80%,60%)";          			
  }).style("stroke-width",function(d,i){
    return (1-(d.Rank/170)*5)+5;
  }).style("opacity",function(d,i){   
    return 1-((d.Rank)/300);
    
  });
  
});

// 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>

Modified http://code.jquery.com/jquery-1.10.2.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js

https://d3js.org/d3.v3.min.js

https://code.jquery.com/jquery-1.10.2.min.js