Skip to content

Commit

Permalink
Added the possibility not to specify color on one axis.
Browse files Browse the repository at this point in the history
  • Loading branch information
Saucistophe committed Oct 1, 2018
1 parent c8a9e88 commit 70f09b4
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 8 deletions.
8 changes: 6 additions & 2 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,15 +116,19 @@ Number or string, defaults to `null`. Seeds the random number generator to creat

### x_colors

String or array of CSS-formatted colors, default is `'random'`. Specify the color gradient used on the x axis.
False, string, or array of CSS-formatted colors, default is `'random'`. Specify the color gradient used on the x axis.

If false, the colors will not vary over the x axis; this requires the y_color to have a specified value.

Valid string values are 'random' or the name of a [colorbrewer palette](http://bl.ocks.org/mbostock/5577023) (i.e. 'YlGnBu' or 'RdBu'). When set to 'random', a gradient will be randomly selected from the colorbrewer library.

Valid array values should specify the color stops in any CSS format (i.e. `['#000000', '#4CAFE8', '#FFFFFF']`).

### y_colors

String or array of CSS-formatted colors, default is `'match_x'`. When set to 'match_x' the same gradient will be used on both axes. Otherwise, accepts the same options as x_colors.
False, string or array of CSS-formatted colors, default is `'match_x'`. When set to 'match_x' the same gradient will be used on both axes.
If false, the colors will not vary over the y axis; this requires the x_color to have a specified value.
Otherwise, accepts the same options as x_colors.

### color_space

Expand Down
2 changes: 1 addition & 1 deletion dist/trianglify.min.js

Large diffs are not rendered by default.

23 changes: 18 additions & 5 deletions lib/trianglify.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ function Trianglify(opts) {
throw new Error("Cell size must be greater than 2.");
}

if(!opts.x_colors && !opts.y_colors) {
throw new Error("X and Y colors can not be both undefined.");
}

// Setup the color gradient function
var gradient;

Expand All @@ -65,11 +69,20 @@ function Trianglify(opts) {
return chroma(opts.color_function(x, y));
};
} else {
var x_color = chroma.scale(opts.x_colors).mode(opts.color_space);
var y_color = chroma.scale(opts.y_colors).mode(opts.color_space);
gradient = function(x, y) {
return chroma.interpolate(x_color(x), y_color(y), 0.5, opts.color_space);
};
// Both colors are specified: Interpolate between both.
if(opts.x_colors && opts.y_colors){
var x_color = chroma.scale(opts.x_colors).mode(opts.color_space);
var y_color = chroma.scale(opts.y_colors).mode(opts.color_space);
gradient = function(x, y) {
return chroma.interpolate(x_color(x), y_color(y), 0.5, opts.color_space);
};
} else {
// One color missing: Use only the specified one.
var singleColorScale = chroma.scale(opts.x_colors ? opts.x_colors : opts.y_colors).mode(opts.color_space);
gradient = function(x, y) {
return singleColorScale(opts.x_colors ? x : y);
};
}
}

// Figure out key dimensions
Expand Down
4 changes: 4 additions & 0 deletions test/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ describe('Trianglify', function(){
(function() {Trianglify({width: 100, height: 100, bad_option: true});}).should.throw(Error);
});

it('should throw an error on unspecified colors', function() {
(function() {Trianglify({width: 100, height: 100, x_colors: false, y_colors: false});}).should.throw(Error);
});

it('should throw an error on invalid dimensions', function() {
(function() {Trianglify({width: -1, height: 100});}).should.throw(Error);
(function() {Trianglify({width: 100, height: -1});}).should.throw(Error);
Expand Down

0 comments on commit 70f09b4

Please sign in to comment.