CODEWITHSUNDEEP
javascriptd3.js
cmp
cmp

Reputation: 568

D3 scale not mapping colors to values

I am trying to create a scale mapping integers to colors that determine the fill of a circle.

I have tried using d3.scaleThreshold to 'bucket' the values in the domain but to no avail. As it stands, the scale maps all the values to one color.

Would really appreciate any pointers here!

Code:

var colours = ["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB",
"#63FFCB","#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63",           
"#FBFF63","#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"];

var heatmapColour = d3.scaleLinear()
.domain(d3.range((0, 1, 1.0 / (colours.length - 1))))
.range(colours);

var hi_scale = d3.scaleLinear()
.range([0,100])
.domain(hi_extent);

Upvotes: 1

Views: 247

Answers (1)

Eric Guan
Eric Guan

Reputation: 15992

Use a quantize scale

https://jsfiddle.net/erxws2c8/

var colours = ["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB",
"#63FFCB","#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63",           
"#FBFF63","#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"];

var heatmapColour = d3.scaleQuantize()
.domain(d3.range(0, 1, 1.0 / (colours.length - 1)))
.range(colours);

Also you had an extra set of parenthesis in d3.range((0, 1, 1.0 / (colours.length - 1))), causing the function to see 1 argument instead of 3.

You may want to consider a quantile scale as well.

Upvotes: 1

Related Questions