D3 Examples - Grades TZ

Grades TZ

What:

structure:Table A categorical attribute: code A quantitive attribute: grade

Why:

Discover distribution, compare values, look for

How:

mark: lines channels: lenght: to express quant grade color: to express if the grade was good, regular or bad spatial regions:one per code, it has a transition that sort the marks by grade embed: embed information like code and grade when mouse is over a bar

Development:

The best form to show quantitive attributes like grades is with lines because the human vision can compare the lenght in a frame undertanding the general information without think a lot.

I also use embed information because it was showing the codes in x axis, so the lenght of that label producedoverlaps. my solution is embed the code with the grade when you mouse over the a specific bar.

To finish, The bars have color, it depends if the grade are very good(green),normal(Yellow), bad(Red). the colors use the same as the traffic lights and if you want to look for a specific code, in the input text it is possible.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  width: 960px;
}
​
.axis text {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.bar {
  fill: steelblue;
  fill-opacity: .9;
}
 .bar:hover{   
        fill-opacity:0.5;
    }
​
.x.axis path {
  display: none;
}
​
label {
  position: absolute;
  top: 10px;
  right: 10px;
}
.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>
<h2><Strong>Notas Finales del Examen de Visual Analitics</Strong></h2>
Code: <input class="search" type="text" hide="Código" value="2380">
<input class="order" type="checkbox" hidden="true">
<script src="//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: 50, right: 20, bottom: 15, left: 40},
    width = 960 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
​
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, 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");
 //#####################################################################
 //TIP
 //##################################################################### 
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, -7])
  .html(function(d) {
    return "<div><strong>Code:</strong> <span style='color:red'>" + d.code + "</span></div><div><strong>Grade:</strong> <span style='color:forestgreen'>" + d.grade + "</span></div>";
  });
 
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);
​
function update(data) {
​
  x.domain(data.map(function(d) { return d.code; }));
  y.domain([0, d3.max(data, function(d) { return d.grade; })]);
​
  svg.append("g")      
      .attr("transform", "translate(0," + height + ")")
     
​
  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");
​
  var barra=svg.selectAll(".bar").data(data);
      barra.enter().append("rect").attr("class", "bar");
  
        //barra.exit().remove();
  
        barra.on("mouseover", tip.show)
          .on("mouseout",tip.hide)
        .style("fill",function(d){        
                if(d.grade<3){ 
            return "darkred";
          }
                else if(d.grade<4){
            return "darkgoldenrod"
          }
                else{
            return "forestgreen"
          }
      })      
      .attr("x", function(d) { return x(d.code); })
      .attr("y", function(d) { return y(d.grade); })
      .attr("width", x.rangeBand())      
      .attr("height", function(d) { return height - y(d.grade); });
​
  d3.select(".order").on("change", change);
  var searchinput = d3.select("input.search");
        searchinput.on("keyup",search);
​
  var sortTimeout = setTimeout(function() {
    d3.select("input").property("checked", true).each(change);
  }, 5000);
  //##############################################################
  //search
  //##############################################################
  function search(){
    var barr=svg.selectAll(".bar")      
      barr.each(function(d,i){
        var bari=d3.select(this); 
        //console.log(bari.select(".rect"));
        var codeinput=searchinput.property("value");      
        if(d.code==codeinput){
          bari.style("fill-opacity","0.5");
          bari.append(tip.show).offset([20,0]);
        }
        else{
          bari.style("fill-opacity","0.9"); 
        }
    });
  }
​
  function change() {
    clearTimeout(sortTimeout);
​
    // Copy-on-write since tweens are evaluated after a delay.
    var x0 = x.domain(data.sort(this.checked
        ? function(a, b) { return b.grade - a.grade; }
        : function(a, b) { return d3.ascending(a.code, b.code); })
        .map(function(d) { return d.code; }))
        .copy();
​
    svg.selectAll(".bar")
        .sort(function(a, b) { return x0(a.code) - x0(b.code); });
​
    var transition = svg.transition().duration(2000),
        delay = function(d, i) { return i * 50; };
​
    transition.selectAll(".bar")
        .delay(delay)
        .attr("x", function(d) { return x0(d.code); });
​
    transition.select(".x.axis")       
        .selectAll("g")
        .delay(delay);
  }
  
  barra.exit().remove();
};
 
update(grades);
​
</script>
    