Exam Grades - Horizontal Bar Chart

About

This bar chart is constructed from a TSV file storing the exam grades of students in an imaginary Visual Analytics class. The next section presents the visualization analysis based on Tamara's Analytics framework.

What, Why and How Analysis

What: The dataset is formed by a table, with an ordinal attribute (the student code) and a quantitative attribute (the exam's grades).

Why: The following are the two main tasks this viz is made for:

Present (action) the distribution (target) of exam grades among the whole class.
Discover (action) special features (target) as the number of students who failed the exam.
Identify the exam grade for a specific student.

How: I used the line as the mark and the length as the channel. The visualization presents the data sorted by the exam grades, in descending order.

Decisions

1. I used the line mark and the channel length to represent the quantitative attribute exam notes, since the length is the best positioned channel in perception assessments of experts.

2. The data is sorted by the score on the exam, which let identify the highest and the lowest score, and know how many people lost the test. You may find outliers too, like the 5.2 value (I assume the exam grades range goes from 0.0 to 5.0).

3. The color channel was not used to represent the ordinal attribute of the students, because the number of students (23) need many hues or scales luminescence, which does not really contribute in the representation. The student code label on each data was used instead, which let identify the score obtained for each student.

What was not so well?

The student code label is not visible to a very small bar (eg 0.11).

The channel color may be useful to mark in red scores under 3.0, to identify first glance students failed the exam.

......................................................................................

forked from mbostock's block: Let’s Make a Bar Chart

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .chart rect {
    fill: lightblue;
  }

.chart text {
    fill: black;
    font: 10px verdana;
    text-anchor: end;
  }
</style>

var width = 430,
    barHeight = 20;

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

var chart = d3.select(".chart")
    .attr("width", width);
  
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 200 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  
var svg = d3.select("#chart").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 + ")");

d3.tsv("data.tsv", type, function(error, data) {
  y.domain(data.map(function(d) { 
    return d.code; }));
  x.domain([0, d3.max(data, function(d) { 
    return d.grade; })]);

data.sort(function(a, b) {
    return a.grade - b.grade;
  });
  
  chart.attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { 
      return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
      .attr("width", function(d) { return x(d.grade); })
      .attr("height", barHeight - 2);
  
  bar.append("text")
      .attr("x", function(d) { return x(d.grade) + 0; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.grade; });
  
  bar.append("text")
      .attr("x", 65)
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.code; });
  
});

function type(d) {
  d.grade = +d.grade; // coerce to number
  return d;
}

</script>

https://d3js.org/d3.v3.min.js