score:0

I'm not sure how it is done in c3, but as you mentioned d3 in your question, you would use a threshold scale in d3.

See this example from blocks:

var colorThresholdScale = d3.scaleThreshold()
  .domain([0.11, 0.22, 0.33, 0.50])
  .range(["#fee5d9", "#fcae91", "#fb6a4a", "#de2d26", "#a50f15"]);

The range in a threshold scale always has one more value than the domain.

If the given value is less than the first value in the domain, then the first value in the range is output:

colorThresholdScale(0.02); // "#fee5d9"

If the input value is greater than the nth value in the domain, and less than the n + 1th value in the domain, then the n + 1th value in the range is output:

colorThresholdScale(0.25); // "#fb6a4a"

If the input value is greater than the last value in the domain, then the last value in the range is output:

colorThresholdScale(0.6); // "#a50f15"

Related Query