diff options
Diffstat (limited to 'debian/missing-sources/epoch/tests/render/basic/scatter.html')
| -rw-r--r-- | debian/missing-sources/epoch/tests/render/basic/scatter.html | 398 |
1 files changed, 398 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/basic/scatter.html b/debian/missing-sources/epoch/tests/render/basic/scatter.html new file mode 100644 index 0000000..31f1e42 --- /dev/null +++ b/debian/missing-sources/epoch/tests/render/basic/scatter.html @@ -0,0 +1,398 @@ +<!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 Scatter Plot Test</h1> + <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> » Basic Scatter</p> + <ol> + <li><a href="#test-1">Single Series</a></li> + <li><a href="#test-2">Multi Series</a></li> + <li><a href="#test-3">Single Series Transition</a></li> + <li><a href="#test-4">Multi Series Transition</a></li> + <li><a href="#test-5">Multi Series Transition II</a></li> + <li><a href="#test-6">Color Override</a></li> + <li><a href="#test-7">Categorical Colors</a></li> + <li><a href="#test-8">Multi Series without Labels</a></li> + <li><a href="#test-9">Single Series with Radius</a></li> + <li><a href="#test-10">Radius Change</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>Render a single random series scatter plot.</p> + <div class="epoch"></div> + </div> + <script> + $(function() { + var data = [], + length = 128; + + for (var j = 0; j < length; j++) { + var x = Math.random() * 100, + y = Math.random() * 20; + data.push({x: x, y: y}); + } + + $('#test-1 .epoch').epoch({ type: 'scatter', data: [{label: 'A', values: data}]}); + }); + </script> + + <!-- Test 2 --> + <div id="test-2" class="test"> + <h2>2. Multi Series</h2> + <p>Render three random scatter series in the same plot.</p> + <div class="epoch"></div> + </div> + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 64; + + for (var i = 0; i < length; i++) { + for (var j = 0; j < data.length; j++) { + var x = Math.random() * 100, + y = Math.random() * 20; + data[j].values.push({x: x, y: y}); + } + } + + $('#test-2 .epoch').epoch({type: 'scatter', data: data}); + }); + </script> + + <!-- Test 3 --> + <div id="test-3" class="test"> + <h2>3. Single Series Transition</h2> + <p> + Transition from one random series to another random series. Use the + buttons below the plot to initiate the transition. + </p> + <div class="epoch"></div> + <p> + <button data-index="0">Series A</button> + <button data-index="1">Series B</button> + </p> + </div> + <script> + $(function() { + var data = [ + [ + {label: 'A', values: []} + ], + [ + {label: 'A', values: []} + ] + ], + length = 64; + + for (var i = 0; i < length; i++) { + for (var j = 0; j < data.length; j++) { + for (var k = 0; k < data[j].length; k++) { + var x = Math.random() * 100, + y = Math.random() * 20; + data[j][k].values.push({x: x, y: y}); + } + } + } + + var chart = $('#test-3 .epoch').epoch({type: 'scatter', data: data[0]}); + $('#test-3 button').on('click', function(e) { + var index = parseInt($(e.target).attr('data-index')); + chart.update(data[index]); + }); + }); + </script> + + <!-- Test 4 --> + <div id="test-4" class="test"> + <h2>4. Multi Series Transition</h2> + <p> + Transition from a set of multiple randoms series random series to another of multiple random series. Use the + buttons below the plot to initiate the transition. + </p> + <div class="epoch"></div> + <p> + <button data-index="0">Series Set A</button> + <button data-index="1">Series Set B</button> + </p> + </div> + <script> + $(function() { + var data = [ + [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ] + ], + length = 64; + + for (var i = 0; i < length; i++) { + for (var j = 0; j < data.length; j++) { + for (var k = 0; k < data[j].length; k++) { + var x = Math.random() * 100, + y = Math.random() * 20; + data[j][k].values.push({x: x, y: y}); + } + } + } + + var chart = $('#test-4 .epoch').epoch({type: 'scatter', data: data[0]}); + $('#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 II</h2> + <p> + Transition from a multi-series set of random data to a single series set of random data. + </p> + <div class="epoch"></div> + <p> + <button data-index="0">Series Set A</button> + <button data-index="1">Series Set B</button> + </p> + </div> + <script> + $(function() { + var data = [ + [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + [ + {label: 'A', values: []} + ] + ], + length = 64; + + for (var i = 0; i < length; i++) { + for (var j = 0; j < data.length; j++) { + for (var k = 0; k < data[j].length; k++) { + var x = Math.random() * 100, + y = Math.random() * 20; + data[j][k].values.push({x: x, y: y}); + } + } + } + + var chart = $('#test-5 .epoch').epoch({type: 'scatter', data: data[0]}); + $('#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. Color Override</h2> + <p>The first series should be pink, the second green, and thrid blue.</p> + <div class="epoch"></div> + </div> + <style> + #test-6 .a .dot { fill: pink; } + #test-6 .b .dot { fill: green; } + #test-6 .c .dot { fill: blue; } + </style> + <script> + $(function() { + var data = [ + {label: 'A', values: []}, + {label: 'B', values: []}, + {label: 'C', values: []} + ], + length = 64; + + for (var i = 0; i < length; i++) { + for (var j = 0; j < data.length; j++) { + var x = Math.random() * 100, + y = Math.random() * 20; + data[j].values.push({x: x, y: y}); + } + } + + $('#test-6 .epoch').epoch({type: 'scatter', data: data}); + }); + </script> + + <!-- Test 7 --> + <div id="test-7" class="test"> + <h2>7. Categorical Colors</h2> + <p> + Correctly transition between different categorical color sets. + </p> + <div class="epoch"></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: 'E', values: []}, + {label: 'F', values: []}, + {label: 'G', values: []}, + {label: 'H', values: []}, + {label: 'I', values: []}, + {label: 'J', values: []}, + {label: 'K', values: []} + ], + className = 'category10'; + + for (var i = 0; i < data.length; i++) { + var x = i * Math.PI * 2 / data.length, + y = Math.sin(x); + data[i].values.push({x: x, y: y}); + } + + $('#test-7 .epoch').epoch({ + type: 'scatter', + radius: 10, + data: data + }); + + + $('#test-7 button').on('click', function(e) { + $('#test-7 .epoch').removeClass(className); + className = $(e.target).attr('data-class'); + $('#test-7 .epoch').addClass(className); + }); + }); + </script> + + <!-- Test 8 --> + <div id="test-8" class="test"> + <h2>8. Multi Series without Labels</h2> + <p>Correctly render two random scatter plots when labels are not specified for the layers.</p> + <div class="epoch"></div> + </div> + <script> + $(function() { + var data = [{values: []}, {values: []}], + length = 64; + + for (var i = 0; i < length; i++) { + for (var j = 0; j < data.length; j++) { + var x = Math.random() * 100, + y = Math.random() * 20; + data[j].values.push({x: x, y: y}); + } + } + + $('#test-8 .epoch').epoch({type: 'scatter', data: data}); + }); + </script> + + <!-- Test 9 --> + <div id="test-9" class="test"> + <h2>9. Single Series with Radius</h2> + <p>Render a single random series scatter plot with different radii.</p> + <div class="epoch"></div> + <p> + <button>Regenerate</button> + </p> + </div> + <script> + $(function() { + var length = 128; + + var generateData = function(length) { + var data = []; + for (var j = 0; j < length; j++) { + var x = Math.random() * 100, + y = Math.random() * 20, + r = Math.random() * 6 + 2; + data.push({x: x, y: y, r: r}); + } + return [{label: 'A', values: data}]; + }; + + var chart = $('#test-9 .epoch').epoch({ type: 'scatter', data: generateData(length)}); + + $("#test-9 p button:eq(0)").click(function() { + chart.update(generateData(length)); + }); + }); + </script> + + <!-- Test 10 --> + <div id="test-10" class="test"> + <h2>10. Radius Change</h2> + <div class="epoch"></div> + <p> + <button data-index="0">Small</button> + <button data-index="1">Normal</button> + <button data-index="2">Large</button> + <button data-index="3">Very Large</button> + </p> + </div> + <script> + $(function() { + var radii = [2.0, 3.5, 7, 14]; + var chart = $('#test-10 .epoch').epoch({ + type: 'scatter', + data: data().random() + }); + $('#test-10 button').click(function(e) { + var index = parseInt($(e.target).attr('data-index')); + chart.option('radius', radii[index]); + }); + }); + </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: 'scatter', + data: data().multiRandom(3) + }); + + $('#test-11 button').click(function(e) { + var index = parseInt($(e.target).attr('data-index')); + chart.toggleLayer(index); + }); + }); + </script> + + </body> +</html> |