Skip to content

Instantly share code, notes, and snippets.

@sudofox

sudofox/heatmap.html

Last active July 20, 2018 18:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sudofox/4b2d8dd8fd646d16a8171908c81a7cfe to your computer and use it in GitHub Desktop.
Save sudofox/4b2d8dd8fd646d16a8171908c81a7cfe to your computer and use it in GitHub Desktop.
Download ZIP
variable-based heatmap demo with hsl()
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment