Skip to content

Commit

Permalink
Update plottable.js, plottable.d.ts, and other build artefacts
Browse files Browse the repository at this point in the history
  • Loading branch information
Justin Lan committed Apr 18, 2014
1 parent a942b3d commit 8e2689c
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 51 deletions.
56 changes: 46 additions & 10 deletions plottable.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -459,30 +459,66 @@ declare module Plottable {
}
}
declare module Plottable {
class InterpolatedColorScale extends LinearScale {
class InterpolatedColorScale extends QuantitiveScale {
/**
* Converts the string array into a linear d3 scale.
* Converts the string array into a d3 scale.
*
* @param {string[]} colors an array of strings representing color
* values in hex ("#FFFFFF") or keywords ("white").
* @param {string} scaleType a string representing the underlying scale
* type (linear/log/sqrt/pow)
* @returns a quantitive d3 scale.
*/
/**
* Creates a d3 interpolator given the color array.
*
* d3 doesn't accept more than 2 range values unless we use a ordinal
* scale. So, in order to interpolate smoothly between the full color
* range, we must override the interpolator and compute the color values
* manually.
*
* @param {string[]} [colors] an array of strings representing color
* @param {string[]} colors an array of strings representing color
* values in hex ("#FFFFFF") or keywords ("white").
* @returns a linear d3 scale.
*/
/**
* Creates a InterpolatedColorScale.
*
* @constructor
* @param {string|string[]} [scaleType] the type of color scale to create
* (reds/blues/posneg). Default is "reds". An array of color values
* with at least 2 values may also be passed (e.g. ["#FF00FF", "red",
* "dodgerblue"], in which case the resulting scale will interpolate
* linearly between the color values across the domain.
* @param {string|string[]} [colorRange] the type of color scale to
* create. Default is "reds". @see {@link colorRange} for further
* options.
* @param {string} [scaleType] the type of underlying scale to use
* (linear/pow/log/sqrt). Default is "linear". @see {@link scaleType}
* for further options.
*/
constructor(colorRange?: any, scaleType?: string);
/**
* Gets or sets the color range.
*
* @param {string|string[]} [colorRange]. If no argument is passed,
* returns the current range of colors. If the param is one of
* (reds/blues/posneg) we lookup the scale from the built-in color
* groups. Finally, if params is an array of strings with at least 2
* values (e.g. ["#FF00FF", "red", "dodgerblue"], the resulting scale
* will interpolate between the color values across the domain.
*
* @returns the current color values for the range as strings or this
* InterpolatedColorScale object.
*/
public colorRange(): string[];
public colorRange(colorRange: any): InterpolatedColorScale;
/**
* Gets or sets the internal scale type.
*
* @param {string} [scaleType]. If no argument is passed, returns the
* current scale type string. Otherwise, we set the internal scale
* using the d3 scale name. These scales must be quantitative scales,
* so the valid values are (linear/log/sqrt/pow).
*
* @returns the current scale type or this InterpolatedColorScale object.
*/
constructor(scaleType?: any);
public scaleType(): string;
public scaleType(scaleType: string): InterpolatedColorScale;
}
}
declare module Plottable {
Expand Down
118 changes: 81 additions & 37 deletions plottable.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
Plottable v0.8.0 (https://github.com/palantir/plottable)
Plottable v0.8.1 (https://github.com/palantir/plottable)
Copyright 2014 Palantir Technologies
Licensed under MIT (https://github.com/palantir/plottable/blob/master/LICENSE)
*/
Expand Down Expand Up @@ -1122,54 +1122,73 @@ var Plottable;
///<reference path="../reference.ts" />
var Plottable;
(function (Plottable) {
;

var InterpolatedColorScale = (function (_super) {
__extends(InterpolatedColorScale, _super);
/**
* Creates a InterpolatedColorScale.
*
* @constructor
* @param {string|string[]} [scaleType] the type of color scale to create
* (reds/blues/posneg). Default is "reds". An array of color values
* with at least 2 values may also be passed (e.g. ["#FF00FF", "red",
* "dodgerblue"], in which case the resulting scale will interpolate
* linearly between the color values across the domain.
* @param {string|string[]} [colorRange] the type of color scale to
* create. Default is "reds". @see {@link colorRange} for further
* options.
* @param {string} [scaleType] the type of underlying scale to use
* (linear/pow/log/sqrt). Default is "linear". @see {@link scaleType}
* for further options.
*/
function InterpolatedColorScale(colorRange, scaleType) {
if (typeof colorRange === "undefined") { colorRange = "reds"; }
if (typeof scaleType === "undefined") { scaleType = "linear"; }
this._colorRange = this._resolveColorValues(colorRange);
this._scaleType = scaleType;
_super.call(this, InterpolatedColorScale.getD3InterpolatedScale(this._colorRange, this._scaleType));
}
/**
* Converts the string array into a d3 scale.
*
* @param {string[]} colors an array of strings representing color
* values in hex ("#FFFFFF") or keywords ("white").
* @param {string} scaleType a string representing the underlying scale
* type (linear/log/sqrt/pow)
* @returns a quantitive d3 scale.
*/
function InterpolatedColorScale(scaleType) {
InterpolatedColorScale.getD3InterpolatedScale = function (colors, scaleType) {
var scale;
if (scaleType instanceof Array) {
scale = InterpolatedColorScale.INTERPOLATE_COLORS(scaleType);
} else {
switch (scaleType) {
case "blues":
scale = InterpolatedColorScale.INTERPOLATE_COLORS(InterpolatedColorScale.COLOR_SCALES["blues"]);
break;
case "posneg":
scale = InterpolatedColorScale.INTERPOLATE_COLORS(InterpolatedColorScale.COLOR_SCALES["posneg"]);
break;
case "reds":
default:
scale = InterpolatedColorScale.INTERPOLATE_COLORS(InterpolatedColorScale.COLOR_SCALES["reds"]);
break;
}
switch (scaleType) {
case "linear":
scale = d3.scale.linear();
break;
case "log":
scale = d3.scale.log();
break;
case "sqrt":
scale = d3.scale.sqrt();
break;
case "pow":
scale = d3.scale.pow();
break;
}
_super.call(this, scale);
}
if (scale == null)
throw new Error("unknown quantitive scale type " + scaleType);
return scale.range([0, 1]).interpolate(InterpolatedColorScale.interpolateColors(colors));
};

/**
* Converts the string array into a linear d3 scale.
* Creates a d3 interpolator given the color array.
*
* d3 doesn't accept more than 2 range values unless we use a ordinal
* scale. So, in order to interpolate smoothly between the full color
* range, we must override the interpolator and compute the color values
* manually.
*
* @param {string[]} [colors] an array of strings representing color
* @param {string[]} colors an array of strings representing color
* values in hex ("#FFFFFF") or keywords ("white").
* @returns a linear d3 scale.
*/
InterpolatedColorScale.INTERPOLATE_COLORS = function (colors) {
InterpolatedColorScale.interpolateColors = function (colors) {
if (colors.length < 2)
throw new Error("Color scale arrays must have at least two elements.");
return d3.scale.linear().range([0, 1]).interpolate(function (ignored) {
return function (ignored) {
return function (t) {
// Clamp t parameter to [0,1]
t = Math.max(0, Math.min(1, t));
Expand All @@ -1183,7 +1202,38 @@ var Plottable;
// Interpolate in the L*a*b color space
return d3.interpolateLab(colors[i0], colors[i1])(frac);
};
});
};
};

InterpolatedColorScale.prototype.colorRange = function (colorRange) {
if (colorRange == null)
return this._colorRange;
this._colorRange = this._resolveColorValues(colorRange);
this._resetScale();
};

InterpolatedColorScale.prototype.scaleType = function (scaleType) {
if (scaleType == null)
return this._scaleType;
this._scaleType = scaleType;
this._resetScale();
};

InterpolatedColorScale.prototype._resetScale = function () {
this._d3Scale = InterpolatedColorScale.getD3InterpolatedScale(this._colorRange, this._scaleType);
if (this._autoDomain)
this.autoDomain();
this._broadcast();
};

InterpolatedColorScale.prototype._resolveColorValues = function (colorRange) {
if (colorRange instanceof Array) {
return colorRange;
} else if (InterpolatedColorScale.COLOR_SCALES[colorRange] != null) {
return InterpolatedColorScale.COLOR_SCALES[colorRange];
} else {
return InterpolatedColorScale.COLOR_SCALES["reds"];
}
};
InterpolatedColorScale.COLOR_SCALES = {
reds: [
Expand Down Expand Up @@ -1229,7 +1279,7 @@ var Plottable;
]
};
return InterpolatedColorScale;
})(Plottable.LinearScale);
})(Plottable.QuantitiveScale);
Plottable.InterpolatedColorScale = InterpolatedColorScale;
})(Plottable || (Plottable = {}));
///<reference path="reference.ts" />
Expand Down Expand Up @@ -2276,9 +2326,7 @@ var Plottable;
this.dataSelection.enter().append("rect");

var xStep = this.xScale.rangeBand();
var yr = this.yScale.range();
var yStep = this.yScale.rangeBand();
var yMax = Math.max(yr[0], yr[1]) - yStep;

var attrToProjector = this._generateAttrToProjector();
attrToProjector["width"] = function () {
Expand All @@ -2287,10 +2335,6 @@ var Plottable;
attrToProjector["height"] = function () {
return yStep;
};
var yAttr = attrToProjector["y"];
attrToProjector["y"] = function (d, i) {
return yMax - yAttr(d, i);
};

this.dataSelection.attr(attrToProjector);
this.dataSelection.exit().remove();
Expand Down
75 changes: 71 additions & 4 deletions test/tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1777,25 +1777,25 @@ describe("Renderers", function () {
assert.equal(cellAU.attr("height"), "100", "cell 'AU' height is correct");
assert.equal(cellAU.attr("width"), "200", "cell 'AU' width is correct");
assert.equal(cellAU.attr("x"), "0", "cell 'AU' x coord is correct");
assert.equal(cellAU.attr("y"), "0", "cell 'AU' x coord is correct");
assert.equal(cellAU.attr("y"), "100", "cell 'AU' x coord is correct");
assert.equal(cellAU.attr("fill"), "#000000", "cell 'AU' color is correct");

assert.equal(cellBU.attr("height"), "100", "cell 'BU' height is correct");
assert.equal(cellBU.attr("width"), "200", "cell 'BU' width is correct");
assert.equal(cellBU.attr("x"), "200", "cell 'BU' x coord is correct");
assert.equal(cellBU.attr("y"), "0", "cell 'BU' x coord is correct");
assert.equal(cellBU.attr("y"), "100", "cell 'BU' x coord is correct");
assert.equal(cellBU.attr("fill"), "#212121", "cell 'BU' color is correct");

assert.equal(cellAV.attr("height"), "100", "cell 'AV' height is correct");
assert.equal(cellAV.attr("width"), "200", "cell 'AV' width is correct");
assert.equal(cellAV.attr("x"), "0", "cell 'AV' x coord is correct");
assert.equal(cellAV.attr("y"), "100", "cell 'AV' x coord is correct");
assert.equal(cellAV.attr("y"), "0", "cell 'AV' x coord is correct");
assert.equal(cellAV.attr("fill"), "#ffffff", "cell 'AV' color is correct");

assert.equal(cellBV.attr("height"), "100", "cell 'BV' height is correct");
assert.equal(cellBV.attr("width"), "200", "cell 'BV' width is correct");
assert.equal(cellBV.attr("x"), "200", "cell 'BV' x coord is correct");
assert.equal(cellBV.attr("y"), "100", "cell 'BV' x coord is correct");
assert.equal(cellBV.attr("y"), "0", "cell 'BV' x coord is correct");
assert.equal(cellBV.attr("fill"), "#777777", "cell 'BV' color is correct");
};

Expand All @@ -1821,6 +1821,43 @@ describe("Renderers", function () {
VERIFY_CELLS(renderer.renderArea.selectAll("rect")[0]);
svg.remove();
});

it("can invert y axis correctly", function () {
var xScale = new Plottable.OrdinalScale();
var yScale = new Plottable.OrdinalScale();
var colorScale = new Plottable.InterpolatedColorScale(["black", "white"]);
var svg = generateSVG(SVG_WIDTH, SVG_HEIGHT);
var renderer = new Plottable.GridRenderer(null, xScale, yScale, colorScale, "x", "y", "magnitude");
renderer.renderTo(svg);

yScale.domain(["U", "V"]);
renderer.dataSource().data(DATA);

var cells = renderer.renderArea.selectAll("rect")[0];
var cellAU = d3.select(cells[0]);
var cellAV = d3.select(cells[2]);
cellAU.attr("fill", "#000000");
cellAU.attr("x", "0");
cellAU.attr("y", "100");

cellAV.attr("fill", "#ffffff");
cellAV.attr("x", "0");
cellAV.attr("y", "0");

yScale.domain(["V", "U"]);
cells = renderer.renderArea.selectAll("rect")[0];
cellAU = d3.select(cells[0]);
cellAV = d3.select(cells[2]);
cellAU.attr("fill", "#000000");
cellAU.attr("x", "0");
cellAU.attr("y", "0");

cellAV.attr("fill", "#ffffff");
cellAV.attr("x", "0");
cellAV.attr("y", "100");

svg.remove();
});
});
});
});
Expand Down Expand Up @@ -1953,6 +1990,14 @@ describe("Scales", function () {
});

describe("Interpolated Color Scales", function () {
it("default scale uses reds and a linear scale type", function () {
var scale = new Plottable.InterpolatedColorScale();
scale.domain([0, 16]);
assert.equal("#ffffff", scale.scale(0));
assert.equal("#feb24c", scale.scale(8));
assert.equal("#b10026", scale.scale(16));
});

it("linearly interpolates colors in L*a*b color space", function () {
var scale = new Plottable.InterpolatedColorScale("reds");
scale.domain([0, 1]);
Expand Down Expand Up @@ -1984,6 +2029,28 @@ describe("Scales", function () {
assert.equal("#000000", scale.scale(-100));
assert.equal("#ffffff", scale.scale(100));
});

it("can be converted to a different range", function () {
var scale = new Plottable.InterpolatedColorScale(["black", "white"]);
scale.domain([0, 16]);
assert.equal("#000000", scale.scale(0));
assert.equal("#ffffff", scale.scale(16));
scale.colorRange("reds");
assert.equal("#b10026", scale.scale(16));
});

it("can be converted to a different scale type", function () {
var scale = new Plottable.InterpolatedColorScale(["black", "white"]);
scale.domain([0, 16]);
assert.equal("#000000", scale.scale(0));
assert.equal("#ffffff", scale.scale(16));
assert.equal("#777777", scale.scale(8));

scale.scaleType("log");
assert.equal("#000000", scale.scale(0));
assert.equal("#ffffff", scale.scale(16));
assert.equal("#e3e3e3", scale.scale(8));
});
});

describe("Ordinal Scales", function () {
Expand Down

0 comments on commit 8e2689c

Please sign in to comment.