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.
Showing
2 changed files
with
28 additions
and
41 deletions
... | @@ -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 | })(); | ... | ... |
-
Please register or sign in to post a comment