Skip to content

Instantly share code, notes, and snippets.

@sudofox
Last active Jul 20, 2018
Embed
What would you like to do?
variable-based heatmap demo with hsl()
<!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