<!DOCTYPE html>
<html>
<head>
<title>js-colormaps: Overview</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="js-colormaps.js"></script>
<script>
function appendHTMLbyID(id, text) {
old_html = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML = old_html+text;
}
function enforceBounds(x) {
if (x < 0) {
return 0;
} else if (x > 1){
return 1;
} else {
return x;
}
}
function interpolateLinearly(x, values) {
// Split values into four lists
var x_values = [];
var r_values = [];
var g_values = [];
var b_values = [];
for (i in values) {
x_values.push(values[i][0]);
r_values.push(values[i][1][0]);
g_values.push(values[i][1][1]);
b_values.push(values[i][1][2]);
}
var i = 1;
while (x_values[i] < x) {
i = i+1;
}
i = i-1;
var width = Math.abs(x_values[i] - x_values[i+1]);
var scaling_factor = (x - x_values[i]) / width;
// Get the new color values though interpolation
var r = r_values[i] + scaling_factor * (r_values[i+1] - r_values[i])
var g = g_values[i] + scaling_factor * (g_values[i+1] - g_values[i])
var b = b_values[i] + scaling_factor * (b_values[i+1] - b_values[i])
return [enforceBounds(r), enforceBounds(g), enforceBounds(b)];
}
function drawColormap(CanvasID, colormap) {
var c = document.getElementById(CanvasID);
var ctx = c.getContext("2d");
for (i = 0; i <= 1024; i++) {
var color = interpolateLinearly(i/1024, colormap);
r = Math.round(255*color[0]);
g = Math.round(255*color[1]);
b = Math.round(255*color[2]);
ctx.fillStyle = 'rgb('+r+', '+g+', '+b+')';
ctx.fillRect(i, 0, 1, 50);
}
}
function drawColormapTable(TableID) {
var Sequential = ['Blues', 'BuGn', 'BuPu',
'GnBu', 'Greens', 'Greys', 'Oranges', 'OrRd',
'PuBu', 'PuBuGn', 'PuRd', 'Purples', 'RdPu',
'Reds', 'YlGn', 'YlGnBu', 'YlOrBr', 'YlOrRd'];
var Sequential2 = ['afmhot', 'autumn', 'bone', 'cool', 'copper',
'gist_heat', 'gray', 'hot', 'pink',
'spring', 'summer', 'winter'];
var Diverging = ['BrBG', 'bwr', 'coolwarm', 'PiYG', 'PRGn', 'PuOr',
'RdBu', 'RdGy', 'RdYlBu', 'RdYlGn', 'Spectral',
'seismic'];
var Qualitative = ['Accent', 'Dark2', 'Paired', 'Pastel1',
'Pastel2', 'Set1', 'Set2', 'Set3'];
var Miscellaneous = ['gist_earth', 'terrain', 'ocean', 'gist_stern',
'brg', 'CMRmap', 'cubehelix', 'gnuplot',
'gnuplot2', 'gist_ncar', 'nipy_spectral',
'jet', 'rainbow', 'gist_rainbow', 'hsv',
'flag', 'prism']
if (TableID == 'Sequential') {
var cm_type = Sequential;
} else if (TableID == 'Sequential2') {
var cm_type = Sequential2;
} else if (TableID == 'Diverging') {
var cm_type = Diverging;
} else if (TableID == 'Qualitative') {
var cm_type = Qualitative;
} else {
var cm_type = Miscellaneous;
}
for (i in cm_type) {
var cmap = cm_type[i];
appendHTMLbyID(TableID, '<tr><td>'+cmap+'</td><td><canvas id="'+cmap+'" width="1024" height="50"></canvas></td></tr>');
}
for (i in cm_type) {
var cmap = cm_type[i];
drawColormap(cmap, window[cmap]);
}
}
</script>
</head>
<body>
<h2>Sequential</h2>
<table id='Sequential'>
</table>
<h2>Sequential (2)</h2>
<table id='Sequential2'>
</table>
<h2>Diverging</h2>
<table id='Diverging'>
</table>
<h2>Qualitative</h2>
<table id='Qualitative'>
</table>
<h2>Miscellaneous</h2>
<table id='Miscellaneous'>
</table>
<script>
drawColormapTable('Sequential');
drawColormapTable('Sequential2');
drawColormapTable('Diverging');
drawColormapTable('Qualitative');
drawColormapTable('Miscellaneous');
</script>
</body>
</html>