Bar Chart Detail

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)

first image

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.

second image

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.

third image

<!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>

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