VI2 - James Eanes

Part 1 - Tableau:

Bar chart of passing yards per player (best displayed as a horizontal bar chart), with conference mapped to color
- Insight: this is incredibly easy to do with an off-the-shelf tool (i.e., a few mouse clicks) versus the hours it took to learn enough about R to make this same graph!

tableau_barchart_passingyds_confcolor

Scatterplot of 2 interesting variables, with conference mapped to color
Insight: I chose to plot pass attempts and interceptions to determine what correlation might exist between them and what outliers might exist; as one might expect, those with the most interceptions also had relatively high pass attempts; however, there is one passer who clear surpasses everyone in interceptions (22, with about 440 passes), and there is one with a remarkable 8 interceptions with 550 passes. Good plot for finding standouts.

tableau_scatterplot_passattempts_vs_interceptions

One other interesting graph that uses a derived variable
Insight: I chose to plot the sum of passing and rushing yards per passer; this gives a quick view of the most capable “threats” in terms of both their arms and legs, with about 7 real stand-outs.

sumrushingpassing

Comments on using Tableau:

It's very easy to use for simple charts, but takes some time to get used to the layout.
I had to search around to figure out how to get the sum of two measures; turned out I needed to right-click on one of the measures and create a "Calculated Field", which wasn't the most obvious of ways to get there.

What I learned in this part of the D3 tutorial:

Internet Explorer 8+ doesn't support SVG...seems bad...
SVG syntax is apparently based on (or at least very similar to) XML
There are multiple ways to represent just about everything, but the "chaining" approach really helps when adding lots of attributes (instead of typing in values as attributes on a DOM element).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 SVG Tutorial</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", "sans-serif")
   			.attr("font-size", "11px")
   			.attr("fill", "white")
        </script>
    </body>
</html>

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