VI2

#Juliette Pardue

##Tableau Insights

Passing Yards Per Player: The conference does not have any apparent effect on the number of passing yards.
Passing Attempts VS Completions: The more attempts that a player makes, the more completions they have.
Average Yards Per Attempts: The average yards per passing attempt may be misleading when trying to rank players because rushing yards is not considered. This is apparent when the players are sorted with average yards per total attempts while the average yards per passing attempt and average yards per rushing attempt are displayed along side. The average yards per passing attempt does not descend like average yards per total attempts.

##Tableau Comments

For figure 3, I originally tried to do a side-by-side horizontal bar chart, but there were two problems. The figure was very long since there were 3 bars on top of each other for each player. Also, the way Tableau does side-by-side bar charts is by grouping the measures together to form one new measure. I could not find any way to sort the players by a particular measure since the three measures were all grouped together. I tried to look for a solution online and the only one I found was "hacky." It involved using a new measure from the measure that you want to sort the data on and then sorting based on that new measure, and then hiding the new measure that the players were sorted on.
I really like the drag and drop interface, it made the task of mapping conference to color easy. The "Show Me" interface is also very helpful because it lists how many dimensions and measures you need for a particular graph.

##Learned from D3 Tutorial

How to create dynamically sized graphics based on the size of the dataset.
How to use hue as a method of encoding based on the data values.
How to add data labels to the graphic for each item.

##Tableau Figures

Tableau Figure1 Tableau Figure2 Tableau Figure3

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<body style="text-align:center;margin-top:25px;">
<script src="https://d3js.org/d3.v3.min.js"></script>
<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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js