CODEWITHSUNDEEP
javacolorsscale
whtvr
whtvr

Reputation: 47

java: represent range of float values on a color scale

I'm trying to create a function that will translate float values to a color. I created a simple linear scale: 

float value;
float maxValue;

float scaleStep = maxValue / 5;

if (value < scaleStep) {
    color = blue
}

if (value > scaleStep && value <= scaleStep * 2) {
    color = green
}

if (value > scaleStep * 2 && value <= scaleStep * 3) {
    color = yellow
}

if (value > scaleStep * 3 && value <= scaleStep * 4) {
    color = orange
}

if (value > scaleStep * 4 && value <= scaleStep * 5) {
    color = red
}

but since most (but not all) of the values from the sets that I'm trying to represent are in close proximity from one particular value, graphical representation using linear scale isn't very useful (almost everything is translated to one color).

How can I create a non-linear scale so that differences between the values are more visible?

Upvotes: 0

Views: 2449

Answers (5)

Mario Rossi
Mario Rossi

Reputation: 7799

A second alternative in your case (which is relatively simple as you want to use just a few colors), is to use scaleSteps of different "width".

if( value < greenMin ) color= blue ;
else if( value < yellowMin ) color= green ;
else if( value < orangeMin ) color= yellow ;
else if( value < redMin ) color = orange ;
else color= red ;

I took the liberty of condensing the code a bit. Let me know if it's not clear. You need to determine the values of greenMin, yellowMin, orangeMin, and redMin, of course. For that, grab a big, representative data sample, sort it, and divide it in 5 groups of equal size. The first value of the second group is greenMin, first value of the third is yellowMin, and so on. You can use an office spreadsheet program to do this, as it's a one-time activity.

Upvotes: 0

Mario Rossi
Mario Rossi

Reputation: 7799

Depending on your distribution, a double or triple log can be better. I made a very quick test, and for the sample { 1.00, 1.20, 1.10, 1.05, 1.15, 9.70, 1.20, 2.00, 1.01, 1.03, 1.16, 1.02, 9.00, 1.20, 1.10, 1.50, 1.05, 1.15, 2.00, 3.00 }, function

int f(float x) {
    return (int)(Math.log(Math.log(x)*100+1)*2.5) ;
}

Produces the following distribution:

f(x)  color   count
 0    blue      4
 1    green     4
 2    yellow    6
 3    orange    3
 4    red       3

Not bad for 5 minutes of work. However, if you post a reasonable sample of numbers (say 100), a distribution graph, or, much better, a distribution histogram, we could help you better. The trick is to find the distribution function of the data. From that function it is very easy to come with a second function that makes the distribution uniform ("flat").

Upvotes: 0

William Morrison
William Morrison

Reputation: 11006

Interpolation is what you want. Interpolation generates samples between known samples in a dataset.

Here, your known samples are your colors; blue, green, yellow, orange, and red. The colors between those known colors are what you're looking for.

Here's a link to a nice visualizer of interpolation functions.

And here's a few interpolation functions for your convenience. Play with them, find the one that works best for you!

public float linearInterpolation(float start, float end, float normalizedValue) {
    return start + (end - start) * normalizedValue;
}

public float sinInterpolation(float start, float end, float normalizedValue){
    return (start+(end-start)* (1 - Math.cos(normalizedValue * Math.PI)) / 2;
}

//usage
linearInterpolation(red, green, .5f);//halfway between red and green.
//same with other demonstrations.

Edit:

Here, start and end refer to a starting and ending sample. The normalizedValue is some value between [0, 1] inclusive (that means it can equal exactly 0 or 1, or any value in between 0 and 1. That's what the term normalized means typically.)

So, for you, start and end will be two colors, and normalizedValue will represent how near you are to the starting or ending color.

Take linearInterpolation for example.

red = 1;
green = 2;
float midway = 1 + (2 - 1) * .5;
//midway = 1.5, which is halfway between red and green.
float allRed = 1 + (2 - 1) * 0;
//allRed = 1, which is the value of red (or start)
float allGreen = 1 + (2 - 1) * 1;
//allGreen = 2, which is the value of green (or end)

So, for linear interpolation, the closer the normalizedValue is to 1, the nearer the returned value it is to end. The closer normalizedValue is to 0, the closer the returned value is to start.

This isn't necessarily true for other interpolation functions. You can think linear interpolation as a simple line segment connecting values. Want a value halfway between those segments? Use a normalized value of .5, viola!

Other functions might have steeper slopes, or even oscillate between start and end!

Try and stop thinking in terms of color, and start thinking more abstractly. Colors are a certain distance apart. Interpolation helps you define what values lie in the distance between them.

Upvotes: 2

andy256
andy256

Reputation: 2881

Since the float values are in a set, you know how many there are and can calculate a color interval. You can then iterate over them, assigning colors and incrementing by the color interval.

Edit: The downside of this approach is that the same float value will not map to the same color when the number of values changes.

Upvotes: 1

Patricia Shanahan
Patricia Shanahan

Reputation: 26185

I suggest a logarithmic scale. If you use base 10 logs, the range will be from -39 to +39.

Upvotes: 0

Related Questions