D3 Examples - VI2 - James Eanes

VI2 - James Eanes

Part 1 - Tableau:

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

Insight: this is incredibly easy to do with an off-the-shelf tool (i.e., a few mouse clicks) versus the hours it took to learn enough about R to make this same graph!

Scatterplot of 2 interesting variables, with conference mapped to color

Insight: I chose to plot pass attempts and interceptions to determine what correlation might exist between them and what outliers might exist; as one might expect, those with the most interceptions also had relatively high pass attempts; however, there is one passer who clear surpasses everyone in interceptions (22, with about 440 passes), and there is one with a remarkable 8 interceptions with 550 passes. Good plot for finding standouts.

One other interesting graph that uses a derived variable

Insight: I chose to plot the sum of passing and rushing yards per passer; this gives a quick view of the most capable “threats” in terms of both their arms and legs, with about 7 real stand-outs.

Comments on using Tableau:

It's very easy to use for simple charts, but takes some time to get used to the layout.

I had to search around to figure out how to get the sum of two measures; turned out I needed to right-click on one of the measures and create a "Calculated Field", which wasn't the most obvious of ways to get there.

What I learned in this part of the D3 tutorial:

Internet Explorer 8+ doesn't support SVG...seems bad...

SVG syntax is apparently based on (or at least very similar to) XML

There are multiple ways to represent just about everything, but the "chaining" approach really helps when adding lots of attributes (instead of typing in values as attributes on a DOM element).

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 SVG Tutorial</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    </head>
    <body>
        <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>
    