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
25 additions
and
38 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,18 +191,8 @@ | ... | @@ -191,18 +191,8 @@ |
191 | request.delivered += results.bandwidth[t].bandwidth; | 191 | request.delivered += results.bandwidth[t].bandwidth; |
192 | 192 | ||
193 | } | 193 | } |
194 | if (request.delivered >= segmentSize) { | ||
195 | // segment responses are delivered after the propagation | ||
196 | // delay and the transmission time have elapsed | ||
197 | buffered += segmentDuration; | ||
198 | request.status = 200; | ||
199 | request.response = new Uint8Array(segmentSize); | ||
200 | request.setResponseBody(''); | ||
201 | return remaining; | ||
202 | } else { | ||
203 | if (t === arrival) { | ||
204 | // segment response headers arrive after the propogation delay | 194 | // segment response headers arrive after the propogation delay |
205 | 195 | if (t === arrival) { | |
206 | results.playlists.push({ | 196 | results.playlists.push({ |
207 | time: t, | 197 | time: t, |
208 | bitrate: +request.url.match(/(\d+)-\d+$/)[1] | 198 | bitrate: +request.url.match(/(\d+)-\d+$/)[1] |
... | @@ -211,10 +201,16 @@ | ... | @@ -211,10 +201,16 @@ |
211 | 'Content-Type': 'video/mp2t' | 201 | 'Content-Type': 'video/mp2t' |
212 | }); | 202 | }); |
213 | } | 203 | } |
214 | // the response has not arrived fully. re-enqueue it for | 204 | // send the response body if all bytes have been delivered |
215 | // later | 205 | if (request.delivered >= segmentSize) { |
216 | return remaining.concat(request); | 206 | buffered += segmentDuration; |
207 | request.status = 200; | ||
208 | request.response = new Uint8Array(segmentSize); | ||
209 | request.setResponseBody(''); | ||
210 | return remaining; | ||
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