D3 Examples - Tarea4-Task4

Tarea4-Task4

What:
Table
one categorical attribute : code
one quiantitative attribute: grade

Why:
Present-Distribution
lookup-values

How:
Separate horizontally (code)
Aligned vertically (grade)

Argumentation

For the students the essential is to know their grades, because of this, in the diagram are shown the grades with the student code and not only the grades. Considering this, the bar diagram is chosen for the representation. Line is chosen as the market, because it helps to represent with the help of the length of it a grade. In the horizontal axis are the codes and in the vertical axis are the grades, starting with 0 and finishing a little more than five. They are chosen in this oreder because it is easier to compare, vertically, the grades between students.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.x.axis path {
  display: none;
}
​
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
​
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0,0,0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
​
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<body>
    <div id="filter">
    <b>Countries:</b>
  </div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script>
​
//Margins
var margin = {top: 40, right: 20, bottom: 100, left: 65},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
//axis Variables (scale)
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
​
var y = d3.scale.linear()
    .range([height, 0]);
​
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
  
   
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 + ")");
​
  //File
var selectedValue = "Switzerland.csv";
  
 //load multiple files
  queue()
    .defer(d3.csv,selectedValue)
    .defer(d3.csv, "data2014.csv")
    .await(loadData)
 
  //load file
  function loadData (error,land,countries){
   if (error) throw error;
  
 //message-Popout
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    if(d.Value)
    {return "<strong>Index:</strong> <span style='color:#feff32'>" + d.Value + "</span>"}
    else{return "<strong>Index:</strong> <span style='color:#feff32'>" + "NA" + "</span>"};
  });
    
      //create the dropdown-list
var dropDown = d3.select("#filter").append("select").attr('class','select')
                                        .attr("name", "country-list")
                                        .on('change',onchange);
​
​
svg.call(tip); // create svg
​
    //domain axis variables
  x.domain(land.map(function(d) { return d.Features; }));
  y.domain([0, d3.max(land, function(d) { return parseFloat(d.Value) || -1; })]);
​
      
  //load countries in the selector
        var options = dropDown.selectAll("option")
         .data(countries)
         .enter()
           .append("option");
        options.text(function (d) {  return d.Rank+". " + d.Country; })
       .attr("value", function (d) { return d.Country; })
       .attr("id", function (d) { return d.Rank; });
      
      
      
  //add x axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(10," + height + ")")
      .call(xAxis)
       .selectAll("text")   
            .style("text-anchor", "end")
            .attr("dx", "-.em")
            .attr("dy", ".55em")
            .attr("transform", function(d) {
                return "rotate(-20)" 
                });
    
    // add y axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Index");
​
      // load graph
  svg.selectAll(".bar")
      .data(land)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Features)+6; })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(parseFloat(d.Value) || -1); })
      .attr("height", function(d) { return height - y(d.Value); })
        .style("fill",function(d,i){if(i==0){return "RGB(247,150,70)";}
                                  else if(i==1|| i==2||i==3){return "RGB(245,201,24)";}
                                  else if(i==4||i==5){return "RGB(250,110,44)";}
                                  else if(i==6){return "RGB(214,127,190)";}
                                  else if(i==7|| i==8){return "RGB(54,105,179)";}
                                  else if(i==9){return "RGB(0,154,204)";}
                                  else if(i==10|| i==11){return "RGB(0,140,140)";}
                                  else if(i==11|| i==12||i==13||i==14)
                                  {return "RGB(62,188,162)";}
                                  else{return "RGB(0,128,0)";}})
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
  
} 
    
  //method on change list
  function onchange(){
    selectedValue = d3.select('select').property("value")+".csv";
    
    //Load multiple data again 
    queue()
    .defer(d3.csv,selectedValue)
    .defer(d3.csv, "data2014.csv")
    .await(reLoad)
   function reLoad(error,country,countries)
   {
        // Scale the range of the data again
  x.domain(country.map(function(d) { return d.Features; }));
  y.domain([0, d3.max(country, function(d) { return parseFloat(d.Value) || -1; })]);
     
     d3.select("#details").text(selectedValue);
     // Make the changes
    svg.select(".x axis") // change the x axis
            .transition()
                    .duration(750)
            .call(xAxis);
  svg.select(".y axis") // change the y axis
                    .transition()
                    .duration(750)
                    .call(yAxis);
 svg.selectAll(".bar")   // change bars
                    .data(country);
 
     
   }
  }
  
  //pre-procesing
  function type(d) {
  d.Features = d.Features;
  d.Value = parseFloat(d.Value) || -1;
  return d;
}
</script>
​
    