I'm trying to set a min of 100 and a max of 300% font-size in css, but I'm having trouble coming up with the proper calculation:
{#if historyTags.length}
<h3>Popular jobs searched by users</h3>
<ul class="tags-list">
{#each historyTags as tag}
<li
style={`font-size: ${
tag.count === minFont ? minFont : (tag.count / maxFont) * (maxFont - minFont) + minFont
}%;`}
>
<a href="/searches/history/tags/{tag.word.toLowerCase()}"
>{tag.word.toLowerCase()} ({tag.count})</a
>
</li>
{/each}
</ul>
{/if}
Font size should be between 100% and 300% but I'm getting 1170%
This entirely depends on the mapping you want to use. E.g. if want the size to increase linearly with number of uses you need the linear function equation:
f(x) = m * x + t
With the two given data points you can determine its constants m and t:
100 = m * min + t
300 = m * max + t
m = (100 - t) / min
300 = ((100 - t) / min) * max + t
t = 300 - ((100 - t) / min) * max
t = 300 - ((100 - t) * max) / min
t = 300 - (100 * max - t * max) / min
t = 300 - ((100 * max) / min - (t * max) / min)
t = 300 - (100 * max) / min + (t * max) / min
t - (t * max) / min = 300 - (100 * max) / min
(t * min) / min - (t * max) / min = 300 - (100 * max) / min
(t * min - t * max) / min = 300 - (100 * max) / min
(t * min - t * max) / min = (300 * min - 100 * max) / min
t * min - t * max = 300 * min - 100 * max
t * (min - max) = 100 * (3 * min - max)
t = 100 * (3 * min - max) / (min - max)
m = (100 - (100 * (3 * min - max) / (min - max))) / min
m = ((100 * (min - max)) / (min - max) - (100 * (3 * min - max) / (min - max))) / min
m = ((100 * (min - max) - (100 * (3 * min - max)) / (min - max))) / min
m = ((100 * (min - max) - (100 * (3 * min - max)) / (min - max))) / min
m = ((100 * min - 100 * max - (300 * min - 100 * max)) / (min - max)) / min
m = ((100 * min - 100 * max - 300 * min + 100 * max) / (min - max)) / min
m = ((-200 * min) / (min - max)) / min
m = (-200 * min) / ((min - max) * min)
m = -200 / (min - max)
So the generic formula in relation to the usage counts corresponding to the min and max sizes is:
f(x) = (-200 / (min - max)) * x + 100 * (3 * min - max) / (min - max)
(The function also outputs values below and above 100/300, so you may need to apply a minimum/maximum.)
Maybe you want the size to grow more rapidly or fall off instead, then something like a quadratic or logistic function would be better.
If you fix some or all of the required variables ahead of time, using the equations will not be as complicated. E.g using linear growth, starting at 0 with variable max count you simply get:
100 = m * 0 + t
300 = m * max + t
t = 100
300 = m * max + 100
300 - 100 = m * max
m = 200 / max
f(x) = x * (200 / max) + 100