Ancient Histogram

This example displays a histogram from data of studen's grades:

Original code from Bostock's Histogram was modified for display data from a vector in the code.

What? The type off dataset is Table. The type of data is quantitative and categorical.

Why? Action: Present. Target: Attributes: One (grades). Distribution of the grades. Present distribution of the grades.

How?

Marks: Lines.

Chanels: Position (Vertical y horizontal), colors (hue).

Encode: Align and Map.

Explanation: The task of this display is to present the distribution of grouped notes. Why? This is done instead of comparing each of the notes, is to check a group of them.

For this a histogram showing the ranges of notes grouped by number of students is used. The order of the intervals ranging from the smallest to the largest.

One of the advantages is that it allows us to see, without thinking too that there are 3 students have notes below 3.0, and a student had a higher note to 5.0 (In this case a note was placed, as it is presumed that the note range is between 0 and 5.0).

color channel is used because it is assumed that the person possessing notes below 3.0, have failed.

Another channel is used (vertical and horizontal) to indicate that the more to the right are higher and higher in the vertical is greater the number of students

forked from StewartNoyce's block: Ancient Histogram

forked from anonymous's block: Ancient Histogram

<!DOCTYPE html>
<meta charset="utf-8">

<style>

body {
  font: 10px sans-serif;
}

.bar rect {
  fill: #31a354;
  shape-rendering: crispEdges;
  stroke: #a1d99b;
}

.bar text {
  fill: #fff;
  font-weight: bold;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.histogram-title {
    font-size: 2em;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

// A formatter for counts.
var formatCount = d3.format(",.0f");

var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

d3.json("histo.json", function(error, histodata) {

// read in histogram data that was generated previously with python numpy
    /*for (i=0; i<histodata.division.length; i++) {
        d = [];
        d['x'] = parseFloat(histodata.division[i]);
        d['y'] = parseInt(histodata.count[i]);
        data.push(d);
    }*/
  	var data1 =	[[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]];
  
  	var maxd = 0;
    var mind = 0;
    var d, dataRes=[0,0,0,0,0,0,0], data = [];
  
    for (i=0; i<data1.length; i++) {
      	if(parseFloat(data1[i][1])<mind)
          {
            mind = parseFloat(data1[i][1]);
          }
      	if(parseFloat(data1[i][1])>maxd){
          maxd = parseFloat(data1[i][1]);
        }
        d = [];
        d['x'] = parseFloat(data1[i][1]);
        d['y'] = parseInt(data1[i][0]);
        data.push(d);
      	
      	if(parseFloat(data1[i][1])<=1){
          dataRes[0]=dataRes[0]+1;          
        }else if(parseFloat(data1[i][1])>1 && parseFloat(data1[i][1])<=2){
          dataRes[1]=dataRes[1]+1;
        }else if(parseFloat(data1[i][1])>2 && parseFloat(data1[i][1])<=3){
          dataRes[2]=dataRes[2]+1;
        }else if(parseFloat(data1[i][1])>3 && parseFloat(data1[i][1])<=4){
          dataRes[3]=dataRes[3]+1;
        }else if(parseFloat(data1[i][1])>4 && parseFloat(data1[i][1])<=5){
          dataRes[4]=dataRes[4]+1;
        }else if(parseFloat(data1[i][1])>5){
          dataRes[5]=dataRes[5]+1;
        }
    }
  
		var dataH =[];
  	for (i=0; i<dataRes.length; i++) {
     		d = [];
        d['x'] = i;
        d['y'] = parseInt(dataRes[i]);
        dataH.push(d);
    }
    
    var w = (maxd-mind)/5.1;

var x = d3.scale.linear()
        .domain([0, d3.max(dataH, function(d) { return d.x; })])
        .range([0, width ]);
  
  
    
    var y = d3.scale.linear()
        .domain([0, d3.max(dataH, function(d) { return d.y; })])
        .range([height, 0]);

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

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 + ")");

var bar = svg.selectAll(".bar")
        .data(dataH)
      .enter().append("g")
        .attr("class", "bar")
        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

bar.append("rect")
        .attr("x", 1)
        .attr("width", x(w) - 1)
    		.style("fill", function(d) { if(d.x < 3.0){ return "red";} else{return "blue"}  })
        .attr("height", function(d) { return height - y(d.y); });

bar.append("text")
        .attr("dy", ".75em")
        .attr("y", 6)
        .attr("x", x(w) / 2)
        .attr("text-anchor", "middle")        		
        .text(function(d) { return formatCount(d.y); });
  
  	bar.append("text")
        .attr("dy", ".75em")
        .attr("y", -15)
        .attr("x", x(w) / 2)
        .attr("text-anchor", "middle")
    		.style("fill", "Black")
    		.text(function(d){if(d.x > 4.0){ return "Aja y tu qué?";}})

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
    
    svg.append("text")
        .attr("class", "histogram-title")
        .attr("y",  80)
        .attr("x", 300)
        .attr("text-anchor", "end")
        .text(histodata.title);
    });

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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