CS 725 Information Visualization - VI2

Christos Tsolakis

Tableau Charts:
- The PAC conference has the most players in the top ten and CUSA & American conference, although on the top of the list of the players, they have only 1 in the top ten.
- Most of the Rushing Attempts are rewarding by a small amount of yards. However, there is a considerable amount of backtracks.
- Oregon has the best ratio, although in average, teams in the SEC conference have better results.
List of 3 things that you learned while working through the D3 tutorial
- Using the class rect instead of simple div's for the barchart made things quite easier.
- The coordinate system in an svg file is inverted with respect on what you expect to see.
- Configuring text position is by far more flexible than in Tableau.
List of 2 comments that you have about using Tableau
- Creating the 1st bar chart was by far easier in Tableau than it was in R.
- Tableau gives you a rapid way of visualizing and exploring your data but on the other hand if you want to customize your plot you better redo it in D3.

forked from ChristosT's block: CS 725 Information Visualization - VI1

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

<body>
  <script>
   console.log("you are now rocking with d3", d3);
    
   var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 11, 17, 16, 18, 23, 25 ];
    
    //Width and height & Padding
    var w = 500;
    var h = 100;
    var barPadding = 1;
    
    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) + (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")
     		.attr("text-anchor","middle");
       
   </script>
</body>

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