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

Open
#256 1 comment 0 reactions 0 assignees View on GitHub

@Rajvira10 is already working on this.

Since Oct 16, 2026.

  • #291 by @Rajvira10 — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
d3, javascript

Research direction

Start by reading the diverging scale implementation and its tests; the issue does not name specific files. Reproduce the reported case with domain [1, 1, 0] and compare it with the sorted-domain example. Done means the reversed domain maps values across the two halves as expected, with regression coverage for the reported edge case.

Written by the indexing model from the issue text.

Description

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/[email protected]/dist/d3.min.js.

Dominant language
JavaScript
Stars
1.6k
Forks
288
Avg merge
6h 41m
Merged PRs (30d)
1

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from d3/d3-scale

All issues in d3/d3-scale

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.