epoch-charting
Version:
A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.
560 lines (508 loc) • 19.8 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/tests.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../../../dist/js/epoch.js"></script>
<script src="../js/data.js"></script>
<link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
</head>
<body>
<h1>Real-time Heatmap Plot Test</h1>
<p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Real-time Heatmap</p>
<ol>
<li><a href="#test-1">Single Series - Normal</a></li>
<li><a href="#test-2">Single Series - Beta</a></li>
<li><a href="#test-3">Single Series - Normal, Single Update</a></li>
<li><a href="#test-4">Single Series - Beta, Stream Update</a></li>
<li><a href="#test-5">Single Series - Color Override</a></li>
<li><a href="#test-6">Multi Series - Normal + Beta</a></li>
<li><a href="#test-7">Multi Series Color Override</a></li>
<li><a href="#test-8">Range Independent Bucketing</a></li>
<li><a href="#test-9">Option: buckets</a></li>
<li><a href="#test-10">Option: bucketRange</a></li>
<li><a href="#test-11">Option: bucketPadding</a></li>
<li><a href="#test-12">Option: cutOutliers</a></li>
<li><a href="#test-13">Option: opacity</a></li>
<li><a href="#test-14">Show/Hide Layer</a></li>
</ol>
<!-- Test 1 -->
<div id="test-1" class="test">
<h2>1. Single Series - Normal</h2>
<p>Select random values from the normal distribution and display them with the heatmap.</p>
<div class="epoch"></div>
</div>
<script>
$(function() {
var data = new NormalData(1);
$('#test-1 .epoch').epoch({
type: 'time.heatmap',
data: data.history(120),
windowSize: 120,
buckets: 20
});
});
</script>
<!-- Test 2 -->
<div id="test-2" class="test">
<h2>2. Single Series - Beta </h2>
<p>Select random values from the Beta(2, 5) distribution and display them with the heatmap.</p>
<div class="epoch"></div>
</div>
<script>
$(function() {
var data = new BetaData(2, 5, 1);
$('#test-2 .epoch').epoch({
type: 'time.heatmap',
data: data.history(120),
windowSize: 120,
buckets: 20
});
});
</script>
<!-- Test 3 -->
<div id="test-3" class="test">
<h2>3. Single Sieres - Normal, Single Update</h2>
<p>
Plot the normal distribution and transition a new element when the button is pressed.
</p>
<div class="epoch"></div>
<p><button>Next</button></p>
</div>
<script>
$(function() {
var data = new NormalData(1);
var chart = $('#test-3 .epoch').epoch({
type: 'time.heatmap',
data: data.history(120),
windowSize: 120,
buckets: 20
});
$('#test-3 button').on('click', function(e) {
chart.push(data.next());
});
});
</script>
<!-- Test 4 -->
<div id="test-4" class="test">
<h2>4. Single Series - Beta, Stream Update</h2>
<p>
Plot the Beta(2, 5) distribution and begin streaming new elements each second once the
button is pressed.
</p>
<div class="epoch"></div>
<button>Play</button>
</div>
<script>
$(function() {
var data = new BetaData(2, 5, 1),
interval = null;
var chart = $('#test-4 .epoch').epoch({
type: 'time.heatmap',
data: data.history(120),
windowSize: 120,
buckets: 20
});
$('#test-4 button').on('click', function(e) {
if (interval === null) {
chart.push(data.next());
interval = setInterval(function() {
chart.push(data.next());
}, 1000);
$(e.target).text('Pause');
}
else {
clearInterval(interval);
interval = null;
$(e.target).text('Play');
}
});
});
</script>
<!-- Test 5 -->
<div id="test-5" class="test">
<h2>5. Single Series - Color Override</h2>
<p>Change the bucket base color to orange and plot the Beta(2, 2) distribution.</p>
<div id="test-5-plot" class="epoch"></div>
</div>
<style>
#test-5-plot .a rect.bucket { fill: darkorange; }
</style>
<script>
$(function() {
var data = new BetaData(2, 2, 1);
$('#test-5 .epoch').epoch({
type: 'time.heatmap',
data: data.history(120),
windowSize: 120,
buckets: 20
});
});
</script>
<!-- Test 6 -->
<div id="test-6" class="test">
<h2>6. Multi Series - Normal + Beta</h2>
<p>
Plot the Beta(2,5) and Normal distributions as two layers in a single heatmap. Stream elements to the plot
by pressing the button. The normal distribution layer is in blue and the beta in green.
</p>
<div class="epoch"></div>
<button>Play</button>
</div>
<script>
$(function() {
var normal = new NormalData(1),
normalData = normal.history(120)[0],
beta = new BetaData(2, 5, 1),
betaData = beta.history(120)[0],
data = [normalData, betaData],
interval = null;
var chart = $('#test-6 .epoch').epoch({
type: 'time.heatmap',
data: data,
windowSize: 120,
buckets: 20
});
function pushNext() {
chart.push([normal.next()[0], beta.next()[0]]);
}
$('#test-6 button').on('click', function(e) {
if (interval == null) {
pushNext();
interval = setInterval(pushNext, 1000);
$(e.target).text('Pause');
}
else {
clearInterval(interval);
interval = null;
$(e.target).text('Play');
}
});
});
</script>
<!-- Test 7 -->
<div id="test-7" class="test">
<h2>7. Multi Series Color Override</h2>
<p>
Plot the normal distribution and the Beta(2, 5) distribution overrding normal to be in red, and beta to
be in purple.
</p>
<div id="test-7-plot" class="epoch"></div>
</div>
<style>
#test-7-plot .a rect.bucket { fill: red; }
#test-7-plot .b rect.bucket { fill: purple; }
</style>
<script>
$(function() {
var normal = new NormalData(1),
normalData = normal.history(120)[0],
beta = new BetaData(2, 5, 1),
betaData = beta.history(120)[0],
interval = null;
normalData.label = 'A';
betaData.label = 'B';
var chart = $('#test-7 .epoch').epoch({
type: 'time.heatmap',
data: [normalData, betaData],
windowSize: 120,
buckets: 20
});
});
</script>
<!-- Test 8 -->
<div id="test-8" class="test">
<h2>8. Range Independent Bucketing (<a href="https://github.com/fastly/epoch/issues/41">Issue #41</a>)</h2>
<p>
Discrete bucketing of sparse histogram values should produce similar looking graphs regardless
of numeric relation between the range of the plot and the number of buckets.
</p>
<h3>Range [0, 100] with 20 buckets</h3>
<div class="chart1 epoch"></div>
<h3>Range [0, 100] with 45 buckets</h3>
<div class="chart2 epoch"></div>
</div>
<script>
$(function() {
var normal = new NormalData(1),
data = normal.history(120);
console.log(data);
$('#test-8 .chart1').epoch({
type: 'time.heatmap',
data: data,
windowSize: 120,
buckets: 20
});
$('#test-8 .chart2').epoch({
type: 'time.heatmap',
data: data,
windowSize: 120,
buckets: 45
});
});
</script>
<!-- Test 9 -->
<div id="test-9" class="test">
<h2>9. Option: buckets</h2>
<div class="epoch"></div>
<p>
<button class="playback">Play</button> |
<button class="buckets" data-buckets="10">10 Buckets</button>
<button class="buckets" data-buckets="20">20 Buckets</button>
<button class="buckets" data-buckets="40">40 Buckets</button>
</p>
</div>
<script>
$(function() {
var beta = new BetaData(2, 5, 1),
data = beta.history(120);
var chart = $('#test-9 .epoch').epoch({
type: 'time.heatmap',
data: data,
buckets: 10
});
var interval = null,
pushPoint = function () { chart.push(beta.next()); };
$('#test-9 .playback').click(function(e) {
if (interval == null) {
$(e.target).text('Pause');
pushPoint();
interval = setInterval(pushPoint, 1000);
}
else {
$(e.target).text('Play');
clearInterval(interval);
interval = null;
}
});
$('#test-9 .buckets').click(function(e) {
var buckets = parseInt($(e.target).attr('data-buckets'));
chart.option('buckets', buckets);
});
});
</script>
<!-- Test 10 -->
<div id="test-10" class="test">
<h2>10. Option: bucketRange</h2>
<div class="epoch"></div>
<p>
<button class="playback">Play</button> |
<button class="bucketRange" data-bucket-range="0,100">[0, 100]</button>
<button class="bucketRange" data-bucket-range="0,75">[0, 75]</button>
<button class="bucketRange" data-bucket-range="0,50">[0, 50]</button>
<button class="bucketRange" data-bucket-range="0,25">[0, 25]</button>
<button class="bucketRange" data-bucket-range="10,75">[10,75]</button>
</p>
</div>
<script>
$(function() {
var beta = window.beta = new BetaData(2, 5, 1),
data = beta.history(120);
var chart = $('#test-10 .epoch').epoch({
type: 'time.heatmap',
data: data,
axes: ['left', 'right'],
buckets: 20,
windowSize: 100,
cutOutliers: true
});
var interval = null,
pushPoint = function () { chart.push(beta.next()); };
$('#test-10 .playback').click(function(e) {
if (interval == null) {
$(e.target).text('Pause');
pushPoint();
interval = setInterval(pushPoint, 1000);
}
else {
$(e.target).text('Play');
clearInterval(interval);
interval = null;
}
});
$('#test-10 .bucketRange').click(function(e) {
var bucketRange = $(e.target).attr('data-bucket-range')
.split(',').map(function(d) { return parseInt(d); });
chart.option('bucketRange', bucketRange);
});
});
</script>
<!-- Test 11 -->
<div id="test-11" class="test">
<h2>11. Option: bucketPadding</h2>
<div class="epoch"></div>
<p>
<button class="playback">Play</button> |
<button class="bucketPadding" data-bucket-padding="0">Padding: 0</button>
<button class="bucketPadding" data-bucket-padding="2">Padding: 2</button>
<button class="bucketPadding" data-bucket-padding="4">Padding: 4</button>
<button class="bucketPadding" data-bucket-padding="8">Padding: 8</button>
</p>
</div>
<script>
$(function() {
var beta = window.beta = new BetaData(2, 5, 1),
data = beta.history(120);
var chart = $('#test-11 .epoch').epoch({
type: 'time.heatmap',
data: data,
axes: [],
buckets: 15,
windowSize: 100
});
var interval = null,
pushPoint = function () { chart.push(beta.next()); };
$('#test-11 .playback').click(function(e) {
if (interval == null) {
$(e.target).text('Pause');
pushPoint();
interval = setInterval(pushPoint, 1000);
}
else {
$(e.target).text('Play');
clearInterval(interval);
interval = null;
}
});
$('#test-11 .bucketPadding').click(function(e) {
var bucketPadding = parseInt($(e.target).attr('data-bucket-padding'));
console.log(bucketPadding)
chart.option('bucketPadding', bucketPadding);
});
});
</script>
<!-- Test 12 -->
<div id="test-12" class="test">
<h2>12. Option: cutOutliers</h2>
<div class="epoch"></div>
<p>
<button class="playback">Play</button> |
<button class="cutOutliers" data-value="false">Keep Outliers</button>
<button class="cutOutliers" data-value="true">Cut Outliers</button>
</p>
</div>
<script>
$(function() {
var beta = window.beta = new BetaData(2, 5, 1),
data = beta.history(120);
var chart = $('#test-12 .epoch').epoch({
type: 'time.heatmap',
data: data,
axes: ['left', 'right'],
bucketRange: [0, 25],
buckets: 15,
windowSize: 100
});
var interval = null,
pushPoint = function () { chart.push(beta.next()); };
$('#test-12 .playback').click(function(e) {
if (interval == null) {
$(e.target).text('Pause');
pushPoint();
interval = setInterval(pushPoint, 1000);
}
else {
$(e.target).text('Play');
clearInterval(interval);
interval = null;
}
});
$('#test-12 .cutOutliers').click(function(e) {
var cutOutliers = $(e.target).attr('data-value') == "true" ? true : false;
chart.option('cutOutliers', cutOutliers);
});
});
</script>
<div id="test-13" class="test">
<h2>13. Option: opacity</h2>
<div class="epoch"></div>
<p>
<button class="playback">Play</button> |
<select class="opacity">
<option value="root">√n</option>
<option value="linear" selected>n</option>
<option value="quadratic">n<sup>2</sup></option>
<option value="cubic">n<sup>3</sup></option>
<option value="quartic">n<sup>4</sup></option>
<option value="quintic">n<sup>5</sup></option>
</select>
</p>
</div>
<script>
$(function() {
var beta = window.beta = new BetaData(2, 5, 1),
data = beta.history(120);
var chart = $('#test-13 .epoch').epoch({
type: 'time.heatmap',
data: data,
axes: [],
buckets: 20,
windowSize: 100
});
var interval = null,
pushPoint = function () { chart.push(beta.next()); };
$('#test-13 .playback').click(function(e) {
if (interval == null) {
$(e.target).text('Pause');
pushPoint();
interval = setInterval(pushPoint, 1000);
}
else {
$(e.target).text('Play');
clearInterval(interval);
interval = null;
}
});
$('#test-13 select.opacity').on('change', function(e) {
var opacity = $('#test-13 select.opacity').val();
chart.option('opacity', opacity);
});
});
</script>
<div id="test-14" class="test">
<h2>14. Show/Hide Layer</h2>
<div class="epoch"></div>
<p>
<button class="toggle" data-index="0">Toggle A</button>
<button class="toggle" data-index="1">Toggle B</button> |
<button class="playback">Play</button>
</p>
</div>
<script>
$(function() {
var normal = new NormalData(1),
normalData = normal.history(120)[0],
beta = new BetaData(2, 5, 1),
betaData = beta.history(120)[0],
data = [normalData, betaData],
interval = null;
var chart = $('#test-14 .epoch').epoch({
type: 'time.heatmap',
data: data,
windowSize: 120,
buckets: 20
});
$('#test-14 .toggle').click(function(e) {
var index = parseInt($(e.target).attr('data-index'));
chart.toggleLayer(index);
});
function pushNext() {
chart.push([normal.next()[0], beta.next()[0]]);
}
$('#test-14 .playback').on('click', function(e) {
if (interval == null) {
pushNext();
interval = setInterval(pushNext, 1000);
$(e.target).text('Pause');
}
else {
clearInterval(interval);
interval = null;
$(e.target).text('Play');
}
});
});
</script>
</body>
</html>