D3 Examples - Notas estudiantes

Notas estudiantes

Suponiendo que somos los profesores de una clase de visual analytics, y con el fin de informar de manera interativa a los estudiantes las notas de un examen, se creó ésta aplicación.

Las notas a visualizar están almacenadas en una variable grades en el siguiente formato:

var grades = [ {"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} ];

Para llegar a ésta solución se tuvo en cuenta el siguiente análisis:

What: El data set es un vector con dos atributos: código del estudiante (code) que es un dato categórico y nota(grade) que es un dato (cuantitativo).

Why:

Mostrar la calificación obtenida por un estudiante

Verificar en que rango de la población quedó el estudiante con respecto a la nota obtenida

How:

Marcas usadas: lineas

Canales usados: posición, color

El resultado de la calificación es mostrada usando el concepto de "medidor" las lineas alrededor del círculo representan la escala de notas que va de 0 a 5.2 (entre los datos hay una nota de 5.2), el estudiante ingresa su código y la aguja se mueve hasta la linea que representa su nota. El vector de notas se ordenó de menor a mayor para obtener una distribucion porcentual de la población que se recleja a tarves de los colores y ayudan a mostrar en que rango de la poblacion se encuentra el estudiante.

Si por ejemplo la nota del estudiante es 1.5 la aguja se mueve hasta la linea correspondiente quedando en la franja de color rojo lo que indica que el estudiante se encuentra en el primer 30% de la población con las notas mas bajas.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v2.js"></script>
  <script type="text/javascript" src="gauge.js"></script>
  <style>
    
  </style>
  <script>
        var gauges=[];
    var grades = [
      {"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 valmin;
        var val40;
        var val60;
        var val90;
      
    function createGauge(name, label, min, max)
    {
      var config = 
          {
            size: 300,
            label: label,
            min: undefined != min ? min : 0,
            max: undefined != max ? max : 5.1,
            minorTicks: 5,
            majorTicks: 6
          }
​
      var range = config.max - config.min;
        config.redZones = [{ from: valmin, to: val40 }];
        config.yellowZones = [{ from: val40, to: val60 }];
      config.blueZones = [{ from: val60, to: val90 }];
      config.greenZones = [{ from: val90, to: config.max }];
      
            
      console.log(config.yellowZones);
      console.log(config.redZones);
      
      gauges[name] = new Gauge(name + "GaugeContainer", config);
      gauges[name].render();
    }
​
    function createGauges(min, max)
    {
      createGauge("memory", "",min,max);
    }
    
    function consultar(){
            var codigo=document.getElementById('codigo').value;
            var exist = 0;
      for(var i=0;i<grades.length;i++){
                if(codigo==grades[i].code){
          document.getElementById('lblMensaje').innerHTML = "";
                    gauges['memory'].redraw(grades[i].grade);
          exist = 1;
                    break;
                }
            }
      
      if(exist == 0)
      { 
        document.getElementById('lblMensaje').innerHTML = "No se encuentra el código de estudiante";
        gauges['memory'].redraw(0);
      }
        }
​
    function initialize()
    {
      
      var grad=[];
      for(var i=0;i<grades.length;i++){
      grad.push(grades[i].grade);
      }
​
      for(var i=0;i<grad.length;i++){
        for(var j=i+1;j<grad.length;j++){
          if(grad[i]>grad[j]){
            var aux=grad[i];
            grad[i]=grad[j];
            grad[j]=aux;
          }
        }
      }
​
      valmin=grad[0];
      val40=grad[Math.round(grad.length*0.3)];
      val60=grad[Math.round(grad.length*0.6)];
      val90=grad[Math.round(grad.length*0.9)];
      var max=5;
​
      if(grad[grad.length-1]>5){
        max=grad[grad.length-1];
      }
      createGauges(0,max);
​
    }
            
    </script>
</head>
​
<body onload="initialize()">
  <br>
  <span style="font-family: Verdana">Ingrese su código: </span><input type="text" placeholder="codigo" id="codigo"/>
  <button onclick="consultar()">consultar</button>
  <br>
  <br>
  <div style="font-family: Verdana; color:red" id="lblMensaje"></div>
    <br>
  <div id="divPrincipal" style="margin:0 auto; text-align:center">
    <span id="memoryGaugeContainer"></span><br/>
  </div>
  <ul>
    <li style="color:#DC3912; font-size:x-large">0-30%</li>
    <li style="color:#FF8000; font-size:x-large">30-60%</li>
    <li style="color:#2E2EFE; font-size:x-large">60-90%</li>
    <li style="color:#109618; font-size:x-large">90-100%</li>
  </ul>
</body>
​
    