1<!doctype html>
2<style type="text/css">
3  canvas {
4    width: 1000px;
5    height: 250px;
6    border: solid 1px #ccc;
7  }
8  input {
9    width: 500px;
10  }
11</style>
12<script src="jquery.min.js"></script>
13
14<script src="smoothness.js"></script>
15<script src="power.js"></script>
16
17<script src="math.js"></script>
18<script src="color.js"></script>
19
20<script src="heatmap.js"></script>
21<script src="calculate.js"></script>
22<script src="draw.js"></script>
23<script src="input.js"></script>
24<script>
25  window.addEventListener('load', function() {
26    new Heatmap($('#canvas1'), $('#resolution1'), smoothnessData);
27    new Heatmap($('#canvas2'), $('#resolution2'), powerData);
28  });
29</script>
30<p><canvas id="canvas1"></canvas></p>
31<p><label for="resolution1">Resolution (actual graph should figure this out automatically)</label><input id="resolution1" type="range" min="1" max="10"></p>
32<p><canvas id="canvas2"></canvas></p>
33<p><label for="resolution2">Resolution (actual graph should figure this out automatically)</label><input id="resolution2" type="range" min="1" max="10"></p>
34