Plot buffered line

Add in a line to show how much content is buffered at each point during the simulation. It's pretty noisy due to the length of the simulation.

@@ -418,9 +418,15 @@ form label {
 
 
 .line {
 .line {
   fill: none;
   fill: none;
-  stroke: steelblue;
   stroke-width: 1.5px;
   stroke-width: 1.5px;
 }
 }
+.line.bandwidth {
+  stroke: steelblue;
+}
+.line.buffered {
+  stroke: #2ca02c;
+  opacity: 0.25;
+}
 
 
 .timeline {
 .timeline {
   color: #888;
   color: #888;

@@ -87,6 +87,7 @@
     var results = {
     var results = {
           bandwidth: [],
           bandwidth: [],
           playlists: [],
           playlists: [],
+          buffered: [],
           options: options
           options: options
         },
         },
         bandwidths = options.bandwidths,
         bandwidths = options.bandwidths,
@@ -216,6 +217,11 @@
             return;
             return;
           }, []);
           }, []);
 
 
+          results.buffered.push({
+            time: t,
+            buffered: buffered
+          });
+
           // simulate playback
           // simulate playback
           if (buffered > 0) {
           if (buffered > 0) {
             buffered--;
             buffered--;
@@ -259,6 +265,7 @@
     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'),
@@ -276,6 +283,14 @@
             })
             })
             .y(function(data) {
             .y(function(data) {
               return y(data.bandwidth);
               return y(data.bandwidth);
+            }),
+          bufferedLine = d3.svg.line()
+            .interpolate('basis')
+            .x(function(data) {
+              return x(data.time);
+            })
+            .y(function(data) {
+              return y0(data.buffered);
             });
             });
 
 
       x.domain(d3.extent(data.bandwidth, function(data) {
       x.domain(d3.extent(data.bandwidth, function(data) {
@@ -284,6 +299,9 @@
       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();
@@ -312,9 +330,16 @@
 
 
       svg.append('text')
       svg.append('text')
         .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('x', 3)
         .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);
 
 
       // segment bitrate dots
       // segment bitrate dots
       svg.selectAll('.segment-bitrate').remove();
       svg.selectAll('.segment-bitrate').remove();