Grades

What

clasificar la informacion de una tabla de estudiantes y notas

Why

presentar los notas de los estudiantes para identificar la distribuccion de los datos y las caracteristicas de los mismos

How

Exprear los valores categoriocos(Code) y ordenados (grade) mediante la posicion de barras paralelas, permitiendo al usurio navegar facilmente el conjunto de datos

Argumento

Mediante la visualización se permite observar las notas del curso, los datos entregadas son el código del estudiante y el valor en hexadecimal de la nota. Para este grupo de datos limitados un diagrama de barras es suficiente para representar la nota de los estudiantes, la posición como marca para la variable permite visualizar fácil mente los datos y identificar del grupo de datos quien es el menor y quien es el mayor. Para mejorar la interpretación del usuario, se agregaron dos checkbox que permiten orden los datos por código y por nota. Esto es útil si se desea clasificar a los estudiantes o si las notas se deban entregar por orden de código. Si se tuviera una metada de la información podría concluirse diferentes cosas sobre los datos, por ejemplo, si una nota fuera viable entre 0 y 5, existiría una incongruencia en el calcula de la nota de un estudiante ya que sobrepasa dicho valor.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  width: 960px;
}

.axis text {
  font: 10px sans-serif;
}

.intro{
    background-color: yellow;
}

.axis path,
  
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
  fill-opacity: .9;
}

.x.axis path {
  display: none;
}

</style>

<body>
  <label align="left"><input type="checkbox" class="SortGrade" > Sort grades</label>
  <label align="rigth" ><input type="checkbox" class="SortCode"> Sort code</label>
  <br><br>
  
  <div class="paint" ></div>

var margin = {top: 20, right: 20, bottom: 150, left: 40},
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, 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(".paint").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.tsv("data.tsv", function(error, data) {

data.forEach(function(d) {
    d.grade = +d.grade;
  });

x.domain(data.map(function(d) { return d.code; }));
  y.domain([0, d3.max(data, function(d) { return d.grade; })]);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
  		.selectAll("text")
  		.style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" )

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("Grade");

svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.code); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.grade); })
      .attr("height", function(d) { return height - y(d.grade); });

d3.select(".SortGrade").on("change", changeSortGrade);
   d3.select(".SortCode").on("change", changeSortCode);

// after 2000ms
  var sortTimeout = setTimeout(function() {
    d3.select(".SortGrade").property("checked", true).each(changeSortGrade);
  }, 2000);

function changeSortGrade() {
    d3.select(".SortCode").property("checked", false)
    clearTimeout(sortTimeout);

// Copy-on-write since tweens are evaluated after a delay.
    var x0 = x.domain(data.sort(this.checked
        ? function(a, b) { return b.grade - a.grade; }
        : function(a, b) { return d3.ascending(a.code, b.code); })
        .map(function(d) { return d.code; }))
        .copy();

svg.selectAll(".bar")
        .sort(function(a, b) { return x0(a.code) - x0(b.code); });

var transition = svg.transition().duration(750),
        delay = function(d, i) { return i * 50; };

transition.selectAll(".bar")
        .delay(delay)
        .attr("x", function(d) { return x0(d.code); });

transition.select(".x.axis")
        .call(xAxis)
      .selectAll("g")
        .delay(delay)
    .selectAll("text")
  		.style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );
  }

function changeSortCode() {
    d3.select(".SortGrade").property("checked", false)
    clearTimeout(sortTimeout);

// Copy-on-write since tweens are evaluated after a delay.
    var x0 = x.domain(data.sort(this.checked
        ? function(a, b) { return b.code - a.code; }
        : function(a, b) { return d3.ascending(a.code, b.code); })
        .map(function(d) { return d.code; }))
        .copy();

svg.selectAll(".bar") 
        .sort(function(a, b) { return x0(a.code) - x0(b.code); });

var transition = svg.transition().duration(750),
        delay = function(d, i) { return i * 50; };

transition.selectAll(".bar")
        .delay(delay)
        .attr("x", function(d) { return x0(d.code); });

});

</script>

</body>>

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