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 @@
After <input name=time0 class=time type=number value=0 min=0> seconds,
</label>
<label>
the link capacity is <input name=bandwidth0 class=bandwidth type=number value=32768> bits per second
the link capacity is <input name=bandwidth0 class=bandwidth type=number value=921600> bits per second
</label>
</li>
</ol>
......
......@@ -191,18 +191,8 @@
request.delivered += results.bandwidth[t].bandwidth;
}
if (request.delivered >= segmentSize) {
// segment responses are delivered after the propagation
// delay and the transmission time have elapsed
buffered += segmentDuration;
request.status = 200;
request.response = new Uint8Array(segmentSize);
request.setResponseBody('');
return remaining;
} else {
if (t === arrival) {
// segment response headers arrive after the propogation delay
if (t === arrival) {
results.playlists.push({
time: t,
bitrate: +request.url.match(/(\d+)-\d+$/)[1]
......@@ -211,10 +201,16 @@
'Content-Type': 'video/mp2t'
});
}
// the response has not arrived fully. re-enqueue it for
// later
return remaining.concat(request);
// send the response body if all bytes have been delivered
if (request.delivered >= segmentSize) {
buffered += segmentDuration;
request.status = 200;
request.response = new Uint8Array(segmentSize);
request.setResponseBody('');
return remaining;
}
// response has not arrived fully, re-enqueue it for later
return remaining.concat(request);
}, []);
// simulate playback
......@@ -259,12 +255,16 @@
displayTimeline = function(error, data) {
var x = d3.scale.linear().range([0, width]),
y0 = d3.scale.linear().range([height, 0]),
y1 = d3.scale.ordinal().rangeRoundBands([height, 0], 0.1),
y = d3.scale.linear().range([height, 0]),
timeAxis = d3.svg.axis().scale(x).orient('bottom'),
bandwidthAxis = d3.svg.axis().scale(y0).orient('left'),
segmentBitrateAxis = d3.svg.axis().scale(y1).orient('right'),
tickFormatter = d3.format(',.0f'),
bitrateAxis = d3.svg.axis()
.scale(y)
.tickFormat(function(value) {
return tickFormatter(value / 1024);
})
.orient('left'),
bandwidthLine = d3.svg.line()
.interpolate('basis')
......@@ -272,16 +272,15 @@
return x(data.time);
})
.y(function(data) {
return y0(data.bandwidth);
return y(data.bandwidth);
});
x.domain(d3.extent(data.bandwidth, function(data) {
return data.time;
}));
y0.domain([0, d3.max(data.bandwidth, function(data) {
y.domain([0, Math.max(d3.max(data.bandwidth, function(data) {
return data.bandwidth;
})]);
y1.domain(data.options.playlists);
}), d3.max(data.options.playlists))]);
// time axis
svg.selectAll('.axis').remove();
......@@ -293,25 +292,13 @@
// bandwidth axis
svg.append('g')
.attr('class', 'y axis')
.call(bandwidthAxis)
.call(bitrateAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Bandwidth (b/s)');
// segment bitrate axis
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + width + ', 0)')
.call(segmentBitrateAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '-.71em')
.style('text-anchor', 'end')
.text('Bitrate (b/s)');
.text('Bitrate (kb/s)');
// bandwidth line
svg.selectAll('.bandwidth').remove();
......@@ -331,7 +318,7 @@
return x(playlist.time);
})
.attr('cy', function(playlist) {
return y1(playlist.bitrate) + (y1.rangeBand() / 2);
return y(playlist.bitrate);
});
};
})();
......