Using the ordinal scale

In some cases, we may need to map our data to some ordinal values, for example, ["a", "b", "c"] or ["#1f77b4", "#ff7f0e", "#2ca02c"]. So, how can we perform this kind of mapping using D3 scales? This recipe is dedicated to answer this question.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter4/ordinal-scale.html .

How to do it...

This kind of ordinal mapping is quite common in data visualization. For example, you may want to map certain data points through categorization into some textual value or perhaps into RGB color code, which in turn can be used in CSS styling. D3 offers a specialized scale implementation to handle this kind of mapping. We will explore its usage here. The following is the code of the ordinal-scale.html file:

<div id="alphabet" class="clear"> 
    <span>Ordinal Scale with Alphabet<br></span> 
    <span>Mapping [1...