Open MaPePeR opened 3 years ago
The d3.scaleDiverging Method returns wrong results if the domain is reverted and the left domain border is equal to the midpoint.
d3.scaleDiverging
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:
1-x
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):
RdBu
[0,1]
[0.5,1]
[1,max(data)]
[0, 0.5]
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.
https://cdn.jsdelivr.net/npm/d3@7.0.1/dist/d3.min.js
Right, diverging scales don’t currently support reversed (or “descending”) domains. We’d need to add that feature.
The
d3.scaleDiverging
Method returns wrong results if the domain is reverted and the left domain border is equal to the midpoint.Having the domain sorted and applying
1-x
to the scale produces the expected results: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):and had to change it to this:
I use
https://cdn.jsdelivr.net/npm/d3@7.0.1/dist/d3.min.js
.