2

I have this code and i'd like to color the arc relatively to the value, passing a range of two colors (i.e. ['#f00', '#ff0]).

I can't find a way to declare a scale that builds me the right colors.

And i can't find anything on docs either...

This is the codepen where i would like to implement this

https://codepen.io/adeveloperdiary/pen/OydzpG

This is how i tried with no success 

 const colorRange = ['#f00', '#0f0'];
 
 const colorScale = d3.scaleOrdinal()
    .range([0, 100])
    .domain(colorRange);
    
 console.log(colorScale(75));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.2.0/d3.min.js"></script>
marco burrometo
  • 1,055
  • 3
  • 16
  • 33
  • Do you want the arc to be full red at 1%, and full blue when it's 99%, or do you want it to be a gradient from red to blue? – JackRed Jun 12 '19 at 09:35
  • Gradient, i want the color to depend from the value – marco burrometo Jun 12 '19 at 09:37
  • like [this question](https://stackoverflow.com/questions/18206361/svg-multiple-color-on-circle-stroke)? – JackRed Jun 12 '19 at 09:38
  • Nope, this is a gradient. i need that if it's 100% the fill is #0f0 and if for example is 50% it's something in between #f00 and #0f0.. – marco burrometo Jun 12 '19 at 09:42
  • Yeah, when it's full it's like the gradient (forgot my old comment, I misread). I didn't understand the question the first time, sorry – JackRed Jun 12 '19 at 09:44

1 Answers1

3

You need a linear scale, not an ordinal scale. Also, swap the domain and range:

const colorRange = ['#f00', '#0f0'];

const colorScale = d3.scaleLinear()
  .domain([0, 100])
  .range(colorRange);

console.log(colorScale(75));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.2.0/d3.min.js"></script>

Here is the CodePen you linked with that scale (using D3 v3): https://codepen.io/anon/pen/RzNYvy

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171