OK, we can start learning it with using both with the same data to see differences(I'm using d3 v4), imagine we have the data below with using ordinal
and linear
scales:
const data = [1, 2, 3, 4, 5];
const scaleLinear = d3.scaleLinear()
.domain([0, Math.max(...data)]).range([1, 100]);
const scaleOrdinal = d3.scaleOrdinal()
.domain(data).range(['one', 'two', 'three', 'four', 'five']);
Now we start calling them to see the result:
scaleLinear(1); //20
scaleOrdinal(1); //one
scaleLinear(2); //40
scaleOrdinal(2); //two
scaleLinear(5); //100
scaleOrdinal(5); //five
Look at the functions and the results we get, as you see in the ordinal one we map the data to our range, while in the linear one we stretch to the range, so in these cases for example scaleLinear(1) will return 20... our domain max is 100 and 100 divided by 5 is equal 20, so scaleLinear(1) is 20 and scaleLinear(2) is 40...
But as you see, scaleOrdinal(1) is map to the array in the range, so it's equal to one and scaleOrdinal(2) it's equal to two...
So that's how you can use these scales, scaleLinear is useful for many things including present the scale on page, but scaleOrdinal more useful for getting the data in order, that's how it's explained in the documentation:
# d3.scaleLinear() <>
Constructs a new continuous scale with the unit domain [0, 1], the
unit range [0, 1], the default interpolator and clamping disabled.
Linear scales are a good default choice for continuous quantitative
data because they preserve proportional differences. Each range value
y can be expressed as a function of the domain value x: y = mx + b.
d3.scaleOrdinal([range]) <>
Constructs a new ordinal scale with an empty domain and the specified
range. If a range is not specified, it defaults to the empty array; an
ordinal scale always returns undefined until a non-empty range is
defined.
Also this is a good example from d3 in depth using both ordinal and linear scales at the same time:
var myData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
var linearScale = d3.scaleLinear()
.domain([0, 11])
.range([0, 600]);
var ordinalScale = d3.scaleOrdinal()
.domain(myData)
.range(['black', '#ccc', '#ccc']);
d3.select('#wrapper')
.selectAll('text')
.data(myData)
.enter()
.append('text')
.attr('x', function(d, i) {
return linearScale(i);
})
.text(function(d) {
return d;
})
.style('fill', function(d) {
return ordinalScale(d);
});
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<svg width="800" height="60">
<g id="wrapper" transform="translate(100, 40)">
</g>
</svg>
linear(0.5)
. – Lars Kotthoff Apr 22 '15 at 17:15