Easy JavaScript Colour Gradients

RainbowVis-JS is JavaScript library I wrote for colour data visualization. Easily map numbers to a smooth-transitioning colour legend.

Mappings

Default

0 -> #ff0000
10 -> #ff4d00
20 -> #ff9900
30 -> #ffe500
40 -> #ccff00
50 -> #80ff00
60 -> #33ff00
70 -> #00e619
80 -> #009966
90 -> #004db3
100 -> #0000ff

Custom

-0.5 -> #ff0000
-0.4 -> #ff3333
-0.3 -> #ff6666
-0.2 -> #ff9999
-0.1 -> #ffcccc
0 -> #ffffff
0.1 -> #ccffcc
0.2 -> #99ff99
0.3 -> #66ff66
0.4 -> #33ff33
0.5 -> #00ff00

Data Visualization

This is a heatmap-style colouring that represents the relative popularity of Linux distros. Red is hottest and black is coldest.

Linux Distribution	Popularity (average hits per day)
Mint	3065
Ubuntu	2170
Fedora	1693
openSUSE	1398
Debian	1365
Arch	1197
CentOS	980
PCLinuxOS	950
Puppy	876
Mageia	770

Canvas Drawing

I drew this with HTML5 Canvas, but the below image is just a screen capture.

A working demo of these examples—with source code—are in the example.html file in the github repository.

API

The Rainbow class by default maps the range 0 to 100 (inclusive) to the colours of the rainbow (i.e., a gradient transitioning from red to yellow to lime to blue).

var rainbow = new Rainbow(); creates new instance of Rainbow. By default, the number range is from 0 to 100, and the spectrum is a rainbow.

rainbow.colourAt(number); returns the hex colour corresponding to the number. If number is out of range, it returns the appropriate hex colour corresponding to either the minNumber or maxNumber.

rainbow.setSpectrum(colour1, colour2 [,colourN]); sets the spectrum of the Rainbow object. By default, the spectrum is a rainbow. You must have a minimum of two colours, but you can specify more than two colours. Colours can be in the form ‘red’, ‘ff0000’, or ‘#ff0000’. For example, rainbow.setSpectrum('red', 'yellow', 'white'); makes the “Rainbow” a colour gradient from red to yellow to white.

rainbow.setNumberRange(minNumber, maxNumber); sets the number range of the Rainbow object. By default, it is 0 to 100.

If you find any bugs, please let me know.