D3 Examples - Rocket League Player Statistics

Rocket League Player Statistics

A standalone D3 scatter plot.

This example's data describes Rocket League statistics generated by top players in the first three seasons of Rocket League's League Play (qualifiers to participate in each years Rocket League Champtionship Series). The original compiled data can be found at Parrallel.GG, and the processed CSV version on my Github.

The plot describes an individuals win percentage to their miscellaneous score per game (score which is aquired through objectives such as scoring, assiting, clearing the ball, saving the ball, etc.). The larger the circle the more games that individual played within the season, and the color indicates which season.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <style>
    
      .axis text {
        font-family: 'sans-serif', cursive;
        font-size: 16pt;
      }
      .axis .label {
        font-size: 20pt;
      }
​
      .axis path, .axis line {
        fill: none;
        stroke: #000000;
        shape-rendering: crispEdges;
      }
      
      
​
    </style>
  </head>
  <body>
    <script>
    
      var outerWidth = 900;
      var outerHeight = 490;
      var margin = { left: 70, top: 5, right: 18, bottom: 60 };
      var rMin = 3; // "r" stands for radius
      var rMax = 20;
      var xColumn = "win_percentage";
      var yColumn = "misc_score_per_game";
      var rColumn = "games_played";
      var colorColumn = "season";
​
      var xAxisLabelText = "Win Percentage";
      var xAxisLabelOffset = 49;
​
      var yAxisLabelText = "Misc. Score Per Game";
      var yAxisLabelOffset = 47;
​
      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
​
      var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("x", innerWidth / 2)
        .attr("y", xAxisLabelOffset)
        .attr("class", "label")
        .text(xAxisLabelText);
      var yAxisG = g.append("g")
        .attr("class", "y axis");
      var yAxisLabel = yAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
        .attr("class", "label")
        .text(yAxisLabelText);
​
      var xScale = d3.scale.linear().range([40, innerWidth]);
      var yScale = d3.scale.linear().range([innerHeight, 20]);
      var rScale = d3.scale.linear().range([rMin, rMax]);
      var colorScale = d3.scale.ordinal()
        .range(["#0066FF", "#CC0066", "#33CC33"]);
​
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(10)
        .tickFormat(d3.format("p"))
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .ticks(10)
        .tickFormat(d3.format("d"))
        .outerTickSize(0);
​
​
      
      function render(data){
        xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));
        rScale.domain(d3.extent(data, function (d){ return d[rColumn]; }));
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
​
        var circles = g.selectAll("circle").data(data);
        circles.enter().append("circle");
        circles
          .attr("cx",      function (d){ return       xScale(d[xColumn]);     })
          .attr("cy",      function (d){ return       yScale(d[yColumn]);     })
          .attr("r",       function (d){ return       rScale(d[rColumn]);     })
          .attr("fill",    function (d){ return   colorScale(d[colorColumn]); })
          .style("opacity", 0.5);
​
        circles.exit().remove();
      }
​
      function type(d){
        d.win_percentage = +d.win_percentage;
        d.misc_score_per_game  = +d.misc_score_per_game;
        d.games_played = +d.games_played;
        d.season  = +d.season;
        return d;
      }
​
      d3.csv("rkl_3seasons.csv", type, render);
​
    </script>
  </body>
</html>
​
    