Homework #3 Visual Analytics

Built with blockbuilder.org

Homework #3

Juan Sebastian Martinez. Cod: 201125846

What, Why and How Analysis:

What?

In this case, data is presented as a set of tuples with the structure {code:[code] , grade:[grade]} where every grade is identified by it's corresponding student code. We can think of this structure in a more abstract form as if it was a table, with rows that represent student codes and one single column that contains the grade obtained.

Why?

For this visualization, the main task to accomplish is to present the student grades. In addition, we can propose the task of discovering the extreme values of the set of grades and discover other features, like identifying the distribution of distances between students and the average grade of the class, by dividing them in categories that represent how far away from the average are their grades, in terms of standard deviations.

How?

For the tasks described above, we need to separate data to compare and discover the extreme values of the set, later, we need to map data into colors to represent the grade obtained for each student and to identify if the grade is close to the average value.

Decisions for visualization

For this visualization, the tasks deal with numerical or ordered data, as we are trying to present the grades for all the students. With this purpose, it is known that positioning the grades on their common scale is a very effective magnitude channel to present the data. For this purpose, the X axis is used as the common scale from 0 to 5 for all the grades, and the Y axis is used to locate the student codes.

To compare the grades, color is used as another channel for visualization. As we know, color hue is a very effective channel for categorical attributes. In this case, we want to identify the extreme values and group data in categories divided by standard deviations from the average grade. To accomplish this, all points have different colors according to the scale that follows:

The green point represents the maximum grade
The red point relates to the minimum grade
The blue points are the grades that fit within one standard deviation of the average grade
The orange points are the grades that fit within two standard deviations from the average grade.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .dot {
           stroke: #000;
         }
    div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 100px;					
    height: 60px;					
    padding: 2px;				
    font: 16px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}
  </style>
</head>

<body>
  
  <script>
    //Data:
    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}
];
    
   
    
    //Width and height of workspace
    var width = 960;
    var height = 500;
    
    //Margins for the graph
    var margin = {top: 30, right: 20, bottom: 30, left: 100}
    var effWidth = width - margin.right - margin.left;
    var effHeight = height - margin.top - margin.bottom;
        
    //codes as strings and ranges for Y scale
    var codes = [];
    var ranges = [];
    var space = effHeight/grades.length;
    for(i in grades){
      ranges.push(space*(i));
      codes.push(grades[i].code.toString());
    }    
    
    //Compute average grade
    var average = 0;
    for (i in grades){
     average += grades[i].grade;
   }
    average = average/grades.length
    
    //Compute the standard deviation
    var variance = 0;
    for (i in grades){
     variance += (grades[i].grade - average)^2
   }
    var sigma = Math.sqrt(variance/grades.length);
    
    //Create scales
    var x = d3.scaleLinear().domain([0, 6]).range([0, effWidth]);
    var y = d3.scaleOrdinal().domain(codes).range(ranges);
    
    //SVG object
    var svg = d3.select("body").append("svg")
        .attr("width",width)
        .attr("height", height).append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");
    var xAxis = d3.axisBottom(x);
    var yAxis = d3.axisLeft(y);
    
    
    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + effHeight + ")")
        .call(xAxis);

// Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
    
    // Draw the y Grid lines
    svg.append("g")            
        .attr("class", "grid")
        .call(make_y_axis()
            .tickSize(-effWidth, 0, 0)
            .tickFormat("")
        );
    
    //Draw grades
    svg.selectAll(".dot").data(grades).enter().append("text")
      .attr("x",function(d){return x(d.grade) + 10;})
      .attr("y",function(d){return y(d.code.toString())-2;})
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill","black")
      .text(function(d){return d.grade.toString()})
    	.transition()
    	.duration(1000)
    	.delay(1000)
    	.each(positionText);
   
    //Draw circles
    svg.selectAll(".dot")
      .data(grades)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 10)
      .attr("cx", function(d) { return x(d.grade); })
      .attr("cy", function(d) { return y(d.code.toString()); })
      .style("fill", function(d) {
        if(d.grade == d3.max(grades, function(d){return d.grade}))
          return "#5be948";
        else if(d.grade == d3.min(grades, function(d){return d.grade}))
          return "#e41f25";
        else{
          if(Math.abs(d.grade-average) <= sigma)
            return "#51aeff";
          else if (Math.abs(d.grade-average) <= 2*sigma)
            return "#feb943";
          else
            return "#d14dfe";
      
        }
      })
     	.on("mouseover", function(d) {		
            div.transition()		
                .duration(200)		
                .style("opacity", .9);		
            div	.html("Student: "+ d.code + " Grade: " +d.grade)	
                .style("left", (d3.event.pageX) + "px")		
                .style("top", (d3.event.pageY - 28) + "px");	
            })					
        .on("mouseout", function(d) {		
            div.transition()		
                .duration(500)		
                .style("opacity", 0);	
        })
      .transition()
    	.duration(1000)
    	.delay(1000)
    	.each(positionCircles);
    
    //Position the circles relative to the grade
    function positionCircles()
    {
      var circle = d3.select(this);
      circle = circle.attr("cx",0)
      .transition()
      .duration(1000)
      .attr("cx",function(d){return x(d.grade)});
    }
    
    //Position text relative to the grade
    function positionText()
    {
      var text = d3.select(this);
      text = text.attr("x",0)
      .transition()
      .duration(1000)
      .attr("x",function(d){return x(d.grade) + 10});
    }

// function for the y grid lines
      function make_y_axis() {
        return d3.axisLeft(y)
            .ticks(5)
      }
    
    // Define the div for the tooltip
    var div = d3.select("body").append("div")	
        .attr("class", "tooltip")				
        .style("opacity", 0);
 
  </script>
</body>

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