Use min_value as the lower boundary domain value

[qur786]

@g1eb Can we use minimum value calculated from the data that we process and use them to generate color code generator instead of passing (-0.15 * max_value) as the lower value for the domain.

.attr('fill', d => {
        let color = d3.scaleLinear()
          .range(['#ffffff', this.props.color])
          .domain([-0.15 * max_value, max_value])
        return color(d.total) || '#ff4500'
      })

And can you explain the reason, if any, behind using (-0.15 * max_value) as the lower value in the domain.

[g1eb]

Ah, I believe that was because I was originally dealing with skewed data, meaning that values were not normally distributed, some really high but most of them very low and this would result in a visualization where you could barely see any colors or difference between dates.

I see your point though, perhaps we can do something smarter here. I'm thinking along the lines of using min_value and max_value as you suggested but adding in some kind of logic to make sure the colors are not all #ffffff for the dates with low values..

[qur786]

Ah, I believe that was because I was originally dealing with skewed data, meaning that values were not normally distributed, some really high but most of them very low and this would result in a visualization where you could barely see any colors or difference between dates.

I see your point though, perhaps we can do something smarter here. I'm thinking along the lines of using min_value and max_value as you suggested but adding in some kind of logic to make sure the colors are not all #ffffff for the dates with low values..

thank you @g1eb for the reply. We'll try to use your logic to implement.