Visualization Implementation (VI2)

Name: Erika Siregar

Assignment : Visualization Implementation (VI2)

Course: Information Visualization (CS725)

Semester : Spring 2015

Working through the examples from Scott Murray's tutorial at http://alignedleft.com/tutorials/d3/

Built with blockbuilder.org

My Tableau Charts:

1. Bar chart of passing yards per player (best displayed as a horizontal bar chart), with conference mapped to color

passing_yards_player_conf2

The graph above describes the passing yards per player by conference. Overall, we can see that the passing yards for each player in every conference varied significantly. American and CUSA are the conferences with the most varied data. Whereas Sun Belt has a relatively homogenous data.

2. Scatterplot of Passing TD and Passing Yards

scatterplot2

This graph depicts the correlation between attribute "Passing TD" and "Passing Yards". If the plots forming a diagonal line, then there is a correlation between both attributes. On the other hand, if the plots do not form any pattern, then we could say that there is no correlation between the attributes. From graph above, we can see that there is a positive correlation between Passing TD and Passing Yards. So, we could say that the increase of Passing TD value will also affect the increase of Passing Yards value.

3. Average Passing Yards per Each Conference

avg_pass_yards

The graph above illustrate the average passing yards in each conference. Overall, from the graph we can see that the average passing yards between each conferences do not really varied. Pac12 has the highest average passing yards, while American has the lowest average passing yards.

Comments about Tableau:

Tableau is easy to use and learn. User does not need any knowledge in programming or coding. We can easily find the manual and tutorial on http://www.tableau.com/learn.
Compare to Excel, Tableau is much more better. It offers more option for data visualization. Tableau also switch the way user create the graph. With tableau, user starts with the data that have. After importing data, Tableau will automatically group it into 2 categories: Dimensions (categorical data) and measures (quantitative data). There is also a learning aspect when using Tableau. There are certain rules that a user should follow to create a particular graph. For example, when user want to create a "packed buble" chart, Tableau will inform that the user's data must consist of 1 or 2 measures and at least 1 dimensions.

3 things that I learned while working through the D3 tutorial:

D3 "attach/bind" data into DOM (document object model). The data will be bound when method enter() is called.
We could create simple barchart with D3 by using 2 different method: using "div" or "svg".
D3 works by manipulating DOM (element), such as: setting the height, width, x, y, color, and background color.

<!DOCTYPE html>
<html>
<head>
	<title> Making Bar Chart with SVG </title>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
</head> 
<body>
	<h1> Making a Barchart </h1>
	<script type="text/javascript">
		//Width and height
		var w = 944;
		var h = 400;
		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 yScale = h / d3.max(dataset)
		//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);  //Bar width of 20 plus 1 for padding
			})
			.attr("y", function(d) {
				return h - (d*yScale);  //Height minus data value
			})
			.attr("width", w / dataset.length - barPadding)
			.attr("height", function(d) {
				return d*yScale;
			})
			.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 * yScale) + 15;
			})
			.attr("font-family", "sans-serif")
			.attr("font-size", "11px")
			.attr("fill", "white")
			.attr("text-anchor", "middle");
	</script>
</body>
</html>

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

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