CODEWITHSUNDEEP
javascriptd3.jschartsheatmapdc.js
timJIN520
timJIN520

Reputation: 309

Heatmap dc.js - provide the color range manually

I'm not sure how to do this. I'm developing a heatmap dc.js. I want to set a range of colors manually. For example,

var chart = dc.heatMap('#heatmapID');

chart
    .width(690)  //850
    .height(400)
    .margins({top: 10, right: 0, bottom: 50, left: 70})
    .dimension(dimension)
    .group(group)
    .keyAccessor(function(d) { return d.key[0]; })
    .valueAccessor(function(d) { return d.key[1]; })
    .colorAccessor(function(d) {return d.value.rate;});
chart.data(grouphelper.dataAccessor(dimension)); 
chart.colors(['#30d074', '#f3cb2c', '#ffa85c', '#ff604e']) 
    .calculateColorDomain();

The code above works but its automatically setting the colors base on the min and the max data (I'm assuming). For the chart.colors(....) i want to set a range manually but when I tried to apply a return function, for example,

 //Outside of the chart function
 var colors = ['#30d074', '#f3cb2c', '#ffa85c', '#ff604e'];
 function colorHeatMap() { 
  return d3.scale.threshold().domain([0.02,0.06,0.23]).range(colors);   }

 //now apply colorHeatMap function into the .color function.
 chart.colors(colorHeatMap()) .calculateColorDomain();

I received a _colors.domain is not a function error. When I remove the .calculateColorDomain(), the heatmap display all black boxes. My goal is to set the range manually for the 4 colors. Please help. This approach works well with dc row charts but I cannot figure out how to do that for the heatmap.

Upvotes: 3

Views: 824

Answers (1)

incredi_imp
incredi_imp

Reputation: 75

You cannot pass an array colors to the chart.colors() function; you must pass a d3 color scale object. That's why your heatmap shows all black boxes when you remove calculateColorDomain().

I've run into a similar issue, and my solution was to create a colorDomain array and use it to access the colors. If you know which values you want to assign to each color, it's simple: just put the values in an array in that order.

var colorsDomain = [0.02, 0.06, 0.23];
var colors = ['#30d074', '#f3cb2c', '#ffa85c', '#ff604e'];

chart.colors(d3.scaleQuantize().domain([0, colors.length - 1]).range(colors))
       .colorAccessor(d => colorsDomain.indexOf(d.value.rate))

It looks like you might be using d3 v3 or lower, in which case you would want to use d3.scale.quanitze() instead of d3.scaleQuantize() in the colors function. Hope this helps!

Upvotes: 2

Related Questions