D3 Examples - Tides Currents Interpolation

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // to extend moment.js for working with date ranges
    window['moment-range'].extendMoment(moment);
    
    // D3's timeParse documentation is lacking on how to deal with such a date string, so I'm using Moment.js here instead
    function parseDateTime(string) {
      var m = moment(string, "M/D/YY H:mm", true);
      if (m.isValid()) {
        return m;
      }
      return null;
    }
    
    // following taken from:        
        // https://gist.github.com/ericelliott/80905b159e1f3b28634ce0a690682957
    // y1: start value
        // y2: end value
        // mu: the current frame of the interpolation,
        //     in a linear range from 0-1.
        function cosineInterpolate (y1, y2, mu) {
          const mu2 = (1 - Math.cos(mu * Math.PI)) / 2;
          return (y1 * (1 - mu2)) + (y2 * mu2);
        };
  
        d3.csv('tide_currents.csv', function(err, data) {
      if (err) throw err;
​
      // parse
        var parsed = data.map(function(d) {
        return {
          speed: +d.Speed,
          date: parseDateTime(d.Date_Time),
          event: d.Event
        };
        });
      console.log(parsed);
      
      // fill in values
      // there's probably a more efficient way of doing this using Fourier Transforms
      var interpolated = [];
      var firstTwo = parsed.slice(0, 2);
        console.log(firstTwo);
            var range = moment.range(firstTwo[0].date, firstTwo[1].date);
      var minutes = range.diff('minutes');
      console.log(minutes);
      var step = 10;
      var interval = Math.round(minutes / step);
      var formatString = "YYYY-MM-DD HH:mm Z";
      var formatTime = d3.timeFormat("%Y-%m-%d %H:%M %Z");
​
      for (var i = 0; i < step; i ++) {
        var o = {};
        
        if (i === 0) {
          // if we are at the begining of the loop just copy over the data
          o.date = firstTwo[0].date.format(formatString);
          o.speed = firstTwo[0].speed;
          o.event = firstTwo[0].event;
          interpolated.push(o);
        } else if ( i === step - 1) {
          // if at the end of the loop copy over the data
          o.date = firstTwo[1].date.format(formatString);
          o.speed = firstTwo[1].speed;
          o.event = firstTwo[1].event;
          interpolated.push(o);
        } else {
          // interpolate the values for date & speed
          console.log(i, interval * i);
          var curDate = firstTwo[0].date.add((interval * i), 'minutes').format(formatString);
          var dateInterpolator = d3.interpolateDate(
            firstTwo[0].date.toDate(),
            firstTwo[1].date.toDate()
          );
          o.date = formatTime(dateInterpolator((interval * i) / minutes));
          o.speed = cosineInterpolate(firstTwo[0].speed, firstTwo[1].speed, (interval & i) / minutes);
          o.event = '';
                    interpolated.push(o)
                }
            }
      
      console.log(interpolated);
    });
    
​
  </script>
</body>
​
    