6038397b by David LaPalomento

Consolidate y axes. Label with kb instead of bits

Both segment bitrate and bandwidth share the same units so an extra axis isn't necessary. Get rid of some unused variables and rename things to match their new uses.
1 parent d4644b36
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
58 After <input name=time0 class=time type=number value=0 min=0> seconds, 58 After <input name=time0 class=time type=number value=0 min=0> seconds,
59 </label> 59 </label>
60 <label> 60 <label>
61 the link capacity is <input name=bandwidth0 class=bandwidth type=number value=32768> bits per second 61 the link capacity is <input name=bandwidth0 class=bandwidth type=number value=921600> bits per second
62 </label> 62 </label>
63 </li> 63 </li>
64 </ol> 64 </ol>
......
...@@ -191,30 +191,26 @@ ...@@ -191,30 +191,26 @@
191 request.delivered += results.bandwidth[t].bandwidth; 191 request.delivered += results.bandwidth[t].bandwidth;
192 192
193 } 193 }
194 // segment response headers arrive after the propogation delay
195 if (t === arrival) {
196 results.playlists.push({
197 time: t,
198 bitrate: +request.url.match(/(\d+)-\d+$/)[1]
199 });
200 request.setResponseHeaders({
201 'Content-Type': 'video/mp2t'
202 });
203 }
204 // send the response body if all bytes have been delivered
194 if (request.delivered >= segmentSize) { 205 if (request.delivered >= segmentSize) {
195 // segment responses are delivered after the propagation
196 // delay and the transmission time have elapsed
197 buffered += segmentDuration; 206 buffered += segmentDuration;
198 request.status = 200; 207 request.status = 200;
199 request.response = new Uint8Array(segmentSize); 208 request.response = new Uint8Array(segmentSize);
200 request.setResponseBody(''); 209 request.setResponseBody('');
201 return remaining; 210 return remaining;
202 } else {
203 if (t === arrival) {
204 // segment response headers arrive after the propogation delay
205
206 results.playlists.push({
207 time: t,
208 bitrate: +request.url.match(/(\d+)-\d+$/)[1]
209 });
210 request.setResponseHeaders({
211 'Content-Type': 'video/mp2t'
212 });
213 }
214 // the response has not arrived fully. re-enqueue it for
215 // later
216 return remaining.concat(request);
217 } 211 }
212 // response has not arrived fully, re-enqueue it for later
213 return remaining.concat(request);
218 }, []); 214 }, []);
219 215
220 // simulate playback 216 // simulate playback
...@@ -259,12 +255,16 @@ ...@@ -259,12 +255,16 @@
259 255
260 displayTimeline = function(error, data) { 256 displayTimeline = function(error, data) {
261 var x = d3.scale.linear().range([0, width]), 257 var x = d3.scale.linear().range([0, width]),
262 y0 = d3.scale.linear().range([height, 0]), 258 y = d3.scale.linear().range([height, 0]),
263 y1 = d3.scale.ordinal().rangeRoundBands([height, 0], 0.1),
264 259
265 timeAxis = d3.svg.axis().scale(x).orient('bottom'), 260 timeAxis = d3.svg.axis().scale(x).orient('bottom'),
266 bandwidthAxis = d3.svg.axis().scale(y0).orient('left'), 261 tickFormatter = d3.format(',.0f'),
267 segmentBitrateAxis = d3.svg.axis().scale(y1).orient('right'), 262 bitrateAxis = d3.svg.axis()
263 .scale(y)
264 .tickFormat(function(value) {
265 return tickFormatter(value / 1024);
266 })
267 .orient('left'),
268 268
269 bandwidthLine = d3.svg.line() 269 bandwidthLine = d3.svg.line()
270 .interpolate('basis') 270 .interpolate('basis')
...@@ -272,16 +272,15 @@ ...@@ -272,16 +272,15 @@
272 return x(data.time); 272 return x(data.time);
273 }) 273 })
274 .y(function(data) { 274 .y(function(data) {
275 return y0(data.bandwidth); 275 return y(data.bandwidth);
276 }); 276 });
277 277
278 x.domain(d3.extent(data.bandwidth, function(data) { 278 x.domain(d3.extent(data.bandwidth, function(data) {
279 return data.time; 279 return data.time;
280 })); 280 }));
281 y0.domain([0, d3.max(data.bandwidth, function(data) { 281 y.domain([0, Math.max(d3.max(data.bandwidth, function(data) {
282 return data.bandwidth; 282 return data.bandwidth;
283 })]); 283 }), d3.max(data.options.playlists))]);
284 y1.domain(data.options.playlists);
285 284
286 // time axis 285 // time axis
287 svg.selectAll('.axis').remove(); 286 svg.selectAll('.axis').remove();
...@@ -293,25 +292,13 @@ ...@@ -293,25 +292,13 @@
293 // bandwidth axis 292 // bandwidth axis
294 svg.append('g') 293 svg.append('g')
295 .attr('class', 'y axis') 294 .attr('class', 'y axis')
296 .call(bandwidthAxis) 295 .call(bitrateAxis)
297 .append('text') 296 .append('text')
298 .attr('transform', 'rotate(-90)') 297 .attr('transform', 'rotate(-90)')
299 .attr('y', 6) 298 .attr('y', 6)
300 .attr('dy', '.71em') 299 .attr('dy', '.71em')
301 .style('text-anchor', 'end') 300 .style('text-anchor', 'end')
302 .text('Bandwidth (b/s)'); 301 .text('Bitrate (kb/s)');
303
304 // segment bitrate axis
305 svg.append('g')
306 .attr('class', 'y axis')
307 .attr('transform', 'translate(' + width + ', 0)')
308 .call(segmentBitrateAxis)
309 .append('text')
310 .attr('transform', 'rotate(-90)')
311 .attr('y', 6)
312 .attr('dy', '-.71em')
313 .style('text-anchor', 'end')
314 .text('Bitrate (b/s)');
315 302
316 // bandwidth line 303 // bandwidth line
317 svg.selectAll('.bandwidth').remove(); 304 svg.selectAll('.bandwidth').remove();
...@@ -331,7 +318,7 @@ ...@@ -331,7 +318,7 @@
331 return x(playlist.time); 318 return x(playlist.time);
332 }) 319 })
333 .attr('cy', function(playlist) { 320 .attr('cy', function(playlist) {
334 return y1(playlist.bitrate) + (y1.rangeBand() / 2); 321 return y(playlist.bitrate);
335 }); 322 });
336 }; 323 };
337 })(); 324 })();
......