VA

================================================ What do we have?

In this exercise we will need to show the grades of a Visual Analytics course. The grades to be visualized are stored in the variable 'grades' in the following format: 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} ];

================================================ Analysis and decisions made

It is common for grades in the academic environment to show the typical stadistics of a data group. Average, mean, deviation and mode. Besides it is also helpful to show wich is the higher and the lower grade.

As this dataset is a register for each student for a single exam, it is necessary to be able to visualize each register, which implies an instance of the channel and mark used for each grade as well as group statistics as a whole.

The best diagram for this case could be an interactive bar graph that allows to rearrange students by code, so it's easier for them to find themselves, and by grade to make group analysis. There are no significant categories of the entities, although a limit marker could be useful to show which students passed the exam and which failed.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    rect {
  		fill: steelblue;
		}
  </style>
</head>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 200 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var wScale = d3.scaleLinear()
	.range([0, width]);

var colScale = d3.scaleOrdinal(d3.schemeCategory20);
  
var BAR_HEIGHT = 20;

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

var xAxis = svg.append("g")
	.attr("class", "axis x--axis");
  
  
function update(myData, attr) {

var res="https://api.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=f11688d9fc777acfb94a22ddd0077381&extras=count_views%2C+count_faves%2C+count_comments&format=json&nojsoncallback=1&api_sig=db63d57735ecc57c074f4c962f21ae31";

d3.json(res, function(err, data) {
	if(err) {
  	console.err(err);
    alert(err);
    return;
  }
  
  data.photos.photo.forEach(function (d) {
  	d.count_views = +d.count_views;
    d.count_faves = +d.count_faves;
    d.count_comments = +d.count_comments;
  })
  console.log(data);
  update(data.photos.photo, "count_views");
});

</script>

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