This is a derivative of Cynthia Brewer's colorbrewer.js, as found in the d3.js project This project contains a few simple extra's, namely:
- addition of the 'qualitative' color schemes (as found in the original colorbrewer tool)
- classification of color schemes according to category (i.e. 'sequential', 'diverging' or 'qualitative')
- an extra 'fun' method for randomly selecting a series of colors from her defined sets based on a given number of colors and, optionally, a category.
- a 'universal module loading wrapper' allowing for AMD, CommonJS and Node.js module loading in addition to the classic global object definition
- a
noConflict
method, akin to jQuery.noConflict() - this fall's squarely into 'because-i-can' category :) - some unit tests for the
random
method and the module loading wrapper
The color set definitions are identical to the original work, a copy of the original license is included
All hail to Cynthia Brewer for her aesthetic sensibility and painstaking work of compiling the color sets!
The files are named colorbrew.js
and colorbrew.css
, they are intended to be drop-in replacements for the colorbrewer.js
and colorbrewer.css
files found in d3.js, as such including the colorbrew.js
in the classical manner (i.e. via <script> tag) will introduce a new global variable named colorbrewer
(rather than colorbrew
), this is done to support drop-in replacement.
using the random
method to retrieve a random array of beautiful colors:
// assumes the 'colorbrewer' var refers to an instance of this module
var number_of_colors = 5;
var colors = colorbrewer.random(number_of_colors);
console.log(colors);
which will output something akin to the following:
["rgb(247,247,247)", "rgb(204,204,204)", "rgb(150,150,150)", "rgb(99,99,99)", "rgb(37,37,37)"]
A couple of scripts are included in the ./gen
directory:
gen/css.js
- generates a new copy of../colorbrew.css
based on the definitions incolorbrew.js
gen/html.js
- generates a 'git-ignored' html file../colors.html
containing grids of the colors defined incolorbrew.js
Testing requires NodeJS, (PhantomJS is also used for headless browser testing).
To test the node module variant, using Node's built asset module do this:
> node ./test/run.nodejs.tests.js
To test commonjs/amd and global var variants using qunit.js, start a webserver:
> node ./test/run.nodejs.server.js
then open the relevant page(s) in your browser ...