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.
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 .
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...