<!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>