Search code examples
javascriptd3.jsscale

D3 descending scale

Given a set of number 0 to 1, I need a d3 scaling function that returns 0 to 100.

var scale = d3.scale.linear();
scale.domain([0,1]);
scale.range([0,100]);
scale(0.1);  // 10

This works great. However, because I'm setting opacity for data elements based on confidence intervals, I want the output (range) to diminish as the input (domain) increases.

So for example:

scale(0.1);  // should produce 90
scale(0.2);  // should produce 80
scale(0.3);  // should produce 70

So as the scale input goes up, the output goes down.

How can I instruct the scale object to do this?

Solution

  • You simply need to provide a range that behaves accordingly:

    scale.range([100,0]);

    Note that you could also reverse the domain in this case with the same effect.