Tarea 3: Visualización calificaciones

forked from Caged's block: Using d3-tip to add tooltips to a d3 bar chart

What
Es una tabla donde las filas son los códigos de los estudiantes y la única columna es la calificación. Por tanto es un atributo ordenado y cuantitativo, tiene un ordenamiento secuencial pues se sabe que las calificaciones pueden ir desde 0 hasta 5. Los datos son dinámicos pues estos pueden cambiar si hay un reclamo.
Why
Se quiere presentar las calificaciones, teniendo la ubicación conocida, pues para el estudiante es su código pero no sabe el objetivo pues la calificación es desconocida. El estudiante va a querer identificar su calificación y poder compararse respecto al desempeño de los demás. Finalmente, se espera poder observar la distribución de las calificaciones.
How
Para poder analizar más rápido los datos sería interesante tenerlos ordenados por el atributo y alinearlos sobre el mismo eje. Para representar las calificaciones se va a utilizar el tamaño, por lo tanto la longitud en una gráfica de barras. Lo ideal sería que el estudiante al pasar el mouse sobre su barra pudiera ver la calificación exacta

I have made the decision to use a bar chart because it is the easiest way for people to compare themselves with their classmates, they can find how many students had a better grade and if they are over the average or below. On the other hand, there is the opportunity to stand over their bar to see the exact grade, this way the students aren't loosing the accuracy.

forked from anonymous's block: Tarea 3: Visualización calificaciones

Using d3-tip to add tooltips to a d3 bar chart.
<!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>
 
 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 margin = {top: 40, right: 50, bottom: 50, 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>";
  })

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);

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

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
  .selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(40)")
    .style("text-anchor", "start");

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(90)")
      .attr("y", y())
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Grade");

svg.selectAll(".bar")
      .data(grades)
    .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); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)

var avg = d3.mean(grades,function(d){return (d.grade);});
 
svg.append("line")
    .style("stroke", "#DF013A")
    .style("stroke-width", "3px")
    .attr("x1", 0)
    .attr("y1", y(avg))
    .attr("x2", width )
  	.attr("y2", y(avg));
svg.append("text")
    .attr("x", (width-margin.right)/2)
    .attr("y", y(avg) - 2*margin.top)
    .attr("text-anchor", "middle")
		.attr("font-size", "15px")
    .text("Average: "+avg);

function type(d) {
  d.grade = +d.grade;
  return d;
}
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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