Test - Rocket League Interactive Scatter Plot

** 10/25/17 - This block was updated with additional change over time interactions with the addition of changing radius (as well as X, Y, and Color) with a numeric attribute. **

This bl.ock'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 default scatter 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 user may select the continuous statistics as either the x-axis or y-axis. One can also select a nominal attribute to color the corresponding circles as well as a continuous attribute to modify the radius of the circles.

This example demonstrates usage of a new library called d3-component and Redux to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.

Built with blockbuilder.org

forked from curran's block: Spinner with d3-component

forked from curran's block: Scatter Plot with Menus

forked from dennisjunior111's block: RKL Test - Scatter Plot with Menus

forked from anonymous's block: 2 RKL Test - Scatter Plot with Menus

forked from dennisjunior111's block: Rocket League Interactive Scatter Plot

forked from dennisjunior111's block: Test - Rocket League Interactive Scatter Plot

<!DOCTYPE html>
<head>    
  <meta charset="utf-8">
  <script src="https://unpkg.com/d3@4"></script>
  <script src="https://unpkg.com/d3-component@3"></script>
  <script src="https://unpkg.com/redux@3/dist/redux.min.js"></script>
  <script src="https://unpkg.com/d3-tip@0.7.1"></script>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
  <style>
    
    .point {
      fill: currentColor;
      stroke: currentColor;
      fill-opacity: 0.3;
    }

/* Tooltip styles copied from
    		https://bl.ocks.org/Caged/6476579 */
    .d3-tip {
      line-height: 1;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
 
      /* Make the chart container fill the page using CSS. */
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }

</style>
</head>
<body>
  
  <div id="viz"></div>
  
  
  <script>

setTimeout(function (){ // Show off the spinner for a few seconds ;)
        d3.csv("rkl_3seasons.csv", type, function (data){
          actions.ingestData(data, numericColumns, ordinalColumns, seasonFilters)
        });
      }, 500);
      
      function type(d){
        return numericColumns.reduce(function (d, column){
          d[column] = + d[column];
          return d;
        }, d);
      }
    }
    
    // ------------------------------------------------------------
    function reducer (state, action){
      var state = state || {
        width: 960,
        height: 500 - 38,
        loading: true,
        margin: {top: 12, right: 12, bottom: 40, left: 50},
        x: "Win Percentage",
        y: "Misc Score Per Game",
        color: "Season",
        radius: "Games Played",
        season: "All Seasons"
      };
      switch (action.type) {
        case "INGEST_DATA":
          return Object.assign({}, state, {
            loading: false,
            data: action.data,
            numericColumns: action.numericColumns,
            ordinalColumns: action.ordinalColumns,
            seasonFilters: action.seasonFilters
          });
        case "SET_X":
          return Object.assign({}, state, { x: action.column });
        case "SET_Y":
          return Object.assign({}, state, { y: action.column });
        case "SET_COLOR":
          return Object.assign({}, state, { color: action.column });
        case "SET_RADIUS":
          return Object.assign({}, state, { radius: action.column });
        case "SET_SEASON":
          return Object.assign({}, state, { season: action.column });
        default:
          return state;
      }
    }
    
    function actionsFromDispatch(dispatch){
      return {
        ingestData: function (data, numericColumns, ordinalColumns, seasonFilters){
          dispatch({
            type: "INGEST_DATA",
            data: data,
            numericColumns: numericColumns,
            ordinalColumns: ordinalColumns,
            seasonFilters: seasonFilters
          });
        },
        setX: function (column){
          dispatch({ type: "SET_X", column: column });
        },
        setY: function (column){
          dispatch({ type: "SET_Y", column: column });
        },
        setColor: function (column){
          dispatch({ type: "SET_COLOR", column: column });
        },
        setRadius: function (column){
          console.log(column)
          dispatch({ type: "SET_RADIUS", column: column });
        },
        setSeason: function (data, column){
          console.log(data)
          dispatch({ type: "SET_SEASON", column: data });
        }
      };
    }
    
    // 
    //var svg = d3.select(vizDiv).append("svg");
    
    function main(){
      
      // grab the screen width and height computed by css
      //var width = vizDiv.clientWidth;
      //var height = vizDiv.clientHeight;
      
      var store = Redux.createStore(reducer),
          actions = actionsFromDispatch(store.dispatch);
          renderApp = function(){
            d3.select("body").call(app, store.getState(), actions);
          }
      renderApp();
      store.subscribe(renderApp);
      loadData(actions);
      
    }
    
    
    
    // draw for the first time to initialize
    main();
    
    // redraw based on new window size when browser is resided
    window.addEventListener("resize", main);
  </script>
</body>

https://unpkg.com/d3@4

https://unpkg.com/d3-component@3

https://unpkg.com/redux@3/dist/redux.min.js

https://unpkg.com/d3-tip@0.7.1