Divs height relative to some number value inside the div - html

Question

I have a set of blocks, each have some associated number. I need to make blocks height correspond to this number. For example
As you can see the bigger number - the higher is div.
But its not 1:1 related, right? Otherwise we would not even see the blocks with number "1" or "10". So I'm trying to figure out how to calculate this approximate heights. I know its more like mathematical task.
Update: Also values can be any fractions, including less than 1

Answer 1

Finally, we have a working function that solves this problem.
Suppose we have an array of blocks objects with id and relative number value.
function blockHeights(blocks) {
const MAX_HEIGHT_PX = 500;
let logs = [];
blocks.forEach((block) => {
if (block.value) {
logs.push(Math.log10(block.value));
}
});
const minLog = Math.ceil(Math.min(...logs));
const addition = minLog < 0 ? (1 - minLog) : 0;
const maxLog = Math.ceil(Math.max(...logs)) + addition;
const step = MAX_HEIGHT_PX / maxLog;
let blockHeights = {};
blocks.forEach((block) => {
blockHeights[block.id] = Math.round(step * (Math.log10(block.value) + addition));
});
return blockHeights;
}
----------------------------------------------------------
There is also another solution, which works better in my case: to use the formula from here: https://stats.stackexchange.com/a/281164/266299
and normalize all values to fit between your predefined min and max block height. This way the function is going to look like this:
function blockHeights(blocks) {
const MIN_BLOCK_HEIGHT_PX = 65;
const MAX_BLOCK_HEIGHT_PX = 300;
const maxMinDifference = MAX_BLOCK_HEIGHT_PX - MIN_BLOCK_HEIGHT_PX;
const min = Math.min(...Object.values(blocks));
const max = Math.max(...Object.values(blocks));
blocks.forEach(block=> {
result[block.id] = ((block.value - min) * maxMinDifference / (max - min)) + MIN_BLOCK_HEIGHT_PX;
});
return result;
}

Answer 2

Maybe can loop on each value and check if
if (largestValue > 100) {
percentage = (currentValue / largestValue) * 100
if ( percentage < 5 ) {
BlockXUIHeight = 5
BlockXUIWidth = 5
}
}