Heatmap color range based on max & min value - d3.js

Question

I am trying to leverage this example for my visualization
https://bl.ocks.org/Bl3f/cdb5ad854b376765fa99
It pretty much works except this part
var colorScale = d3.scale.threshold()
.domain([0.85, 1])
.range(["#2980B9", "#E67E22", "#27AE60", "#27AE60"]);
I basically want a standard vibgyor visualization based on min & max value of the values in csv data?
Any suggestions, how I can modify the above example.
Thanks

Answer 1

If you want a Violet–Indigo–Blue–Green–Yellow–Orange–Red scale, you can use d3.interpolateRainbow with a sequential scale.
Then, set your domain using the min and max in your values, like any other continuous scale.
Here is a basic example. Suppose this data:
const data = [12, 43, 76, 54, 87, 91, 17, 42, 36];
We set the scale like this:
const scale = d3.scaleSequential()
.domain(d3.extent(data))
.interpolator(d3.interpolateRainbow);
Running demo:
const data = [12, 43, 76, 54, 87, 91, 17, 42, 36];
const scale = d3.scaleSequential()
.domain(d3.extent(data))
.interpolator(d3.interpolateRainbow);
d3.select("body").selectAll(null)
.data(data)
.enter()
.append("div")
.style("background-color", d => scale(d))
div {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Have in mind that this scale won't work for the specific example you linked, since that uses the old D3 v3.