Visualization Implementation (VI2)

Abhishek Polavarapu

1.This bar chart gives the information regarding the passsing yards per player and each conference is assigned a colour.

R image R image

2. 
This Scatter plot gives the information regarding Passing touchdowns vs Russing Touchdowns for different conferences.

R image

3.
This chart gives the total number of touchdowns for each conference and the size of the circle varies with the total number of touchdowns.

R image

4.
   List of things learnt from tableau
   a. The software can automatically divide the given dataset into dimensions and measures.
   b. Unlike R there is no need to write much code in the tableau which makes it easier to use.

5. 
   3 things that I learnt from D3 are
   a. D3 in javascript is like bootstrap in CSS
   b. By using D3 we can make things to scale dynamically.
   c. The elements created in using D3 can be customized using CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>D3 test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

</head>
    <body>
	<script type="text/javascript">
	var w = 500;
    var h = 100;
	var barPadding = 1;
	
	var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
							
	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", "timesnewroman")
			   .attr("font-size", "14px")
			   .attr("fill", "white");
			   </script>
    </body>
</html>

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