emilioalvarado/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
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

  
## data.tsv

          
            code
            grade

            
              23802620
              4.85

            
              23802825
              4.865

            
              23801894
              3.24

            
              23802926
              5

            
              23800661
              3.19

            
              23800768
              3.98

            
              23800972
              4.89

            
              23801922
              3.73

            
              23805498
              4.795

            
              23805913
              4.85

            
              23800311
              2.81

            
              23806395
              4.72

            
              23808850
              3.85

            
              23802872
              2.16

            
              23802105
              4.715

            
              23809880
              4.92

            
              23802056
              4.48

            
              23807897
              5.2

            
              23807916
              5

            
              23801962
              3.62

            
              23808246
              4.61

            
              23802600
              0.11

            
              23808311
              4.7

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

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

<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	code	grade
	23802620	4.85
	23802825	4.865
	23801894	3.24
	23802926	5
	23800661	3.19
	23800768	3.98
	23800972	4.89
	23801922	3.73
	23805498	4.795
	23805913	4.85
	23800311	2.81
	23806395	4.72
	23808850	3.85
	23802872	2.16
	23802105	4.715
	23809880	4.92
	23802056	4.48
	23807897	5.2
	23807916	5
	23801962	3.62
	23808246	4.61
	23802600	0.11
	23808311	4.7
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.chart rect {
	fill: lightblue;
	}

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

	<svg class="chart"></svg>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	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>