Divs height relative to some number value inside the div

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

How about basing the height off the logarithm of the number? — Nate Whittaker, Dec 07 '18 at 17:40
Yes, you right, the number's order of magnitude will be the base. There will be a little problem with fractions, because they will have a negative magnitude. But I think there is a way around this — Anna, Dec 19 '18 at 15:15
You will need to sum all values, and for each block, make `height: 100% * BLOCK_VAL / SUM` — Maxwell s.c, Nov 20 '19 at 12:26

Anna · Accepted Answer · 2019-11-20T16:00:18.970

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;
 }

score 0 · Answer 2 · answered Dec 07 '18 at 16:28

0

Maybe can loop on each value and check if

 if (largestValue > 100) {
      percentage = (currentValue / largestValue) * 100
      if ( percentage < 5 ) {
           BlockXUIHeight = 5
           BlockXUIWidth = 5
      }
 }

answered Dec 07 '18 at 16:28

Morhaf Shamia

352
1
13

Divs height relative to some number value inside the div

2 Answers2

----------------------------------------------------------