how big is too big?

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <script type="text/javascript" src="colorbrewer.js"></script>
    <script type="text/javascript" src="d3.min.js" charset="utf-8"></script>
    <script  type="text/javascript" src="lodash.min.js"></script>
    <script  type="text/javascript" src="moment.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style type="text/css">
      body {
        margin: 0;
      }
      #main {
        background: #FFFFFF;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .aform {
        height: 45px;
      }
      .well {
        display: inline-block;
      }
    </style>
    <title>Big Data: How big is too big?</title>
  </head>
  <body>
    <div id="main">
      <div class="aform">
        <form class="form-inline">
          <div class="form-group">
            <label for="numDataPoints">Number of data points:</label>
            <input type="text" class="form-control" id="numDataPoints" placeholder="5000" onfocus="clearCircles()" />
          </div>
          <div class="form-group">
            <label for="#slowCheckboxGen">Slow?</label>
            <input id="slowCheckboxGen" type="checkbox" />
          </div>
          <button type="button" class="btn btn-default" onclick="generateAndDrawData()">Generate & Draw</button>
        </form>
      </div>
      <div class="aform">
        <form class="form-inline">
          <button type="button" class="btn btn-default" onclick="invertData()">Invert</button>
          <button id="splitButton" type="button" class="btn btn-default" onclick="splitOrUnsplitData()">Split</button>
          <div class="form-group">
            <label for="#slowCheckboxShift">Slow?</label>
            <input id="slowCheckboxShift" type="checkbox" />
            <button id="shiftButton" type="button" class="btn btn-default" onclick="shiftOrUnshiftData()">Shift</button>
          </div>
        </form>
      </div>
      <div id="report">
        <div class="well well-small">
          Generated data in <span id="dataGenSpan"></span> milliseconds
        </div>
        <div class="well well-small">
          Drew data in <span id="dataDrawSpan"></span> milliseconds
        </div>
        <div id="shiftReport" class="well well-small hidden">
          Shifted data in <span id="dataShiftSpan"></span> milliseconds
        </div>
      </div>
    </div>
    <script type="text/javascript">
      function makeRandomIntFn(min, max) {
        return function() {
          return Math.floor(Math.random() * (max - min)) + min;
        };
      }
      // some variables
      var w = 600, h = 250, pad = 25, r = 2.5;
      var seventh = (w - (r * 2))/7;
      var defaultN = 5000, defaultDuration = 250;

var min = 0, max = 1000;
      // startDate is 2015-01-01T00:00:00.000Z; endDate is 2016-01-01T00:00:00.000Z
      var startDate = 1420070400000, endDate = 1451606400000;

var svg = d3.select("#main").append('svg')
        .attr({
          width: w,
          height: h + (pad * 2)
        });

// white background to give us a canvas
      svg.append('rect')
        .attr({
          width: w,
          height: h + (pad * 2),
          x: 0,
          y: 0,
          fill: 'white',
          'stroke-width': 1,
          stroke: 'gray'
        });

svg = svg.append('g');

var data = [];

var timeScale = d3.time.scale.utc()
        .domain([startDate, endDate])
        .range([r, w - r]);

var split = false, shifted = false;

var weekdayScale = d3.time.scale.utc()
        .domain([startDate, endDate])
        .range([r, seventh * 5 - r]);

var weekendScale = d3.time.scale.utc()
        .domain([startDate, endDate])
        .range([r + seventh * 5, w - r]);

var valueScale = d3.scale.linear()
        .domain([0, max])
        .range([h - r + pad, r + pad]);

var dayOfWeekScale = d3.scale.ordinal()
        .domain(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'])
        .range(colorbrewer.Set2[7]);

var randomValue = makeRandomIntFn(0, max);
      var randomDate = makeRandomIntFn(startDate, endDate);

var dataGenTime, dataDrawTime, dataShiftTime;

function clearCircles() {
        data = [];
        svg.selectAll('circle')
          .data(data)
          .exit()
          .remove();
      }

generateAndDrawData();
    </script>
  </body>
</html>