sudofox/heatmap.html

## heatmap.html
<!DOCTYPE html>
<!-- heatmap demo - id:austinburk -->
<head>
  <style>
  table {
    display: block;
  }
  td {
    min-width:10px;
    min-height:10px;
    display: inline-block;
    border: solid black 1px;
  }
  </style>
  <script>

  function getHeatmapColor(number) {
    // scale from 1 to 200
    var factor = Math.abs((1-(number)/200) * 240) // subtract this from 255 to invert cold/hot
    return "hsl("+factor+", 100%, 50%)";
  }

  minScore = -100;
  maxScore = 100;

  </script>
</head>
<body>
<table id="heatmap-demo">
</table>
</body>
<script>
  for (var i=minScore; i<= maxScore; i++) {
    var colorBox = document.createElement("td");
    colorBox.style = "background-color: " + getHeatmapColor(i);
    colorBox.innerText = i;
    document.getElementById("heatmap-demo").appendChild(colorBox);
  }
</script>
</html>
	<!DOCTYPE html>
	<!-- heatmap demo - id:austinburk -->
	<head>
	<style>
	table {
	display: block;
	}
	td {
	min-width:10px;
	min-height:10px;
	display: inline-block;
	border: solid black 1px;
	}
	</style>
	<script>

	function getHeatmapColor(number) {
	// scale from 1 to 200
	var factor = Math.abs((1-(number)/200) * 240) // subtract this from 255 to invert cold/hot
	return "hsl("+factor+", 100%, 50%)";
	}

	minScore = -100;
	maxScore = 100;

	</script>
	</head>
	<body>
	<table id="heatmap-demo">
	</table>
	</body>
	<script>
	for (var i=minScore; i<= maxScore; i++) {
	var colorBox = document.createElement("td");
	colorBox.style = "background-color: " + getHeatmapColor(i);
	colorBox.innerText = i;
	document.getElementById("heatmap-demo").appendChild(colorBox);
	}
	</script>
	</html>