D3 Examples - how big is too big?

xxxxxxxxxx
 
<!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 generateData(n) {
        n = n || defaultN;
        var start = new Date();
        for (var i = 0; i < n; ++i) {
          var dt = new Date(randomDate());
          data.push({
            id: i,
            value: randomValue(),
            timestamp: dt,
            dayOfWeek: moment(dt).format('dddd').toLowerCase()
          });
        }
        dataGenTime = new Date() - start;
        d3.select('#dataGenSpan').html(dataGenTime);
      }
​
      function generateDataSlow(n) {
        n = n || defaultN;
        var start = new Date();
        for (var i = 0; i < n; ++i) {
          var dt = new Date(randomDate()).toISOString();
          data.push({
            id: i,
            value: randomValue(),
            timestamp: Date.parse(dt),
            dayOfWeek: moment(dt).format('dddd').toLowerCase()
          });
        }
        dataGenTime = new Date() - start;
        d3.select('#dataGenSpan').html(dataGenTime);
      }
​
      function drawData() {
        var start = new Date();
        svg.selectAll('circle')
          .data(data)
          .enter()
          .append('circle')
          .attr({
            cx: function(d) { return timeScale(d.timestamp); },
            cy: function(d) { return valueScale(d.value); },
            r: r,
            fill: function(d) {
              return dayOfWeekScale(d.dayOfWeek);
            }
          });
        dataDrawTime = new Date() - start;
        d3.select('#dataDrawSpan').html(dataDrawTime);
      }
​
      function invertData() {
        svg.selectAll('circle')
          .transition()
          .delay(function(d, i) { return i * defaultDuration/max; })
          .attr({
            cy: function(d) { return valueScale(max - d.value); }
          });
        data = _.map(data, function(d) {
          d.value = max - d.value;
          return d;
        });
      }
​
      function clearCircles() {
        data = [];
        svg.selectAll('circle')
          .data(data)
          .exit()
          .remove();
      }
​
      function generateAndDrawData() {
        var num = d3.select('#numDataPoints')[0][0].value;
        if (d3.select('#slowCheckboxGen').property('checked')) {
          generateDataSlow(num);
        }
        else {
          generateData(num);
        }
        drawData();
      }
​
      function splitOrUnsplitData() {
        if (split) {
          svg.selectAll('circle')
            .transition()
            .attr({
              cx: function(d) { return timeScale(d.timestamp); }
            });
          d3.select('#splitButton').html('Split');
        }
        else {
          svg.selectAll('circle')
            .transition()
            .attr({
              cx: function(d) {
                if (_.includes(['saturday', 'sunday'], d.dayOfWeek)) {
                  return weekendScale(d.timestamp);
                }
                else {
                  return weekdayScale(d.timestamp);
                }
              }
            });
          d3.select('#splitButton').html('Unsplit');
        }
        split = !split;
      }
​
      function shiftOrUnshiftData() {
        var start = new Date();
        if (d3.select('#slowCheckboxShift').property('checked')) {
          if (shifted) {
            svg.selectAll('circle')
              .attr({
                transform: 'translate(0,0)'
              });
            d3.select('#shiftButton').html('Shift');
          }
          else {
            svg.selectAll('circle')
              .attr({
                transform: 'translate(0,-' + pad + ')'
              });
            d3.select('#shiftButton').html('Unshift');
          }
        }
        else {
          if (shifted) {
            svg.attr({
                transform: 'translate(0,0)'
              });
            d3.select('#shiftButton').html('Shift');
          }
          else {
            svg.attr({
                transform: 'translate(0,-' + pad + ')'
              });
            d3.select('#shiftButton').html('Unshift');
          }
        }
        dataShiftTime = new Date() - start;
        d3.select('#shiftReport')
          .classed('hidden', false)
        d3.select('#dataShiftSpan')
          .html(dataShiftTime);
        shifted = !shifted;
      }
​
      generateAndDrawData();
    </script>
  </body>
</html>
    