D3 Examples - Tarea3-Notas

Tarea3-Notas

What:

Why:

HOW:

Argumentation:

The grades of an exam are presented to the sdudents in class by the teacher. For the students is essential to know their respective grades,because of this, the grades are presented with the student code and not only the grades by themselves. Therefor they are presented in two dimensions.

Bar chart diagram is the chosen based on the following reasons: it facilitates the visualization of the grades by code also the comparation with the other grades. It make use of marks as lines and length as the channeles. In the horizontal axis are located the codes and in the vetical axis are the grades. To make it a little bit clear, it is used the iteractivity to show the right note by passing the mouse by the bar.

xxxxxxxxxx
 
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: steelblue;
}
​
.bar:hover {
  fill: brown ;
}
​
.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}];
//Configuracion margenes
var margin = {top: 40, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
//variables de los ejes
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>Nota:</strong> <span style='color:#feff32'>" + 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(10," + height + ")")
      .call(xAxis)
       .selectAll("text")   
            .style("text-anchor", "end")
            .attr("dx", "-.em")
            .attr("dy", ".55em")
            .attr("transform", function(d) {
                return "rotate(-20)" 
                });
​
  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("Nota");
​
  svg.selectAll(".bar")
      .data(grades)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.code)+10; })
      .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)
​
</script>
​
    