Tarea 3 Visual Analytics

I choosed present the data using a simple bar chart because it is the simplest way to do it, I drawed the bars one down of other, in order to make the visualization more interesting (not the ordinary simple bar chart) though, and also I have added a simple transition to animate the visualization. I have used the hue color to give intuitiveness to the visualization.

Analysis What, Why, How

What Datasets dataType: item dataSet: table Attributes cuantitative Why: Actions Present Summarize Targets Distribution How: Encode Align Marks Lines Channels verticial position Color hue

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

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

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

.x.axis path {
  display: none;
  }
  
.title{
  font-size: 200%;
  color: #000000;
  font-weight: 100;
  text-align: center;
}
html {
  font-family:
   "HelveticaNeue-Light",
   "Helvetica Neue Light",
   "Helvetica Neue",
    Helvetica,
    Arial,
    "Lucida Grande",
    sans-serif;
}
</style>
<body>
  <h3 class="title">Notas por estudiantes</h3>
  <div id="chart"></div>
<script src="//d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script>

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}
];

var margin = {top: 20, right: 100, bottom: 30, left: 100},
    width = 800 - margin.left - margin.right,
    height = 800 - margin.top - margin.bottom;

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

var colScale = d3.scaleOrdinal(d3.schemeCategory20c);
  
var BAR_HEIGHT = 20;
  
 var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip")
  	.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica 				Neue', Helvetica, Arial, 'Lucida Grande', sans-serif")
  	.style("font-size",200+'%')
 		.style("color","#000000");

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.select(this)
			.attr("width", function(d) { return wScale(d.grade); })
      .attr("height", function(d) { return height-100 })
			.transition()
			.duration(500)
			.attr("width", function(d) { return wScale(d.grade)+10; })    
      .attr("height", function(d) { return height })
	}
  
	function onMouseOut(d) {
    tooltip.style("visibility", "hidden");
	}

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js