471 lines
16 KiB
HTML
471 lines
16 KiB
HTML
<!DOCTYPE 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>Basic Line Chart Test</h1>
|
|
<p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Basic Line</p>
|
|
|
|
<ol>
|
|
<li><a href="#test-1">Single Series</a></li>
|
|
<li><a href="#test-2">Single Series II</a></li>
|
|
<li><a href="#test-3">Multi Series</a></li>
|
|
<li><a href="#test-4">Single Series Transition</a></li>
|
|
<li><a href="#test-5">Multi Series Transition</a></li>
|
|
<li><a href="#test-6">Single to Multi Series Transition</a></li>
|
|
<li><a href="#test-7">Color Override</a></li>
|
|
<li><a href="#test-8">Categorical Colors</a></li>
|
|
<li><a href="#test-9">Multi Series without Labels</a></li>
|
|
<li><a href="#test-10">Multi Series with Fixed Domain</a></li>
|
|
<li><a href="#test-11">Show/Hide Layers</a></li>
|
|
</ol>
|
|
|
|
<!-- Test 1 -->
|
|
<div id="test-1" class="test">
|
|
<h2>1. Single Series</h2>
|
|
<p>Display a plot of <code>y = cos(x)</code> over the range <code>[-2π, 2π)</code>.</p>
|
|
<div class="epoch"></div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
var data = [{ label: 'A', values: [] }],
|
|
length = 128;
|
|
for (var i = 0; i < length; i++) {
|
|
var x = i * 4 * Math.PI / length - 2 * Math.PI,
|
|
y = Math.cos(x);
|
|
data[0].values.push({x: x, y: y});
|
|
}
|
|
$('#test-1 .epoch').epoch({ type: 'line', data: data });
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 2 -->
|
|
<div id="test-2" class="test">
|
|
<h2>2. Single Series II</h2>
|
|
<p>Display a plot of <code>y = e<sup>x</sup>*sin(x)</code> from <code>[0, &pi)</code>.</p>
|
|
<div class="epoch"></div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
var data = [{ label: 'A', values: [] }],
|
|
length = 128;
|
|
for (var i = 0; i < length; i++) {
|
|
var x = i * Math.PI / length,
|
|
y = Math.exp(x) * Math.sin(x);
|
|
data[0].values.push({x: x, y: y});
|
|
}
|
|
$('#test-2 .epoch').epoch({type: 'line', data: data});
|
|
})
|
|
</script>
|
|
|
|
<!-- Test 3 -->
|
|
<div id="test-3" class="test">
|
|
<h2>3. Multi Series</h2>
|
|
<p>
|
|
Display a plot of the following functions over the range [0, 2π]:
|
|
<ul>
|
|
<li><code>x*sin(x)</code></li>
|
|
<li><code>x*cos(x)</code></li>
|
|
</ul>
|
|
</p>
|
|
<div class="epoch"></div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
var data = [
|
|
{ label: 'A', values: [] },
|
|
{ label: 'B', values: [] }
|
|
],
|
|
length = 128;
|
|
for (var i = 0; i < length; i++) {
|
|
var x = i * 2 * Math.PI / length;
|
|
data[0].values.push({x: x, y: x*Math.sin(x)});
|
|
data[1].values.push({x: x, y: x*Math.cos(x)});
|
|
}
|
|
$('#test-3 .epoch').epoch({type: 'line', data: data});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 4 -->
|
|
<div id="test-4" class="test">
|
|
<h2>4. Single Series Transition</h2>
|
|
<p>
|
|
Correctly transition between the functions <code>y = 1 / x</code> and <code>y = x<sup>2</sup></code> over the range [1, 2).
|
|
Use the buttons below the chart to initiate the transitions.
|
|
</p>
|
|
<div class="epoch"></div>
|
|
<p>
|
|
<button data-index="0">y = 1 / x</button>
|
|
<button data-index="1">y = x^2</button>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
var data1 = [{label: 'A', values: []}],
|
|
data2 = [{label: 'B', values: []}],
|
|
data = [data1, data2],
|
|
length = 128;
|
|
|
|
for (var i = 0; i < length; i++) {
|
|
var x = i / length + 1;
|
|
data1[0].values.push({x: x, y: 1/x});
|
|
data2[0].values.push({x: x, y: x*x});
|
|
}
|
|
|
|
var chart = $('#test-4 .epoch').epoch({ type: 'line', data: data1 });
|
|
|
|
$('#test-4 button').on('click', function(e) {
|
|
var index = parseInt($(e.target).attr('data-index'));
|
|
chart.update(data[index]);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 5 -->
|
|
<div id="test-5" class="test">
|
|
<h2>5. Multi Series Transition</h2>
|
|
<p>
|
|
Correctly transition between Set A:
|
|
<ul>
|
|
<li><code>y = sin(x)</code></li>
|
|
<li><code>y = x - x<sup>3</sup>/3! + x<sup>5</sup>/5!</code></li>
|
|
</ul>
|
|
Set B:
|
|
<ul>
|
|
<li><code>y = cos(x)</code></li>
|
|
<li><code>y = 1 - x<sup>2</sup>/2! + x<sup>4</sup>/4!</code></li>
|
|
</ul>
|
|
and Set C:
|
|
<ul>
|
|
<li><code>y = sin(x) - (x - x<sup>3</sup>/3! + x<sup>5</sup>/5!)</code></li>
|
|
<li><code>y = cos(x) - (1 - x<sup>2</sup>/2! + x<sup>4</sup>/4!)</code></li>
|
|
</ul>
|
|
</p>
|
|
<div class="epoch"></div>
|
|
<p>
|
|
<button data-index="0">Set A</button>
|
|
<button data-index="1">Set B</button>
|
|
<button data-index="2">Set C</button>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
var fac = function(n) {
|
|
var result = n;
|
|
while(--n > 1) {
|
|
result *= n;
|
|
}
|
|
return result;
|
|
};
|
|
|
|
var taylorSin = function(x) {
|
|
return x - Math.pow(x, 3) / fac(3) + Math.pow(x, 5) / fac(5);
|
|
};
|
|
|
|
var taylorCos = function(x) {
|
|
return 1 - Math.pow(x, 2) / fac(2) + Math.pow(x, 4) / fac(4);
|
|
};
|
|
|
|
var data1 = [
|
|
{ label: 'A', values: [] },
|
|
{ label: 'B', values: [] }
|
|
],
|
|
data2 = [
|
|
{ label: 'A', values: [] },
|
|
{ label: 'B', values: [] }
|
|
],
|
|
data3 = [
|
|
{ label: 'A', values: [] },
|
|
{ label: 'B', values: [] }
|
|
],
|
|
data = [data1, data2, data3],
|
|
length = 64;
|
|
|
|
for (var i = 0; i <= length; i++) {
|
|
var x = i * 8 / length - 4;
|
|
data1[0].values.push({x: x, y: Math.sin(x)});
|
|
data1[1].values.push({x: x, y: taylorSin(x)});
|
|
data2[0].values.push({x: x, y: Math.cos(x)});
|
|
data2[1].values.push({x: x, y: taylorCos(x)});
|
|
data3[0].values.push({x: x, y: Math.sin(x) - taylorSin(x)});
|
|
data3[1].values.push({x: x, y: Math.cos(x) - taylorCos(x)});
|
|
}
|
|
|
|
var chart = $('#test-5 .epoch').epoch({ type: 'line', data: data1 });
|
|
|
|
$('#test-5 button').on('click', function(e) {
|
|
var index = parseInt($(e.target).attr('data-index'));
|
|
chart.update(data[index]);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 6 -->
|
|
<div id="test-6" class="test">
|
|
<h2>6. Single to Multi Series Transition</h2>
|
|
<p>
|
|
Correctly transition between Set A:
|
|
<ul>
|
|
<li><code>y = ln(x)</code></li>
|
|
</ul>
|
|
Set B:
|
|
<ul>
|
|
<li><code>y = ln(x)</code></li>
|
|
<li><code>y = x * ln(x)</code></li>
|
|
<li><code>y = x * ln(x)<sup>2</sup></code></li>
|
|
</ul>
|
|
</p>
|
|
<div class="epoch"></div>
|
|
<p>
|
|
<button data-index="0">Single</button>
|
|
<button data-index="1">Multi</button>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
var data1 = [{label: 'A', values: []}],
|
|
data2 = [
|
|
{label: 'A', values: []},
|
|
{label: 'B', values: []},
|
|
{label: 'C', values: []}
|
|
],
|
|
data = [data1, data2],
|
|
length = 128;
|
|
|
|
for (var i = 0; i <= length; i++) {
|
|
var x = i * 2 / length + 1;
|
|
data1[0].values.push({x: x, y: Math.log(x)});
|
|
data2[0].values.push({x: x, y: Math.log(x)});
|
|
data2[1].values.push({x: x, y: x * Math.log(x)});
|
|
data2[2].values.push({x: x, y: x * Math.log(x) * Math.log(x)});
|
|
}
|
|
|
|
var chart = $('#test-6 .epoch').epoch({ type: 'line', data: data1 });
|
|
|
|
$('#test-6 button').on('click', function(e) {
|
|
var index = parseInt($(e.target).attr('data-index'));
|
|
chart.update(data[index]);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 7 -->
|
|
<div id="test-7" class="test">
|
|
<h2>7. Color Override</h2>
|
|
<p>
|
|
Display the first layer of the plot as pink, the second layer as green, and the third layer as blue.
|
|
</p>
|
|
<div class="epoch"></div>
|
|
</div>
|
|
|
|
<style>
|
|
#test-7 .epoch .a .line { stroke: pink; }
|
|
#test-7 .epoch .b .line { stroke: green; }
|
|
#test-7 .epoch .c .line { stroke: blue; }
|
|
</style>
|
|
|
|
<script>
|
|
$(function() {
|
|
var data = [
|
|
{label: 'A', values: []},
|
|
{label: 'B', values: []},
|
|
{label: 'C', values: []}
|
|
],
|
|
length = 64;
|
|
|
|
for (var i = 0; i < length; i++) {
|
|
var x = i * 1 / length + 0.5;
|
|
for (var j = 0; j < data.length; j++) {
|
|
data[j].values.push({x: x, y: Math.pow(x, 2*j) * Math.log(x)});
|
|
}
|
|
}
|
|
|
|
$('#test-7 .epoch').epoch({ type: 'line', data: data });
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 8 -->
|
|
<div id="test-8" class="test">
|
|
<h2>Categorical Colors</h2>
|
|
<p>
|
|
Change layer colors automatically when switching between the following categorical color classes on the containing element:
|
|
<ul>
|
|
<li><code>category10</code></li>
|
|
<li><code>category20</code></li>
|
|
<li><code>category20b</code></li>
|
|
<li><code>category20c</code></li>
|
|
</ul>
|
|
Change the categorical colors by pressing the buttons below the chart.
|
|
</p>
|
|
<div class="epoch category10"></div>
|
|
<p>
|
|
<button data-class="category10">category10</button>
|
|
<button data-class="category20">category20</button>
|
|
<button data-class="category20b">category20b</button>
|
|
<button data-class="category20c">category20c</button>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
var data = [
|
|
{label: 'A', values: []},
|
|
{label: 'B', values: []},
|
|
{label: 'C', values: []},
|
|
{label: 'D', values: []},
|
|
{label: 'E', values: []},
|
|
{label: 'F', values: []},
|
|
{label: 'G', values: []}
|
|
],
|
|
length = 64,
|
|
className = 'category10';
|
|
|
|
for (var i = 0; i <= length; i++) {
|
|
var x = i * 1 / length;
|
|
for (var j = 0; j < data.length; j++) {
|
|
data[j].values.push({x: x, y: Math.pow(x, j+1)});
|
|
}
|
|
}
|
|
|
|
$('#test-8 .epoch').epoch({ type: 'line', data: data });
|
|
|
|
$('#test-8 button').on('click', function(e) {
|
|
$('#test-8 .epoch').removeClass(className);
|
|
className = $(e.target).attr('data-class');
|
|
$('#test-8 .epoch').addClass(className);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- Test 9 -->
|
|
<div id="test-9" class="test">
|
|
<h2>9. Multi Series without Labels</h2>
|
|
<p>
|
|
Correctly render a multi-series plot of:
|
|
<ul>
|
|
<li><code>y = sin(x)</code></li>
|
|
<li><code>y = cos(x)</code></li>
|
|
</ul>
|
|
where the layers are given without labels.
|
|
</p>
|
|
<div class="epoch"></div>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var data = [{values: []}, {values: []}],
|
|
length = 128;
|
|
|
|
for (var i = 0; i <= length; i++) {
|
|
var x = i * 4 * Math.PI / length;
|
|
data[0].values.push({x: x, y: Math.sin(x)});
|
|
data[1].values.push({x: x, y: Math.cos(x)});
|
|
}
|
|
|
|
$('#test-9 .epoch').epoch({ type: 'line', data: data });
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 10 -->
|
|
<div id="test-10" class="test">
|
|
<h2>10. Multi Series with Fixed Domain</h2>
|
|
<p>
|
|
Display a plot of the following functions:
|
|
<ul>
|
|
<li><code>x*sin(x)</code></li>
|
|
<li><code>x*cos(x)</code></li>
|
|
</ul>
|
|
On the domain <code>[0, 5]</code> and range <code>[0, 4]</code>.
|
|
</p>
|
|
<div class="epoch"></div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
var data = [
|
|
{ label: 'A', values: [] },
|
|
{ label: 'B', values: [] }
|
|
],
|
|
length = 128;
|
|
for (var i = 0; i < length; i++) {
|
|
var x = i * 2 * Math.PI / length;
|
|
data[0].values.push({x: x, y: x*Math.sin(x)});
|
|
data[1].values.push({x: x, y: x*Math.cos(x)});
|
|
}
|
|
$('#test-10 .epoch').epoch({
|
|
type: 'line',
|
|
data: data,
|
|
domain: [0, 5],
|
|
range: [0, 4]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 11 -->
|
|
<div id="test-11" class="test">
|
|
<h2>11. Show/Hide Layers</h2>
|
|
<div class="epoch"></div>
|
|
<p>
|
|
<button data-index="0">Toggle A</button>
|
|
<button data-index="1">Toggle B</button>
|
|
<button data-index="2">Toggle C</button>
|
|
</p>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var chart = $('#test-11 .epoch').epoch({
|
|
type: 'line',
|
|
data: data().add(function(x) { return x; })
|
|
.add(function(x) { return 1.5*x; })
|
|
.add(function(x) { return 2.0*x; }).get([0, 10], 1)
|
|
});
|
|
|
|
$('#test-11 button').click(function(e) {
|
|
var index = parseInt($(e.target).attr('data-index'));
|
|
chart.toggleLayer(index);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Test 12 -->
|
|
<div id="test-12" class="test">
|
|
<h2>12. Multi-axis</h2>
|
|
<div class="epoch"></div>
|
|
</div>
|
|
<script>
|
|
$(function() {
|
|
var d = [
|
|
{ range: 'left', values: [] },
|
|
{ range: 'right', values: [] }
|
|
];
|
|
|
|
for (var i = 0; i < 40; i++) {
|
|
d[0].values.push({ x: i, y: 10*i });
|
|
d[1].values.push({ x: i, y: Math.cos(2*Math.PI*i/40.0) });
|
|
}
|
|
|
|
var chart = $('#test-12 .epoch').epoch({
|
|
type: 'line',
|
|
data: d,
|
|
axes: ['left', 'right'],
|
|
range: {
|
|
left: 'left',
|
|
right: 'right'
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|