dc.js

Mixin: ColorMixin

ColorMixin

The Color Mixin is an abstract chart functional class providing universal coloring support as a mix-in for any concrete chart implementation.

Source:

Methods

calculateColorDomain()

Set the domain by determining the min and max values as retrieved by .colorAccessor over the chart's dataset.

Source:
Returns:
Type
ColorMixin

colorAccessor( [colorAccessor])

Set or the get color accessor function. This function will be used to map a data point in a crossfilter group to a color value on the color scale. The default function uses the key accessor.

Parameters:
Name Type Argument Description
colorAccessor function <optional>
Source:
Returns:
Type
function | ColorMixin
Example
// default index based color accessor
.colorAccessor(function (d, i){return i;})
// color accessor for a multi-value crossfilter reduction
.colorAccessor(function (d){return d.value.absGain;})

colorCalculator( [colorCalculator])

Overrides the color selection algorithm, replacing it with a simple function.

Normally colors will be determined by calling the colorAccessor to get a value, and then passing that value through the colorScale.

But sometimes it is difficult to get a color scale to produce the desired effect. The colorCalculator takes the datum and index and returns a color directly.

Parameters:
Name Type Argument Description
colorCalculator * <optional>
Source:
Returns:
Type
function | ColorMixin

colorDomain( [domain])

Set or get the current domain for the color mapping function. The domain must be supplied as an array.

Note: previously this method accepted a callback function. Instead you may use a custom scale set by .colors.

Parameters:
Name Type Argument Description
domain Array.<String> <optional>
Source:
Returns:
Type
Array.<String> | ColorMixin

colors( [colorScale])

Retrieve current color scale or set a new color scale. This methods accepts any function that operates like a d3 scale.

Parameters:
Name Type Argument Default Description
colorScale d3.scale <optional>
 d3.scaleOrdinal(d3.schemeCategory20c)
Source:
See:
Returns:
Type
d3.scale | ColorMixin
Example
// alternate categorical scale
chart.colors(d3.scale.category20b());
// ordinal scale
chart.colors(d3.scaleOrdinal().range(['red','green','blue']));
// convenience method, the same as above
chart.ordinalColors(['red','green','blue']);
// set a linear scale
chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);

getColor(d [, i])

Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.

Parameters:
Name Type Argument Description
d *
i Number <optional>
Source:
Returns:
Type
String

linearColors(r)

Convenience method to set the color scale to an Hcl interpolated linear scale with range r.

Parameters:
Name Type Description
r Array.<Number>
Source:
Returns:
Type
ColorMixin

ordinalColors(r)

Convenience method to set the color scale to d3.scaleOrdinal with range r.

Parameters:
Name Type Description
r Array.<String>
Source:
Returns:
Type
ColorMixin