Open the following link for an example of an ordinal scale. This example does not use the data from The Walking Dead, and simply demonstrates the mapping of string literals representing primary colors into the corresponding color codes.

The scale is created as follows:

var colorScale = d3.scale.ordinal()
    .domain(['red', 'green', 'blue'])
    .range(['#ff0000', '#00ff00', '#0000ff']);

We can now pass any of the range values to the colorScale, as demonstrated with the following:

console.log(colorScale('red'),
    colorsScale('green'),
    colorScale('blue'));

Examining the console output, we can see the results of this mapping as follows:

"#ff0000"
"#00ff00"
"#0000ff"

D3.js comes with several special built-in scales that are referred to as categorical scales. It sounds like a fancy term, but they are simply mappings of a set of integers to unique colors (unique within that scale).

These are useful when you have a set of sequential 0-based integer keys in your data, and you want to use a unique color for each, but you do not want to manually create all the mappings (like we did for the three strings in the previous example).

Open the following link for an example of using a 10 color categorical scale:

The preceding example renders 10 adjacent rectangles, each with a unique color from a category10() color scale. You will see this in your browser when executing this example.

The example starts by creating an array of 10 integers from 0 to 9.

var data = d3.range(0, 9);

The scale is created next:

var colorScale = d3.scale.category10();

Now we can bind the integers to the rectangles, and set the fill for each by passing the value to the colorScale function:

var svg = d3.select('body')
    .append('svg')
    .attr({width: 200, height: 20});

svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr({
        fill: function(d) { return colorScale(d); },
        x: function(d, i) { return i * 20 },
        width: 20,
        height: 20
    });

D3.js provides four sets of categorical color scales that can be used depending upon your scenario. You can take a look at them on the D3.js documentation page at https://github.com/mbostock/d3/wiki/Ordinal-Scales.

In Chapter 4, Creating a Bar Graph, when we drew the graph we calculated the positions of the bars based upon a fixed bar size and padding. This is actually a very inflexible means of accomplishing this task. D3.js gives us a special scale that we can use, given the domain values and essentially a width, that will tell us the start and end values for each bar such that all the bars fit perfectly within the range!

Let's take a look using this special scale with the following example:

This example creates a simple ordinal scale specifying the range using the .rangeBands() function instead of .range(). The entire code of the example is as follows:

var bands = d3.scale.ordinal()
    .domain([0, 1, 2])
    .rangeBands([0, 100]);
console.log(bands.range()); 
console.log(bands.rangeBand());

The .range() function will return an array with values representing the extents of an equal number of evenly-spaced divisions of the range specified to .rangeBands(). In this case, the width of the range is 100, and there are three items specified in the domain; hence, the result is the following:

[0, 33.333333333333336, 66.66666666666667]

Technically, this result is the values that represent the start of each band. The width of each band can be found using the .rangeBand() function, in this case returning the following:

33.333333333333336

This width may seem simplistic. Why have this function if we can just calculate the difference between two adjacent values in the result of .range()? To demonstrate, let's look at a slight modification of this example, available at the following link.

This makes one modification to the call to .rangeBands(), adding an additional parameter that specifies the padding that should exist between the bars:

var bands = d3.scale.ordinal()
    .domain([0, 1, 2])
    .rangeRoundBands([0, 100], 0.1);

The output differs slightly due to the addition of padding between the bands:

[3.2258064516129035, 35.483870967741936, 67.74193548387096]
29.032258064516128

The width of each band is now 29.03, with a padding of 3.23 between bands (including on the outside of the two outer bands).

The value for padding is a value between 0.0 (the default, and which results in a padding of 0) and 1.0, resulting in bands of width 0.0. A value of 0.5 makes the padding the same width as each band.