D3 Examples - Student grades

Student grades

Student grades chart.

This chart is an easy way to show all grades of the student. It stands out the level of your student discriminated with colors. Green great students, Orange good students and red for bad students. In other hand, it has descending order, in order to compare the performance of each students.

What? Why? How? Analysis

What? It use tables (Items and atributes).

Why? It is used to discover and present the data

How? The bar chart are ordered, aligned and express de grades. It categorize for great, good and bad student by color hue.

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: orange;
}
  
.bar:reprove {
  fill: orangered;
}
​
.bar:hover {
  fill: grey ;
}
​
.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 margin = {top: 40, right: 20, bottom: 70, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var formatPercent = d3.format(".0");
​
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")
    .tickFormat(formatPercent);
​
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Code:</strong> <span style='color:red'>" + d.code + "</span>    <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);
​
d3.tsv("grades.tsv", type, function(error, data) {
  data.sort(function(a,b) {return (a.grade > b.grade) ? -1 : ((b.grade > a.grade) ? 1 : 0);} );
  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)   
        .selectAll("text")  
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", ".15em")
      .attr("transform", "rotate(-65)");
​
  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("Grade");
​
  svg.selectAll(".bar")
      .data(data)
      .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); })
        .style("fill", function(d) {
            if (d.grade < 3) {return "red"}
            else if (d.grade > 4)   { return "green" }
        ;})
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
​
});
​
function type(d) {
  d.grade = +d.grade;
  return d;
}
​
</script>
​
    