Visualization Implementation - VI2

Surbhi Shankar 01012632

Q 1. This Bar Graph gives a statistics of count of passing yards per player. Also, we have used mapped conferences to colors in order to represent players along their corresponding conferences.

![R image] (http://s27.postimg.org/gdf0lnlcj/VI2_1.png "R image")

Q 2. Two interesting things that I chose to represent in this scatterplot are "Players" and "Pass Completions", along with conferences mapped to colors. This scatterplot gives the comparison of all the players with respect to the number of passes completed by them.

![R image] (http://s29.postimg.org/lhvjv34tz/VI2_2.png "R image")

Q 3. This is a very interesting graph where we are deriving the average of passing efficiency rate (Rate) with respect to conferences and plotting a bar graph.

![R image] (http://s14.postimg.org/dz8d3eejl/VI2_3.png "R image")

Q 4. 2 comments about Tableau

One feature that I liked about Tableau is, it is not fussy about importing data. It is easy to upload data. Also, drag and drop option used makes it easier for analysis.
There is no need of exclusive knowledge required for generating a report or statistics of any given dataset.

Q 5. 3 things learned while working with D3 tutorials

Custom function was the most interesting one for me. The way we can play with colors on the bar graphs is very fascinating.
The SVG element which is a text - based image format. We can vary height, width, different shapes, colors for those shapes etc by writing just a few lines of code.
The way we can position the data on the bar graph using the length of the dataset is also very interestion. We use "x" and "y" axis references to do this.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3 Demo: Making a bar chart with value labels!</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		<style type="text/css">
					
		</style>
	</head>
	<body>
		<script type="text/javascript">

//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.round(Math.random() * 30);  //New random integer (0-30)
				dataset = dataset.concat(newNumber); //Add new number to array
			}

//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("x", function(d, i) {
			   		return i * (w / dataset.length) + 5;
			   })
			   .attr("y", function(d) {
			   		return h - (d * 4) + 15;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "white");

</script>
	</body>
</html>

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