Visualization 2

                       Manoj Chandra Kompalli

Tableau 1 R image Insight from Tableau chart 1 : The chart gives a detailed view of the passing yards stat of each player. All players are sorted in alphabetical order which makes it easy to pick a player, tell his passing yards and tell which conference he belongs to. Tableau 2 R image Insight from Tableau chart 2 : The scatter plot gives a positive corelation between passing yards and passing attempts. Positive correlation implies when more passing attempts are made more passing yards have resulted. We can identify the outliers .Here, we have a single outlier from pac-12 which means that a school belonging to pac-12 conference has more number of passing attempts and passing yards

Tableau 3 R image Insight from Tableau chart 3 :

We have a side by side bar graph representing conferences on x axis and completed passes, Rate(derived attribute ) on y axis .We can observe that completed passes and rate are directly proportional. In other words they are positively corelated.

Comments about Tableau

1.Tableau is a drag and drop data visualization which is very user friendly and easy to learn.

2.Importing from excel workbook is easy and we can copy our work from one dash board to other with ease

What I learnt from D3

1.D3 is a visualization tool just like R and Tableau which runs on a browser

2.D3 is a javascript library.It does databinding to DOM elements .

3.D3 is used with SVG which is now compatible on modern browsers.

4.D3 could be used in web applications because the graphs render pretty fast.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Sample D3 chart</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.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 = [2,4,7,10,14,19,22,18,16,13,9,5,3 ];
			
			//Creating  SVG variable
			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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js