| <!doctype html> |
| <style type="text/css"> |
| canvas { |
| width: 1000px; |
| height: 250px; |
| border: solid 1px #ccc; |
| } |
| input { |
| width: 500px; |
| } |
| </style> |
| <script src="jquery.min.js"></script> |
| |
| <script src="smoothness.js"></script> |
| <script src="power.js"></script> |
| |
| <script src="math.js"></script> |
| <script src="color.js"></script> |
| |
| <script src="heatmap.js"></script> |
| <script src="calculate.js"></script> |
| <script src="draw.js"></script> |
| <script src="input.js"></script> |
| <script> |
| window.addEventListener('load', function() { |
| new Heatmap($('#canvas1'), $('#resolution1'), smoothnessData); |
| new Heatmap($('#canvas2'), $('#resolution2'), powerData); |
| }); |
| </script> |
| <p><canvas id="canvas1"></canvas></p> |
| <p><label for="resolution1">Resolution (actual graph should figure this out automatically)</label><input id="resolution1" type="range" min="1" max="10"></p> |
| <p><canvas id="canvas2"></canvas></p> |
| <p><label for="resolution2">Resolution (actual graph should figure this out automatically)</label><input id="resolution2" type="range" min="1" max="10"></p> |
