D3 Examples - gradesBlock

gradesBlock

what

Dataset Types: Tables. La información de las notas está organizada en arreglo de objetos

why

Present - Discover - lookup - explore En la visualización soporta la organización de las notas para que de esa forma el usuario puede ver la tendencia de las calificaciones-

how:

Order - Look - navegate - embed La visualización permite interactuar con el usuario que cuando quiere mayor detalle selecciona cada barra que simboliza las notas

3. Decidí tomar representar el problema con diagrama de barras debido a que por el tipo de variables como código y promedio es la mejor manera para mostrar esta información. Las marcas en este caso usadas son las líneas y el canal el color de las líneas.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.bar {
  fill: orange;
}
​
.bar:hover {
  fill: orangered ;
}
​
.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="https://d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
// The new data variable.
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}
];
//INIT
var margin = {top: 40, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  
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 tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Grade:</strong> <span style='color:red'>" + d.grade + "</span><br><strong>Code:</strong><span style='color:red'>" + d.code + "</span>";
  })  
  
 paint(data);
  
  
function paint(data){
    
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);
​
// The following code was contained in the callback function.
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)
          .append("text")
    .attr("transform", "rotate(0)")
    .attr("y", 9)
    .attr("x", width)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
      .text("Estudiantes");
​
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("grades");
​
svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.code); })
    .attr("width", x.rangeBand()-10)
    .attr("y", function(d) { return y(d.grade); })
    .attr("height", function(d) { return height - y(d.grade); })
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);
  
}
​
  
function organizarData() {
​
  // The following code was contained in the callback function.
  data.sort(function(a, b){
    var gradeA=a.grade, gradeB=b.grade
    if (gradeA < gradeB) //sort string ascending
        return -1 
    if (gradeA > gradeB)
        return 1
    return 0 //default return value (no sorting)
    });
  
  paint(data);
}
​
​
</script>
  
<div id="option">
    <input name="updateButton" 
           type="button" 
           value="Organizar" 
           onclick="organizarData()" />
</div>
</body>
    