D3 Examples - CS 725 Information Visualization

Christos Tsolakis

Tableau Charts: barplot

The PAC conference has the most players in the top ten and CUSA & American conference, although on the top of the list of the players, they have only 1 in the top ten.
Most of the Rushing Attempts are rewarding by a small amount of yards. However, there is a considerable amount of backtracks.
Oregon has the best ratio, although in average, teams in the SEC conference have better results.

List of 3 things that you learned while working through the D3 tutorial

Using the class rect instead of simple div's for the barchart made things quite easier.
The coordinate system in an svg file is inverted with respect on what you expect to see.
Configuring text position is by far more flexible than in Tableau.

List of 2 comments that you have about using Tableau

Creating the 1st bar chart was by far easier in Tableau than it was in R.
Tableau gives you a rapid way of visualizing and exploring your data but on the other hand if you want to customize your plot you better redo it in D3.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
​
<body>
  <script>
   console.log("you are now rocking with d3", d3);
    
   var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 11, 17, 16, 18, 23, 25 ];
    
    //Width and height & Padding
    var w = 500;
    var h = 100;
    var barPadding = 1;
    
    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("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")
            .attr("text-anchor","middle");
       
   </script>
</body>
​
    