Mrajyalakshmi/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Rajyalakshmi Mukkamala
Visualization Implementation 2 (VI2)
##Tableau
##1) Bar chart of passing yards per player,with conference mapped to color

Players are grouped by conference
##2)Scatterplot of 2 interesting variables, with conference mapped to color

Scatterplot of rushing touch down vs.passing touch down to observe the correlation between the between the attributes.
##3)One other interesting graph that uses a derived variable

Scatterplot for average rushing attempts vs. passing attempts.Details are visualized for school and conference.
##Insight gained from each of the 3 Tableau chart
1.Visualization of passing yards per player grouped by conference
2.Correlation of Passing and Rushing touch down statistics.
3.Average of passing attempts and average of rushing attempts of players of a school in a conference.
##Comments on Tableau
1.It provide a easy-to-use drag and drop interface that can help you quickly turn your data into business insights.
2.Tableau connects easily to nearly any data source, be it corporate Data Warehouse, Microsoft Excel or web-based data and allows
instantaneous insight by transforming data into visually appealing and interactive visualisations.
##Working through the D3 tutorial
1.Translating data ino color by using rgb().
2.Using SVG to add SVG elements such as text,allignment,draw shapes.
3.There is a learning curve to javascript.

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bar chart with value labels</title>
		<script type="text/javascript" src="../d3/d3.v3.min.js"></script>
		<style type="text/css">

		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.js"></script>
<script type="text/javascript">
			//Width and height
			var w = 500;
			var h = 150;
			var barPadding = 1;

			var dataset = [ 7, 10, 12, 18, 23, 27, 21, 17, 14, 11,
							8, 12, 13, 21, 19, 15, 16, 20, 24, 25 ];

			//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(22, 199, " + (d * 10) + ")";//Color definition
			   });

			svg.selectAll("text")//Adding text elements to svg
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d;
			   })
                           .attr("text-anchor", "middle")//Center text horizontally
			   .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>Bar chart with value labels</title>
	<script type="text/javascript" src="../d3/d3.v3.min.js"></script>
	<style type="text/css">

	</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.js"></script>
	<script type="text/javascript">
	//Width and height
	var w = 500;
	var h = 150;
	var barPadding = 1;

	var dataset = [ 7, 10, 12, 18, 23, 27, 21, 17, 14, 11,
	8, 12, 13, 21, 19, 15, 16, 20, 24, 25 ];

	//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(22, 199, " + (d * 10) + ")";//Color definition
	});

	svg.selectAll("text")//Adding text elements to svg
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) {
	return d;
	})
	.attr("text-anchor", "middle")//Center text horizontally
	.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>