Javascript gradient color even split blue to gray to red

Question

Using javascript / D3, I am trying to display colors in a color gradient from red to gray to blue, as shown below.

This is taken from Algo Vis Algo Vis slide 13 paper . However, I am unable to create this gradient. I tried creating two gradients from blue to gray and from gray to red, as follows, but my result is off.

botRgb = d3.rgb(0,0,210);
topRgb = d3.rgb(210,0,0);
midRgb = d3.rgb(230,230,230);
gradient1 = d3.interpolateRgb(botRgb,midRgb);
gradient2 = d3.interpolateRgb(midRgb,topRgb);
// assume x is from 0 to 1
if (x < 0.5){
  return gradient1(x)
} else {
  return gradient2(x)
}

Any help would be greatly appreciated, thanks!

Answer 1

d3.scale. , - , x 0 1 - .

- :

var color = d3.scaleLinear()
    .domain([0, 0.5, 1.0])
    .range(["blue", "white", "red"]);

// use with color(x) where x is from 0 to 1;

, rgb.