CODEWITHSUNDEEP
javascriptmathpercentage
CharliePrynn
CharliePrynn

Reputation: 3082

Working out a percentage from a array of numbers

I need to change the opacity of a li depending on the value (Which is set in the html).

So, here is an example of the html:

<ul>
    <li class="test">3</li>
    <li class="test">23</li>
    <li class="test">6</li>
    <li class="test">9</li>
    <li class="test">11</li>
    <li class="test">16</li>
    <li class="test">19</li>
</ul>

So, the highest value (23) would have an opacity of 100% while the next highest (19) would have the a lower percentage and so on.

The lowest value should be 10%.

I can do all of the JavaScript I'm just struggling with the calculation. Does any one have an idea how this could be worked out?

Upvotes: 1

Views: 5207

Answers (8)

Aral Roca
Aral Roca

Reputation: 5899

You can convert:

  • This: [3, 23, 6, 9, 11, 16, 19]
  • To: [2.022256449752507e-7, 98.1128445612884, 0.000004061810658965839, 0.00008158364796565559, 0.0006028261515736386, 0.08946733354469237, 1.7969994313310655] (all sum 100%)

with Math.exp (Softmax function):

const data = [3, 23, 6, 9, 11, 16, 19]
const sumExp = data.reduce((a, b) => a + Math.exp(b), 0)
const percents = data.map(x => (Math.exp(x) / sumExp) * 100)

If you want to display it pretty to render the values on the screen, you can use Intl.NumberFormat:

  • To: ['0%', '98.11%', '0%', '0%', '0%', '0.09%', '1.8%']
const data = [3, 23, 6, 9, 11, 16, 19]
const { format } = Intl.NumberFormat('en', { 
   style: 'percent',
   maximumFractionDigits: 2
})
const sumExp = data.reduce((a, b) => a + Math.exp(b), 0)
const percents = data.map(x => format(Math.exp(x) / sumExp))

Upvotes: 0

Prajapati Ghanshyam
Prajapati Ghanshyam

Reputation: 142

const percentage = () => {
    let arr = [50, 3, 11.5, 25, 10, 15] 
    return arr.map((number) => ((number) / (50) * 100).toFixed())
  }

50 highest value

Upvotes: 0

Patrick87
Patrick87

Reputation: 28292

If the highest opacity is 100% and the lowest is 10%, then here's what you want:

  1. Determine the maximum value. Call it max.
  2. Determine the minimum value. Call it min.
  3. To each value, assign opacity (10 + ((value - min) / (max - min)) * 90) percent.

More generally, if the highest opacity is X and the lowest is Y, then the formula is (Y + ((value - min) / (max - min)) * (X - Y)).

Upvotes: 8

Elesin Olalekan Fuad
Elesin Olalekan Fuad

Reputation: 3313

I had this same problem and solved it this way:

Array.prototype.toPercentage = function() {
  var arr = this
  return arr.map(function(d, i) {
    return (100 * d / arr.reduce((a, b) => a + b, 0)) | 0;
})}

Usage: Given an Array, calculate the percentage of each element in the array.

var nums = [23, 3, 19, 16, 10, 15]
// the percentage
var numsPercent = nums.toPercentage()

Upvotes: 1

Bubbles
Bubbles

Reputation: 3815

I can imagine a simple way of doing it. Lets say you want to style everything from 20% to 100% opacity (you could later change this to be determined by function arguments, but lets keep it simple for now). The first goal is to get the max and min value from the list:

var list = document.getElementsByTagName("ul")[0].children;
var min = Infinity, max = -Infinity;

for (var i = 0; i < list.length; i++) {
   var val = parseInt(list[i].innerText, 10);
   min = Math.min(min, val);
   max = Math.max(max, val);
}

Now, you should just linearly scale the opacity value of each, like so -

var min_opacity = 20, max_opacity = 100;
for (var i = 0; i < list.length; i++) {
  var val = parseInt(list[i].innerText, 10);
  list[i].style.opacity = (min_opacity + ((val - min) / (max - min)) * (max_opacity - min_opacity)  + "%";
}

To expand a bit on the math: most of the legwork here is getting a number on the interval of [0,1], where 0 represents the lowest value and 1 the highest. "(val - min) / (max - min)" performs this scaling: no number will be greater than "max - min" once min has been subtracted from it, and never less than zero once min has been subtracted from it.

Upvotes: 0

Guffa
Guffa

Reputation: 700212

Get the minimum and maximum, then you can calculate the opacity as:

0.1 + 0.9 * (value - min) / (max - min)

Demo: http://jsfiddle.net/Guffa/FBTBw/

Upvotes: 2

rorold
rorold

Reputation: 326

Percentage_value = (value/highest_value)*100

In this case the opacity is proportional to the value, rather than being equally spaced. In other words, if your values were 1, 2 and 10, in this case 1 and 2 would both be much less opaque than 10.

If you can get the highest value in the list, then you can just iterate over all of the values in the list replacing "value" and "highest_value" with the actual numbers each time.

Things to watch out for:

  • You may have to force floating point division by multiplying highest_value by 1.0

  • You may also have to convert the list values from strings into integers or floats

Upvotes: -1

phant0m
phant0m

Reputation: 16905

This is the formula:

percentage = 10 + (number - min)/(max - min)*90

Upvotes: 3

Related Questions