D3 Examples - Baseball Scatter Plot- Interactive

Baseball Scatter Plot- Interactive

You can select which numerical variable (various baseball stats, salary) falls on the x, which on the y, and which is represented by the radius. You can choose either free agent eligibility or whether the player was a free agent to be represented by the color.

xxxxxxxxxx
 
<!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>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
  <link rel='stylesheet' href='https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css'>
  <style>
    .point {
      fill: currentColor;
    }
​
        /* 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;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src='wheel.js'></script>
  <script src='spinner.js'></script>
  <script src='axis.js'></script>
  <script src='scatterplot.js'></script>
  <script src='tooltip.js'></script>
  <script src='page.js'></script>
  <script src='loadData.js'></script>
  <script src='reducer.js'></script>
  <script src='actionsFromDispatch.js'></script>
  <script src='vis.js'></script>
</body>
    