D3 Examples - Tarea 3 - Grades Visualization horizontal

Short review

De acuerdo a los datos, se tiene un atributo categórico y un cuantitativo. De acuerdo a los conceptos aprendidos, el mejor canal para representar éstos datos es la longitud en una escala alineada. Por ello se decidió realizar un diagrama de barras utilizando la longitud de la barra para representar la nota obtenida. Se decidió realizar horizontal para poder tener una mejor visualización sobre los códigos de los usuarios.

Por otro lado tambien es posible detallar la nota específica de cada usuario ("Detail on demand") y veríficar de acuerdo al matiz(hue) si aprobó, reprobó o pasó raspando.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.bar {
  fill: steelblue;
}
​
.bar:hover {
  fill: brown;
}
​
.axis {
  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>
​
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
​
<script>
​
var data = [
    {"code":23802620, "grade":4.85},
    {"code":23802825, "grade":4.865},
    {"code":23801894, "grade":3.24},
    {"code":23802926, "grade":5},
    {"code":23800661, "grade":3.19},
    {"code":23800768, "grade":3.98},
    {"code":23800972, "grade":4.89},
    {"code":23801922, "grade":3.73},
    {"code":23805498, "grade":4.795},
    {"code":23805913, "grade":4.85},
    {"code":23800311, "grade":2.81},
    {"code":23806395, "grade":4.72},
    {"code":23808850, "grade":3.85},
    {"code":23802872, "grade":2.16},
    {"code":23802105, "grade":4.715},
    {"code":23809880, "grade":4.92},
    {"code":23802056, "grade":4.48},
    {"code":23807897, "grade":5.2},
    {"code":23807916, "grade":5},
    {"code":23801962, "grade":3.62},
    {"code":23808246, "grade":4.61},
    {"code":23802600, "grade":0.11},
    {"code":23808311, "grade":4.7}
];  
  
var margin = {top: 20, right: 20, bottom: 30, left: 55},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom; 
  
var x = d3.scale.linear()
    .range([0,width]);
​
var y = d3.scale.ordinal()
    .rangePoints([height,0]);
​
​
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
        .ticks(10);
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
  
var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
      if(d.grade<3.0)
            return "<strong>Grade:</strong> <span style='color:red'>" + d.grade + "</span>";
      else if(d.grade>3.0 && d.grade <3.5)
            return "<strong>Grade:</strong> <span style='color:yellow'>" + d.grade + "</span>";
      else
        return "<strong>Grade:</strong> <span style='color:lightgreen'>" + d.grade + "</span>";
  });
​
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 + ")");
​
svg.call(tip);  
  
​
  
//d3.tsv("grades.tsv", type, function(error, data) {
 // if (error) throw error;
​
  x.domain([0, d3.max(data, function(d) { return d.grade; })]);
  y.domain(data.map(function(d) { return d.code; }));
 
  
  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(0," + margin.top +  ")")
      .call(yAxis);
        
​
  svg.append("g")
      .attr("class", "x axis")
      .call(xAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("x", 6)
      .attr("dx", "0.71em")
      .style("text-anchor", "end");
        
​
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
        .attr("x", 0 )//function(d) { return x(d.grade); })
      .attr("y", function(d) { return margin.top+y(d.code); })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
      .attr("height", 17)//x.rangeBand())
        /*.attr("width",0)
        .transition()
        .duration(2000)*/
        .attr("width", function(d) { return x(d.grade); })
  
  
function type(d) {
  d.grade = +d.grade;
  return d;
}
 
​
</script>
    

Tarea 3 - Grades Visualization horizontal

What?

Why?

Tasks

Targets

How?

Marks

Channels

Short review