Cain's routes

Built with blockbuilder.org

Lorenzo Cain, an elite outfielder, played for the Kansas City Royals in 2016.

by the numbers…

300+ – plays where Cain ran at least 10 feet while the ball was in play

16.4 ft – min distance Cain ran while the ball was in play

159.9 ft – max distance in one play

66.7 ft – average distance ran per play

20,150.3 ft – total distance Cain ran in 2016 (3.82 miles)

150,505 – Cain's positions tracked by MLB Statcast in this play set

This image takes a bird's eye view, looking down on Cain's routes. Imagine this view somewhere in the outfield, with home plate offsceeen far below. The bright overlaps of paths near the starting point in the middle depict Cain's first steps when he breaks out for balls hit to the side and behind him, apparently sharing a common initial path as he acclerates in those directions.

The routes depicted here only show Cain's paths while the ball was in play. Naturally, outfielders run many times more the distance shown here. They are often at top speed toward the end of each play, running through the final positions seen in this vis.

Statcast tracks the position of every person on the field 30 times a second. The 'raw' data for Cain's routes here began as 150,505 sample points. Simplify.js boiled that down to the ~27,000 points used here, faithfully maintaining the nuances of each route.

Of course, players are not pinned to the same starting position for every play. The routes were 'normalized' to share a common starting point and a common angle relative to the plate for this vis.

Cain is an excellent fielder who consistently gets a good read on hit balls and tends to run efficient routes (relatively straight) to catch or field them. You may notice, though, a few of Cain's routes are a little bendy, especially towards the top of this vis. Many of those are likely due to near home runs that careened off the outfield wall.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background:#000; }

path {
      stroke: #fff;
      stroke-linecap: round;
      fill: none;
      stroke-width: 1.5;
      stroke-opacity: 0.2;
    }
  </style>
</head>

<body>
  <script>
    var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 960),
        w = 960,
        h = 960;

function path(el, data, xScale, yScale) {
      var line = d3.line()
      .x(function d(d) {
        return xScale(d.x)
      })
      .y(function (d) {
        return yScale(d.y)
      })
      .curve(d3.curveLinear);

el.append('path')
        .attr('d', line(data));
    }

function render(data) {
      var svg = d3.select('svg'),
          xScale = d3.scaleLinear()
      .domain([-200, 200])
      .range([0, w]),
          yScale = d3.scaleLinear()
      .domain([-200, 200])
      .range([-0.23 * h, 0.77 * h]);

data.forEach(function(play) {
        path(svg, play.points, xScale, yScale);
      });
    }

d3.json('data.json', render);
  </script>
</body>

https://d3js.org/d3.v4.min.js