Grades Vis

What Dataset Type: Table

Why Action: Present Target: Distribution

How Arrange: Order and Align

This Vis has lines like marks because it is the best way to present cuantitative and ordered values. This mark allow us to easily compare different values with just a look. The horizontal bars let us to see the categorical values without problem on the y axis. In addition, the codes are shown ordered to avoid extra work to the user.

<!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: MidnightBlue  ;
}

.y.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: 40, bottom: 30, left: 60},
    width = 940 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .1);

var x = d3.scale.linear()
    .range([0, width]);

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) {if (d.grade > 3.5){
    return "<strong>Grade:</strong> <span style='color:Chartreuse '>" + d.grade + "</span>";}
   {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);

d3.tsv("data.tsv", type, function(error, data) {
  
  data.sort(function(a,b) {return a.code - b.code;});
  
  y.domain(data.map(function(d) { return d.code; }));
  x.domain([0, d3.max(data, function(d) { return d.grade; })]);
  
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")
      .attr("x", width+32)
      .attr("dx", ".1em")
      .style("text-anchor", "end")
      .text("Grade");

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("y", 0)
      .attr("dy", ".5em")
      .style("text-anchor", "end")
      .text("Code");

svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr(function(d) { return width - x(d.grade); })
      .attr("width", function(d) { return x(d.grade); })
      .attr("y", function(d) { return y(d.code); })
      .attr("height", y.rangeBand())
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)

});

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