In D3 scale play important role in visualization for encoding, map abstract data to visual representation
Some of the important D3 function
- d3.scaleThreshold()
- d3.scaleOrdinal()
scaleThreshold maps continuous numeric input to discrete values defined by the range. n-1 domain split points are specified where n is the number of range values.
In the following example we split the domain at,0
50
and 100
- u < 0 is mapped to ‘#ccc’
- 0 ≤ u < 50 to ‘lightblue’
- 50 ≤ u < 100 to ‘orange’
- u ≥ 100 to ‘#ccc’
where u is the input value.
2. d3.scaleOrdinal() :
An ordinal scale’s values must be coercible to a string, and the stringified version of the domain value uniquely identifies the corresponding range value.
So, as an example, a domain of an ordinal scale may contain names, like so:
var ordinalScale = d3.scale.ordinal()
.domain(['Alice', 'Bob'])
.range([0, 100]);
ordinalScale('Alice'); // 0
ordinalScale('Bob'); // 100
3. d3.scaleLinear() – Quantitative scale
Quantitative scale functions are those that translate one numeric value into another numeric value using different types of equations such as linear, logarithmic etc.
For example the linear quantitative scale converts a number into another number linearly and can be defined as follows:
var y = d3.scaleLinear() .domain([0, 170]) .range([height,0]);
Where both domain and range value are numeric and continue from max to min or min to max value.