We Keep Coding

Represent a number with a color, difference not enough for percentage based rgb

I have an array (1200 values) of numbers
[123, 145, 158, 133...]
I'd like to have a div for each value with a background color from red to green, red being the smallest number and green the largest.
The base setup looks like this: (templating with vuejs but unrelated to the problem)
const values = [123, 145, 158, 133...]; // 1200 values inside
const total = values.length;
<div
v-for="(val, i) in values"
:key="i"
:style="{backgroundColor: `rgb(${(100 - (val*100/total)) * 256}, ${(val*100/total) * 256}, 0)`}">
{{val}}
</div>
I'm not a maths specialist but since all my numbers are around 100, the rgb generated is the same. (around 12% yellowish color)
How can I give more weight to the difference between 137 and 147?
EDIT: final formula:
:style="{backgroundColor: `rgb(${(256/(maxValue-minValue) * (boule-maxValue) - 255)}, ${(256/20 * (boule-maxValue) + 255)}, 0)`}"

Checkout this post: https://stats.stackexchange.com/questions/70801/how-to-normalize-data-to-0-1-range.
Basically you want to linearly rescale your values to another interval. You need your current min and max values from the array. Then define the new min' and max' which are the limits of the new interval. This would be [0, 255] in your case.
To do the transformation use the formula:
newvalue= (max'-min')/(max-min)*(value-max)+max'
As an example:
If your min value is 127 and max is 147, and you want to map 137. Then:
256/20 * (137-147) + 255 which results in 127.
If you want to map 130. Then:
256/20 * (130-147) + 255 = 37.4.

It really depends on what meaning those values actually have
However, you can try this: if your values are always bigger than 100 and always less than 150 (you can choose these number of course) you can "stretch" your values using the values as minimum and maximum. Let's take 137 and 147 as examples:
(val-min) : (max-min) = x : 255
(137-100):(150-100) = x:255 -> 37:50 = x:255 -> 188
(147-100):(150-100) = x:255 -> 47:50 = x:255 -> 239
That is for the math. In the end, this is the calculation:
newValue = (val-min)*255/(max-min)
where min and max are your chosen values.

You could take a kind of magnifier for a range of data. In this example, the values between 20 and 30 are mapped to a two times greater range than the outside values inside of an interval of 0 ... 100.
function magnifier(value, start, end, factor) {
var middle = (start + end) / 2,
size = (end - start) * factor / 2,
left = middle - size,
right = middle + size;
if (value <= start) return value * left / start;
if (value <= end) return (value - start) * factor + left;
return (value - end) * (100 - right) / (100 - end) + right;
}
var i;
for (i = 0; i <= 100; i += 5) {
console.log(i, magnifier(i, 20, 30, 2));
}
.as-console-wrapper { max-height: 100% !important; top: 0; }

Custom Rounding up to nearest 0.05

I want to do custom round up to near 0.05 , based on following condition.It is hard to explain , but following example will be easy to understand .
12.910 - 12.90
12.920 - 12.90
12.930 - 12.90
12.940 - 12.90
12.941 - 12.95
12.950 - 12.95
12.960 - 12.95
12.970 - 12.95
12.980 - 12.95
12.990 - 12.95
12.991 - 13.00
13.000 - 13.00
I tried several function , but it is rounding up 12.98 to 13.00.
function customRound( num) {
return Math.round(num * 20) / 20;
}

Coming at this visually, your rounding algorithm seems to look like this:
The dot is where you want to round to for that interval. ( marks the open end of an interval, ] the closed end. (12.99 belongs to the red interval.) We'll implement this algorithm by manipulating the line to match Math.floor's.
First, let's work with integers.
num * 100
Your rounding interval is left-open and right-closed, but Math.floor is left-closed and right-open. We can flip the line to match by multiplying by −1:
num * 100 * -1
⇒ num * -100
Your rounding intervals' lengths are 5, so we need to put the ends of the intervals on multiples of 5...
num * -100 - 1
...before dividing by 5 to match Math.floor.
(num * -100 - 1 ) / 5
⇒ num * -20 - 0.2
Now we can take the floor.
return Math.floor(num * -20 - 0.2);
Scale back up to the original by multiplying by 5:
return Math.floor(num * -20 - 0.2) * 5;
Shift the returned value over to the dot by adding 4:
return Math.floor(num * -20 - 0.2) * 5 + 4;
Undo the alignment we did earlier:
return Math.floor(num * -20 - 0.2) * 5 + 4 + 1;
⇒ return Math.floor(num * -20 - 0.2) * 5 + 5;
Undo the flip:
return (Math.floor(num * -20 - 0.2) * 5 + 5) * -1;
⇒ return Math.floor(num * -20 - 0.2) * -5 - 5;
And divide the whole thing by 100 to get your original scale back:
return (Math.floor(num * -20 - 0.2) * -5 - 5) / 100;
⇒ return Math.floor(num * -20 - 0.2) * -0.05 - 0.05;
Using Robin Zigmond's testing framework,
function customRound(num) {
return Math.floor(num * -20 - 0.2) * -0.05 - 0.05;
}
// test desired results
var tests = [12.91, 12.92, 12.93, 12.94, 12.941, 12.95, 12.96, 12.97, 12.98, 12.99, 12.991, 13];
for (var i=0; i<tests.length; i++) {
console.log(`${tests[i].toFixed(3)} - ${customRound(tests[i]).toFixed(2)}`);
}

If you really intended to round everything within < .01 of the nearest .05 then try the below, to get the precision of the number it uses answer from Is there a reliable way in JavaScript to obtain the number of decimal places of an arbitrary number?
function decimalPlaces(n) {
var s = "" + (+n);
var match = /(?:\.(\d+))?(?:[eE]([+\-]?\d+))?$/.exec(s);
if (!match) { return 0; }
return Math.max(
0, // lower limit.
(match[1] == '0' ? 0 : (match[1] || '').length)
- (match[2] || 0));
}
var test = 12.941;
var factor = Math.pow(10,decimalPlaces(test));
var remainder = ((test * factor) % (.05 * factor))/factor;
var result;
if (remainder>.04) {
result = Math.round(test*20)/20;
} else {
result = (test*factor - remainder*factor)/factor;
}
console.log('result is:',result);

As far as I can tell from your example, the desired behaviour appears to be "round up to the nearest 0.01, then round that result down to the nearest 0.05".
This can be implemented as follows. As you can see, it agrees exactly with your examples (I even took care to format it the same way) - but please let me know if I've got the wrong end of the stick.
function customRound(num) {
var intermediateResult = Math.ceil(num*100)/100;
return Math.floor(intermediateResult*20)/20;
}
// test desired results
var tests = [12.91, 12.92, 12.93, 12.94, 12.941, 12.95, 12.96, 12.97, 12.98, 12.99, 12.991, 13];
for (var i=0; i<tests.length; i++) {
console.log(`${tests[i].toFixed(3)} - ${customRound(tests[i]).toFixed(2)}`);
}

Math.random() applied as a percentage?

so I have this code that is giving me a random number for both top and left attribute of some images.
var random1 = Math.ceil(Math.random() * 500);
var random2 = Math.ceil(Math.random() * 500);
$(document).ready(function () {
$('#randomp').css('top', random1);
$('#randomp').css('left', random2);
});
The problem is that I would be prefer to randomize a number between 1 and 100%. Is that possible?

Math.floor(Math.random() * 100) + 1 + '%'

Since Math.random returns number that is random, not less than 0 and less than 1, you have just to multiply result by 99 instead of 500 to get a number beetween 1 and 100%.
Finally, the code should be as follows:
var random1 = Math.round(Math.random() * 99) + 1;
var random2 = Math.round(Math.random() * 99) + 1;

This gives you a number between 0 and 100 (both included):
Math.floor(Math.random() * 101);
Math random will give you a number between 0 (included) and 1 (excluded)
If you multiply that number with 101, it will give you a number between 0 (included) and 101 (excluded)
Math.floor will return the the largest integer less than or equal to the above number.

Not sure if you want it rounded or not, so here's both:
console.log( rando(1, 100) + "%" );
console.log( rando(1, 100, "float") + "%" );
<script src="https://randojs.com/1.0.0.js"></script>
This uses randojs.com to make the randomness simple and readable. If you need to know more, check out the website.

JavaScript - random multiple of 20 between 0 - 580

In Javascript, how do I create a random even number multiplied by 20 between 0 - 580?
E.g.: 220, 360, 180, 0 (min), 400, 200, 580 (max)

You want increments of 20, so what you really need is an integer in the range 0 to 29, and then multiply with 20. Example:
var max = (580/20) + 1;
var result = 20 * (Math.floor(Math.random())*max)
We are adding one to max, because Math.random() is a uniformly distributed number between (inclusive 0) and (exclusive 1), so since we use Math.floor, the maximum must be 1 larger.

This way creates a random number, then rounds it down to the nearest multiple:
When you need 0 <= randomMultiple <= max
var random = Math.random() * (580 + 20);
randomMultiple = random - (random % 20);
When you need 0 <= randomMultiple < max
var random = Math.random() * 580;
randomMultiple = random - (random % 20);

Use a principle like this: Generate random number between two numbers in JavaScript
Keeping in mind that if you want your max result to be 580, then the maximum integer you want to multiply by 20 would be 29 (or 580/20). Then just add some logic to make sure the integer is even.
Ta da!

Try use this:
var result = parseInt(Math.random()*30)*20;
29*20 = 580
Math.random() return [0..1)
result between 0..580, step by 20

Here is a generic javascript one-liner that can be used for any range, and any multiple.
Essentially, what we are trying to do here is figure out a range, 0 to N, which when multiplied by our given multiple stays within the range [0,max-min].
In this case N, is simply, (max - min)/multiple, or range/multiple.
Once we have N, we can use Math.random() to get a random number between 0-N, and multiply it with multiple. Next, we just add min.
We assume that min and max are already multiples of multiple.
Note the additional +1 to the input of Math.random() is because Math.random() returns a number between 0 (inclusive) and 1 (exclusive). So, Math.random() can never return 1. If we didn't account for that we would never be able to include the max number in our results.
/*
* Returns a random number within range [min,max]
*
* min and max must be multiples of multiple
* (note that 0 is a multiple of all integers)
*/
function randomMultiple (min, max, multiple) {
return Math.floor(Math.random() * (((max - min)/multiple)+1)) * multiple + min;
}
console.log(randomMultiple(0, 580, 20));

Javascript calculation bug

is there a better way to multiply and divide figures than using the * and / ?
There is a strange behavior in Chrome Firefox and Internet Explorer using those operaters:
x1 = 9999.8
x1 * 100 = 999979.9999999999
x1 * 100 / 100 = 9999.8
x1 / 100 = 99.99799999999999
http://jsbin.com/ekoye3/
I am trying to round down the user input with parseInt ( x1 * 100 ) / 100 and the result for 9999.8 is 9999.79
Should I use another way to achieve this?

That's no bug. You may want to check out:
Is JavaScript’s math broken?
Integer arithmetic in floating-point is exact, so decimal representation errors can be avoided by scaling. For example:
x1 = 9999.8; // Your example
console.log(x1 * 100); // 999979.9999999999
console.log(x1 * 100 / 100); // 9999.8
console.log(x1 / 100); // 99.99799999999999
x1 = 9999800; // Your example scaled by 1000
console.log((x1 * 100) / 10000); // 999980
console.log((x1 * 100 / 100) / 10000); // 9999.8
console.log((x1 / 100) / 10000); // 99.998

You could use the toFixed() method:
var a = parseInt ( x1 * 100 ) / 100;
var result = a.toFixed( 1 );

You may want to check this. If you want to do computation on numbers which represent money, you should count cents and use integers.