diff options
Diffstat (limited to 'debian/missing-sources/epoch/tests/render/basic/line.html')
| -rw-r--r-- | debian/missing-sources/epoch/tests/render/basic/line.html | 471 |
1 files changed, 471 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/basic/line.html b/debian/missing-sources/epoch/tests/render/basic/line.html new file mode 100644 index 0000000..37de38d --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/basic/line.html @@ -0,0 +1,471 @@ +<!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> |