manojchandrak/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
                           Manoj Chandra Kompalli

Tableau 1

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

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

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.

  
## index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Sample D3 chart</title>
		<script type="text/javascript" src="http://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>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sample D3 chart</title>
	<script type="text/javascript" src="http://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>