D3 Examples - Tarea3-Notas

Tarea3-Notas

What:
Table
one categorical attribute : code
one quiantitative attribute: grade

Why:
Present-Distribution
lookup-values

How:
Separate horizontally (code)
Aligned vertically (grade)

Argumentation

For the students the essential is to know their grades, because of this, in the diagram are shown the grades with the student code and not only the grades. Considering this, the bar diagram is chosen for the representation. Line is chosen as the market, because it helps to represent with the help of the length of it a grade. In the horizontal axis are the codes and in the vertical axis are the grades, starting with 0 and finishing a little more than five. They are chosen in this oreder because it is easier to compare, vertically, the grades between students.

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>
​
    