hungvietdo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Student


Hung Do; CS725:Information Visualization; Spring 2016;
Computer Science; Old Dominion University


My notes:

Two comments from tableau:


It is helpful to follow a tutorial about tableau. I found one from Lynda.com (ODU students can access at no cost).
There is no coding involved in Tableau but there are a lot of functions to visualize data.


Three comments from D3:


In D3, we can declare format variables at the beginning to help coding easily.
We can use SVG to draw many beautiful shapes.
".attr" in D3 helps alot when decorating a graph.


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


Q: What insight does it provide?
A: We can see and compare passing yards of each player in different conference (group by color)


2. Scatterplot of two interesting variables, with conference mapped to color


Q: What insight does it provide?
A: We can discover some interesting information such as player with higher passing-attempt likely has higher passing-yards.


3. One other interesting graph that uses a derived variable


Q: What insight does it provide?
A: There is a relation between rate and passing-yards. Players above the trend line are considering better as they have high rate and high passing-yards.


## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
        </script>
        <style type="text/css">
			div.bar {
			display: inline-block;
			width: 30px;
			height: 127px;	/* Gets overriden by D3-assigned height below */
			margin-right: 3px;
			background-color: red;
			}
         svg .pumpkin {
    fill: yellow;
    stroke: orange;
    stroke-width: 5;
 }
		</style>
    </head>

	<body>
		     <script type="text/javascript">
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
    	w = 960 - margin.left - margin.right,
    	h = 500 - margin.top - margin.bottom;

          var barPadding = 2;  // <-- New!
          var ratio = 10;
          var titlePadding = 30;
     			var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height",h + titlePadding * 2);

          var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

          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 * ratio ) ;})
             .attr("width", w / dataset.length - barPadding)
             .attr("height", function (d) {return d * ratio ;})
          	 .attr("fill", function(d) {
    							return "rgb(0, " + 200 + ", " + (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 * ratio) + 15;})
              .attr("font-family", "sans-serif")
              .attr("font-size", "11px")
              .attr("fill", "white")
              .attr("text-anchor", "middle");

           		//little more practice on text in D3 and svg
              svg.append("text")
              .attr("y",h + titlePadding )
              .attr("x",w / 2)
              .text("Barchar tutorial made by Hung Do")
              .attr("font-size", "26px")
              .attr("fill", "blue")
              .attr("text-anchor", "middle");

      	 </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Test</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
	</script>
	<style type="text/css">
	div.bar {
	display: inline-block;
	width: 30px;
	height: 127px; /* Gets overriden by D3-assigned height below */
	margin-right: 3px;
	background-color: red;
	}
	svg .pumpkin {
	fill: yellow;
	stroke: orange;
	stroke-width: 5;
	}
	</style>
	</head>

	<body>
	<script type="text/javascript">
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	w = 960 - margin.left - margin.right,
	h = 500 - margin.top - margin.bottom;

	var barPadding = 2; // <-- New!
	var ratio = 10;
	var titlePadding = 30;
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height",h + titlePadding * 2);

	var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
	11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

	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 * ratio ) ;})
	.attr("width", w / dataset.length - barPadding)
	.attr("height", function (d) {return d * ratio ;})
	.attr("fill", function(d) {
	return "rgb(0, " + 200 + ", " + (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 * ratio) + 15;})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "white")
	.attr("text-anchor", "middle");

	//little more practice on text in D3 and svg
	svg.append("text")
	.attr("y",h + titlePadding )
	.attr("x",w / 2)
	.text("Barchar tutorial made by Hung Do")
	.attr("font-size", "26px")
	.attr("fill", "blue")
	.attr("text-anchor", "middle");

	</script>
	</body>
	</html>