Tarea 3 - Grades Visualization horizontal

Built with blockbuilder.org

forked from damayor's block: Tarea 3 - Grades Visualization

What?

Table with attributes "code" and "grade"

Why?

Tasks

Present and enjoy

Compare and summarize all the course grades. Identify a specific grade of a student.

Targets

Grades distribution

How?

Align continous values and express them in a continous scale.

Marks

Lines

Channels

Length for cuantitative grade Hue for range grades

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.

forked from damayor's block: Tarea 3 - Grades Visualization horizontal

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

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>

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js