Here is the case, I need to draw a circle in pixels per array of numbers for example [22, 25, 36, 44, 115, 180]
The smallest circle should be 20px, and the largest should be 130px, in this case, the smallest number is 22 and it should be 20px, and the largest is 180 and the circle should be 130px.
So in any case of numbers in the array, we should start with the smallest circle from 20px and the largest 130px, everything between should scale accordingly.
const getSize = (values, value) => {
let size;
const volumes = values.map(a => a.value).sort((a, b) => a - b);
const min = Math.min(...volumes);
const max = Math.max(...volumes);
console.log(min, max, volumes);
return size;
};
The method will receive params from the server, and value from the single object where I need to return the size of the circle in style width and height, something like this below.
<span
style={{
bottom: 0,
width: getSize(item.values, itemData.value),
height: getSize(item.values, itemData.value),
position: 'absolute',
left: 0,
right: 0,
margin: 'auto',
}}
/>
Compute a relative scale of each number as scale = (number - min) / (max - min) and then do the reverse using the desired min and max values:
numbers = [22, 25, 36, 44, 115, 180]
min = numbers[0]
max = numbers[numbers.length - 1]
scales = numbers.map(x => (x - min) / (max - min))
newMin = 20
newMax = 130
newNumbers = scales.map(x => newMin + x * (newMax - newMin))
console.log(newNumbers)Add Math.floor if you need integers.