VI2

Name: Meysam Abolghasemi

Part 1 - Tableau

Comments about working with Tableau:

It is much easier to work with Tableau compared to R and D3.
Although Tableau has all the functionalities pre-defined for you, but it is obvious you are limited to these function and you don't have the flexibility to implement very complex idioms.

Graph 1: bar chart of passing yards per player (best displayed as a horizontal bar chart), with conference mapped to color

Insight: The bar chart shows that CUSA and American Conferences have the largest passing yards.

Tableau image

Graph 2: scatterplot of 2 interesting variables, with conference mapped to color

Insight: The scatterplot shows there is no correlation between passing yards and passer rating.

Tableau image

Graph 3: one other interesting graph that uses a derived variable

Insight: The bar chart illustrate that MWC and PAC-12 conferences have the highest passing attempts.

Tableau image

Part 2 - D3

Three things I learned in this chapter:

How to create SVG tags
How to use anonymous functions to pass the values of the dataset to each attributes or text
How to play around with data and define algorithms in order to generate more dynamic look & feel like changing the rectangle colors based on values.

<!DOCTYPE html>
<html>
  
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
</head>

<body>
	<script>
		//Width and height
			var w = 500;
			var h = 100;
			var barPadding = 1;
			
			var dataset = []; //Initialize empty array
					for (var i = 0; i < 25; i++) { //Loop 25 times
						var newNumber =  Math.floor(Math.random() * (25 - 5 + 1)) + 5;
						dataset.push(newNumber); //Add new number to array
					}
			
			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

svg.selectAll("rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length);
			   })
			   .attr("y", function(d) {
			   		return h - (d * 4);
			   })
			   .attr("width", w / dataset.length - barPadding)
			   .attr("height", function(d) {
			   		return d * 4;
			   })
			   .attr("fill", function(d) {
					return "rgb(0, 0, " + (d * 10) + ")";
			   });

svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d;
			   })
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
			   })
			   .attr("y", function(d) {
			   		return h - (d * 4) + 14;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "white");
	</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js