Skip to content

scaleDiverging for domain [1,1,0] produces wrong results #256

@MaPePeR

Description

@MaPePeR

The d3.scaleDiverging Method returns wrong results if the domain is reverted and the left domain border is equal to the midpoint.

const s = d3.scaleDiverging().domain([1, 1, 0]);
for (const i of [-0.5, 0, 0.25, 0.5, 0.75, 1, 1.5]) {
    console.log(i, s(i));
}
/* prints
-0.5     0.5
 0       0.5
 0.25    0.5
 0.5     0.5
 0.75    0.5
 1       0.5
 1.5     0.25
*/

Having the domain sorted and applying 1-x to the scale produces the expected results:

const s = d3.scaleDiverging().domain([0, 1, 1]);
for (const i of [-0.5, 0, 0.25, 0.5, 0.75, 1, 1.5]) {
    console.log(i, 1 - s(i));
}
/* prints
-0.5     1.25
 0       1
 0.25    0.875
 0.5     0.75
 0.75    0.625
 1       0.5
 1.5     0.5
*/

I encountered this because I wanted to use the RdBu colormap and map values [0,1] to [0.5,1] (blue part) and [1,max(data)] to [0, 0.5] (red part):

const colorMap = d3.scaleDiverging().domain([Math.max(maxValue, 1), 1, 0]).interpolator(d3.interpolateRdBu);

and had to change it to this:

const colorMap = d3.scaleDiverging().domain([0, 1, Math.max(maxValue, 1)]).interpolator(x => d3.interpolateRdBu(1 - x));

I use https://cdn.jsdelivr.net/npm/d3@7.0.1/dist/d3.min.js.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions