D3 ordinal scale only returning extremes. Why isn't it interpolating between range and domain?

Question

I'm trying to use d3.scale.ordinal(). I am having an issue where the function only returns the minimum and maximum scale values.

I am trying to use d3.map() to construct the domain. Then I use an xScale function on the same value

My data looks like this:

key,to_state,value,type
Populate,District of Columbia,836,Populate
Populate,Maryland,1938,Populate
Populate,New Jersey,836,Populate
Populate,Pennsylvania,939,Populate
Populate,New York,3455,Populate

My scale function looks like this:

xScale = d3.scale.ordinal()
                .domain(d3.map(thedata, function(d){console.log(d.to_state); return d.to_state;}))
                .range([0, w - marginleft - marginright]);

My map selection looks like this. The Y and height values are all being calculated properly. Just the X is giving me trouble.

var thechart = chart.selectAll("div")
                .data(thedata)
                .enter()

console.log(xScale("New Jersey") + " " + xScale("Pennsylvania"));

thechart.append("rect").attr("x", function(d, i) {  
                        return xScale(d.to_state) + marginleft;
                    })

score 7 · Accepted Answer · answered Jul 27 '14 at 07:48

An ordinal scale expects the same number of items in the .range array as there are in the .domain array. It is not like a linear scale which interpolates the in-between values when given the boundaries of the range as an array. Since you give only two items in the range, they are alternated as the return values for each value given in the domain.

If you want to have a different return value for each value in your domain, you need to provide the corresponding value in the range. Otherwise, if you just want to provide the boundaries of your range, and have the in-between values calculated for you, use .rangePoints() instead of .range().

HERE is an example that demonstrates the result of using both .range() and .rangePoints() when given 10 values in the domain and 2 values in the range.

To get this to work in your case, you will also want to take @AmeliaBR's suggestion of using Array.prototype.map rather than d3.map, and combine this with .rangePoints() to tween the values of your range.

xScale = d3.scale.ordinal()
  .domain(thedata.map(function(d){ return d.to_state;}) )
  .rangePoints([0, w - marginleft - marginright]);

`.rangePoints()` is no longer available in D3 v4 – lynxoid Aug 08 '16 at 15:21 — lynxoid, Aug 08 '16 at 15:21

score 2 · Answer 2 · answered Aug 10 '21 at 18:40

2

For any version above v4, you'll want to use d3.scalePoint().

E.g.

xScale = d3.scalePoint().domain([0, 1, 2]).range([margin, width - margin])

answered Aug 10 '21 at 18:40

Jared Wilber

6,038
1
32
35

score 1 · Answer 3 · answered Jul 27 '14 at 01:14

1

You are confusing d3.map(object), which creates a hash-map data structure, with Array.prototype.map(function), which transforms one array into another.

Try:

xScale = d3.scale.ordinal()
            .domain(thedata.map(function(d){ return d.to_state;}) )
            .range([0, w - marginleft - marginright]);

answered Jul 27 '14 at 01:14

AmeliaBR

27,344
6
86
119

This still does not return a functioning domain method. Thank you, though. – Union find Jul 27 '14 at 01:39
Ah, of course; I was only looking at the problem with `domain()` and did not notice the problem with the range. As @jshanley points out, you need to use [`rangePoints` or `rangeBands`](https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangePoints). – AmeliaBR Jul 27 '14 at 14:09

D3 ordinal scale only returning extremes. Why isn't it interpolating between range and domain?

3 Answers3

Linked