D3 Examples

wk5
Name: Slobodan Milanko
Data: http://www.sports-reference.com/cfb/years/2015-rushing.html
Note: I used the first 17 points, to illustrate the data
The first chart made in Tableau: chart1
The second chart made in Tableu: chart2
The first chart shows the number of rushing yards, per rushing attempts, over a confrence. This is shown through a channel of magnitude of position on a common scale, and identity as color hue.The marks used were items as points. The property of discriminability is maintained by allowing the size of the points to increase, as the number of rushing yards increases. In addition, the color hue allows the user to visualise them easier, if size is not distinguishable.
The second chart shows the number of rushing TD's per confrence. This is shown through a channel of magnitude as area and identity as a spatial region. Alike the first chart, color hue and point size allows the human to easily distinguish between the differences. In addition, by adding magnitude of area, and spatial regions, they can easier see the relationship between the data.
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }    
    
    .internalDivs {
      width: 610px; 
      height: 600px; 
    }
    
    .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
    
  </style>
</head>
<body>
  
    <div id="chart1" class="internalDivs">
      <p style="padding-left: 10px">Magnitude as position on common scale</p>
      <p style="padding-left: 10px">Identity as color hue</p>
    </div>
    
    <div id="chart2" class="internalDivs" >
      <p style="padding-left: 10px">Magnitude as area (Rushing TD's per confrence)</p>
      <p style="padding-left: 10px">Identity as spatial region</p>
    </div>
    
  <script>
    
    d3.select(self.frameElement).style("height", "1300px"); 
    
    // general script data
    var dataFromChart = [
[1,"Nick Chubb","Georgia","SEC",92,747,8.1,7,4,32,8.0,1,96,779,8.1,8],
[2,"Matt Breida","Georgia Southern","Sun Belt",203,1609,7.9,17,3,6,2.0,0,206,1615,7.8,17],
[3,"Marcus Marshall","Georgia Tech","ACC",85,649,7.6,4,3,42,14.0,0,88,691,7.9,4],
[4,"Dalvin Cook","Florida State","ACC",229,1691,7.4,19,24,244,10.2,1,253,1935,7.6,20],
[5,"Johnny Jefferson","Baylor","Big 12",136,1000,7.4,8,4,17,4.3,0,140,1017,7.3,8],
[6,"Jalin Moore","Appalachian State","Sun Belt",99,731,7.4,5,0,0,,0,99,731,7.4,5],
[7,"Josh Adams","Notre Dame","Ind",116,838,7.2,6,7,42,6.0,1,123,880,7.2,7],
[8,"Mike Boone","Cincinnati","American",104,749,7.2,9,15,108,7.2,0,119,857,7.2,9],
[9,"Anthony Wales","Western Kentucky","CUSA",154,1086,7.1,9,27,225,8.3,2,181,1311,7.2,11],
[10,"Stanley Boom Williams","Kentucky","SEC",121,855,7.1,6,13,74,5.7,0,134,929,6.9,6],
[11,"D'Onta Foreman","Texas","Big 12",94,672,7.1,5,5,64,12.8,0,99,736,7.4,5],
[12,"Larry Rose III","New Mexico State","Sun Belt",239,1657,6.9,14,30,283,9.4,2,269,1940,7.2,16],
[13,"Shock Linwood","Baylor","Big 12",196,1329,6.8,10,9,71,7.9,1,205,1400,6.8,11],
[14,"Wesley Fields","Georgia Southern","Sun Belt",100,682,6.8,7,4,105,26.3,1,104,787,7.6,8],
[15,"Elijah Hood","North Carolina","ACC",218,1463,6.7,17,13,71,5.5,0,231,1534,6.6,17],
[16,"Joe Mixon","Oklahoma","Big 12",113,753,6.7,7,28,356,12.7,4,141,1109,7.9,11],
[17,"Khalfani Muhammad","California","Pac-12",87,586,6.7,1,17,189,11.1,2,104,775,7.5,3]
    ];
    
    var width = 400;
    var height = 400;
    var padding = 40;
    
    var rusihngAndAttempConf= {}
    for (var i = 0; i < dataFromChart.length; i++) {
      var currentConfrence = dataFromChart[i][3]
      var currentAttempts = dataFromChart[i][4]
      var currentRushing = dataFromChart[i][5]
      
      if (currentConfrence in rusihngAndAttempConf) {
        var newAttempVal = rusihngAndAttempConf[currentConfrence][0] + currentAttempts;
        var newRusingVal = rusihngAndAttempConf[currentConfrence][1] + currentRushing;
        rusihngAndAttempConf[currentConfrence] = [newAttempVal, newRusingVal];
      } else {
        rusihngAndAttempConf[currentConfrence] = [currentAttempts, currentRushing];
      }
    }
    
    var rusihngAndAttmptChildren = []
    for (var key in rusihngAndAttempConf) {
      var element = {"confrence": key, "attempts" : rusihngAndAttempConf[key][0], 
                     "rushing" : rusihngAndAttempConf[key][1] }
      rusihngAndAttmptChildren.push(element)
    }
    
    var aggregatedData = {}
    for (var i = 0; i < dataFromChart.length; i++) {
      var currentConfrence = dataFromChart[i][3]
      var currentValue = dataFromChart[i][7]
      if (currentConfrence in aggregatedData) {
        var newValue = aggregatedData[currentConfrence] + currentValue;
        aggregatedData[currentConfrence] = newValue;
      } else {
        aggregatedData[currentConfrence] = currentValue;
      }
    }
    
    var children = []
    for (var key in aggregatedData) {
      var element = {"confrence": key, "rushingTds" : aggregatedData[key]}
      children.push(element)
    }
    
    var data = {
      children : children
    }
    
    function getConfrenceColor(confrence) {
      if (confrence == "SEC") {
          return "#ff51d3"
        } else if (confrence == "Sun Belt") {
          return "#1dc100"
        } else if (confrence == "Big 12") {
          return "#635bff"
        } else if (confrence == "Ind") {
          return "#e50000"
        } else if (confrence == "American") {
          return "#59fe56"
        } else if (confrence == "CUSA") {
          return "#ffdd32"
        } else if (confrence == "ACC") {
          return "#ff28c2"
        } else if (confrence == "Pac-12") {
          return "#cdff05"
        } else {
          return "#fff"
        }
    }
    
  </script>
  
  <script>
    // part one
    
        var customPadding = 80;
        var xScale = d3.scale.linear()
                                 .domain([0, d3.max(rusihngAndAttmptChildren, function(d) {
                        return d.attempts; })] 
                   ) 
                                 .range([customPadding, width - padding * 2]);
        var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5);
​
            var yScale = d3.scale.linear()
                                 .domain([0, d3.max(rusihngAndAttmptChildren, function(d) { 
                        return d.rushing; })]
                   )
                                 .range([height - customPadding, customPadding]);
        var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);
​
            var rScale = d3.scale.linear()
                                 .domain([0, d3.max(rusihngAndAttmptChildren, function(d) {
                    return d.rushing; })]
                  )   
                                 .range([2, 9]);
    
            var partOneSvg = d3.select("#chart1")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);
​
            partOneSvg.selectAll("circle")
            .data(rusihngAndAttmptChildren)
            .enter()
            .append("circle")
            .attr("cx", function(d) {
                return xScale(d.attempts);
            })
            .attr("cy", function(d,i) {
                return yScale(d.rushing);
            })
            .attr("r", function(d,i) {
                return rScale(d.rushing);
            })
                .attr("fill", function(d) {
                    return getConfrenceColor(d.confrence)
                });
    
            partOneSvg.append("g").attr("class", "axis")
                .attr("transform", "translate(0," + (height - customPadding) + ")").call(xAxis);
            
            partOneSvg.append("g").attr("class", "axis")
                .attr("transform", "translate(" + customPadding + ",0)").call(yAxis);
    
      partOneSvg.append("text")
              .attr("text-anchor", "middle")
              .attr("transform", 
                    "translate("+ (customPadding/4) +","+(height/2)+")rotate(-90)")  
              .text("Rushing Yards");
    
    partOneSvg.append("text")
            .attr("text-anchor", "middle")
            .attr("transform", "translate("+ (width/2) +","+(height- (padding/2))+")") 
            .text("Rushing attempts");
    
    d3.svg.legend = function() {
      function legend(selectedGs) {
        var smallRects = selectedGs.selectAll("rect").data(rusihngAndAttmptChildren)
        .enter().append("g");
        
        smallRects.append("rect").attr("height", 20)
        .attr("width", 20)
        .attr("x", 25)
        .attr("y", function(d, i) {
          return i * 25;
        })
        .style("fill", function(d) {
          return getConfrenceColor(d.confrence)
        });
        
        smallRects.append("text")
          .attr("x", 50) 
            .attr("y", function(d, i) {
            return i * 25
                })
            .attr("transform", "translate(10,15)")
          .text(function(d) {
            return d.confrence;
        })
        
        return this;
      }
      return legend;
    }
    
            var legend = d3.svg.legend();
    
    partOneSvg.append("g").attr("id", "legend")
       .attr("transform", "translate(400,125)").call(legend);
            
    
  </script>
  
  <script>
    // part two
    var svg = d3.select("#chart2").append("svg")
    .attr("width", width).attr("height", height);
    
    var canvas = svg.append("g")
    .attr("transform", "translate(200,20)")
​
    var nodes = d3.layout.pack().value(function(d) { return d.rushingTds; })
      .size([width, height]).nodes(data);
​
    var node = canvas.selectAll(".node")
        .data(nodes).enter().append("g").attr("class", "node")
            .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });
    
            node.append("circle")
        .attr("r", function(d) { return d.r; })
        .attr("fill", function(d) {
                return d.children ? "#7fdaff" : getConfrenceColor(d.confrence)
                })
        .attr("stroke", "#545454")
        .attr("data-legend", function(d) {return d.confrence});
        
        node.append("text").text(function(d) {
            return d.rushingTds
            })
    
    d3.svg.legend = function() {
      function legend(selectedGs) {
        var smallRects = selectedGs.selectAll("rect").data(nodes)
        .enter().append("g");
        
        smallRects.append("rect").attr("height", 20)
        .attr("width", 20)
        .attr("x", 25)
        .attr("y", function(d, i) {
          return i * 25;
        })
        .style("fill", function(d) {
          return getConfrenceColor(d.confrence)
        });
        
        smallRects.append("text")
          .attr("x", 50) 
            .attr("y", function(d, i) {
            return i * 25
                })
            .attr("transform", "translate(10,15)")
          .text(function(d) {
            return d.confrence;
        })
        
        return this;
      }
      return legend;
    }    
        
    var newLegend = d3.svg.legend();
    svg.append("g").attr("id", "legend")
       .attr("transform", "translate(10,100)").call(newLegend);
  </script>
</body>
​
    