Record measured bandwidth during simulation

Plot the bandwidth measured by the HLS plugin during the simulation run. Assuming the math to calculate it is working correctly, this line helps make clear the difference between the maximum throughput of the link and the percieved throughput. Becuase we're not pipelining segment requests, this difference can be quite substantial. Remove the buffered line because it was distracting.

@@ -423,9 +423,8 @@ form label {
 .line.bandwidth {
 .line.bandwidth {
   stroke: steelblue;
   stroke: steelblue;
 }
 }
-.line.buffered {
-  stroke: #2ca02c;
-  opacity: 0.25;
+.line.effective-bandwidth {
+  stroke: #FF7F0E;
 }
 }
 .line.bitrate {
 .line.bitrate {
   stroke: #999;
   stroke: #999;

@@ -3,7 +3,7 @@
   var segmentDuration = 9, // seconds
   var segmentDuration = 9, // seconds
       segmentCount = 100,
       segmentCount = 100,
       duration = segmentDuration * segmentCount,
       duration = segmentDuration * segmentCount,
-      propagationDelay = 1,
+      propagationDelay = 0.5,
 
 
       runSimulation,
       runSimulation,
       playlistResponse,
       playlistResponse,
@@ -86,6 +86,7 @@
   runSimulation = function(options, done) {
   runSimulation = function(options, done) {
     var results = {
     var results = {
           bandwidth: [],
           bandwidth: [],
+          effectiveBandwidth: [],
           playlists: [],
           playlists: [],
           buffered: [],
           buffered: [],
           options: options
           options: options
@@ -207,6 +208,10 @@
                       request.status = 200;
                       request.status = 200;
                       request.response = new Uint8Array(segmentSize * 0.125);
                       request.response = new Uint8Array(segmentSize * 0.125);
                       request.setResponseBody('');
                       request.setResponseBody('');
+                      results.effectiveBandwidth.push({
+                        time: Math.ceil(+new Date() * 0.001),
+                        bandwidth: player.hls.bandwidth
+                      });
                     }, ((remaining / value.bandwidth) + i) * 1000);
                     }, ((remaining / value.bandwidth) + i) * 1000);
                     return false;
                     return false;
                   }
                   }
@@ -266,7 +271,6 @@
     displayTimeline = function(error, data) {
     displayTimeline = function(error, data) {
       var x = d3.scale.linear().range([0, width]),
       var x = d3.scale.linear().range([0, width]),
           y = d3.scale.linear().range([height, 0]),
           y = d3.scale.linear().range([height, 0]),
-          y0 = d3.scale.linear().range([height, 0]),
 
 
           timeAxis = d3.svg.axis().scale(x).orient('bottom'),
           timeAxis = d3.svg.axis().scale(x).orient('bottom'),
           tickFormatter = d3.format(',.0f'),
           tickFormatter = d3.format(',.0f'),
@@ -285,13 +289,13 @@
             .y(function(data) {
             .y(function(data) {
               return y(data.bandwidth);
               return y(data.bandwidth);
             }),
             }),
-          bufferedLine = d3.svg.line()
+          effectiveBandwidthLine = d3.svg.line()
             .interpolate('basis')
             .interpolate('basis')
             .x(function(data) {
             .x(function(data) {
               return x(data.time);
               return x(data.time);
             })
             })
             .y(function(data) {
             .y(function(data) {
-              return y0(data.buffered);
+              return y(data.bandwidth);
             });
             });
 
 
       x.domain(d3.extent(data.bandwidth, function(data) {
       x.domain(d3.extent(data.bandwidth, function(data) {
@@ -300,9 +304,6 @@
       y.domain([0, Math.max(d3.max(data.bandwidth, function(data) {
       y.domain([0, Math.max(d3.max(data.bandwidth, function(data) {
         return data.bandwidth;
         return data.bandwidth;
       }), d3.max(data.options.playlists))]);
       }), d3.max(data.options.playlists))]);
-      y0.domain([0, d3.max(data.buffered, function(data) {
-        return data.buffered;
-      })]);
 
 
       // time axis
       // time axis
       svg.selectAll('.axis').remove();
       svg.selectAll('.axis').remove();
@@ -337,20 +338,22 @@
         .datum(data.bandwidth)
         .datum(data.bandwidth)
         .attr('class', 'line bandwidth')
         .attr('class', 'line bandwidth')
         .attr('d', bandwidthLine);
         .attr('d', bandwidthLine);
+      svg.selectAll('.effective-bandwidth').remove();
+      svg.append('path')
+        .datum(data.effectiveBandwidth)
+        .attr('class', 'line effective-bandwidth')
+        .attr('d', effectiveBandwidthLine);
 
 
       svg.append('text')
       svg.append('text')
         .attr('class', 'bandwidth label')
         .attr('class', 'bandwidth label')
         .attr('transform', 'translate(' + x(x.range()[1]) + ', ' + y(data.bandwidth.slice(-1)[0].bandwidth) + ')')
         .attr('transform', 'translate(' + x(x.range()[1]) + ', ' + y(data.bandwidth.slice(-1)[0].bandwidth) + ')')
         .attr('dy', '1.35em')
         .attr('dy', '1.35em')
         .text('bandwidth');
         .text('bandwidth');
-
-      // buffered line
-      svg.selectAll('.buffered').remove();
-      svg.append('path')
-        .datum(data.buffered)
-        .attr('class', 'line buffered')
-        .attr('y', 6)
-        .attr('d', bufferedLine);
+      svg.append('text')
+        .attr('class', 'bandwidth label')
+        .attr('transform', 'translate(' + x(x.range()[1]) + ', ' + y(data.effectiveBandwidth.slice(-1)[0].bandwidth) + ')')
+        .attr('dy', '1.35em')
+        .text('measured');
 
 
       // segment bitrate dots
       // segment bitrate dots
       svg.selectAll('.segment-bitrate').remove();
       svg.selectAll('.segment-bitrate').remove();