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 {
   stroke: steelblue;
 }
-.line.buffered {
-  stroke: #2ca02c;
-  opacity: 0.25;
+.line.effective-bandwidth {
+  stroke: #FF7F0E;
 }
 .line.bitrate {
   stroke: #999;

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