VA

================================================

Diclaimer: This homework is not yet finished but due to bad time management I must have turn it in like this, it will be completed in the future.

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.

forked from jcamilort's block: VA

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

var myData = [
	{"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}
];

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

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

var colScale = d3.scaleOrdinal(d3.schemeCategory20);
  
var BAR_WIDTH = 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 + ")");

update(myData);
    
  </script>

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