Focusing solely on your initial inquiry of how to link fill colors with the data:
The objective is to have a function that can translate a numerical data value (representing the size of treemap rectangles) into a color value, ensuring a smooth transition of colors between two extremes that correspond to the data's range.
Ordinal color scales, like the ones mentioned here, don't achieve this as they are designed to create distinct color values for differentiation.
To establish a linear relationship with the data, you'll require a linear scale to map the data values into a suitable range for the color functions. Then, a function must be implemented to generate the actual color value, which adjusts based on that number.
Within d3, there exist three categories of functions that provide variations in color:
The color interpolator functions; these are employed internally when specifying a color property transition and produce a function that calculates intermediate colors between a start and end color.
The color creation functions; they accept RGB, HSL, or L*a*b color definitions and return the corresponding hex value. By deploying a linear scale on these numbers, a gradient of colors based on one dimension (hue, lightness, etc.) can be constructed.
The brighter/darker color functions; these allow adjustments in brightness but not hue, initialized with a single color value.
The versatility of the color interpolator functions makes it a recommended choice. Multiple options are available depending on whether the interpolation should adhere to RGB, HSL, or L*a*b color space. For seamless transitions within visible colors, opting for HSL would be wise.
A key point to remember is that the interpolator anticipates a value from 0 to 1. Hence, utilizing a linear scale to convert data values to this range is essential.
var colourScale = d3.scale.linear()
.domain([0, maxArea])
.range([0,1]);
var colourInterpolator = d3.interpolateHsl("blue", "red")
//CSS color strings denote the colors
function colourFunction(d) {
return colourInterpolator( colourScale( d.area ) );
}
/* implementation */
rect.attr("fill", colourFunction);
If the rectangle's area equals the maximum, the scale converts it to 1, rendering the final color of the transition (red). Conversely, if the area nearly approaches zero, the scale value will mirror this, yielding a predominantly blue shade.