Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Height of bars in days with more than 50 contributions is always 153 #27

Closed
formidablae opened this issue Jan 22, 2022 · 6 comments · Fixed by #28
Closed

Height of bars in days with more than 50 contributions is always 153 #27

formidablae opened this issue Jan 22, 2022 · 6 comments · Fixed by #28

Comments

@formidablae
Copy link
Contributor

Describe the bug
Height of days with more than 50 contributions is always 153.
const calHeight = Math.min(50, cal.contributionCount) * 3 + 3;
https://github.com/formidablae/github-profile-3d-contrib/blob/210fbaf3147b61d63405df0a043af830a252bfe5/src/create-3d-contrib.ts#L219

To Reproduce
Steps to reproduce the behavior:

  1. Do 51 contributions in a day.
  2. Do 65 contributions in the next day.
  3. Generate the 3D contributions svg image.
  4. Both days will have same height.

Expected behavior
Days with different contributions should have different heights.
Days with more contributions should have taller bars than days with fewer contributions.
Days with same number of contributions (in the last 365 days) should have same height of the bar.

Screenshots
Is now:
image
even though those days have different contribution numbers.
image

A possibile solution
Since some users might have days with hundreds of contributions and other days with very few - therefore the bar height difference would be huge and not nice to show linearly, I propose the usage of logarithmic height for the bars. ( in the form of height = log(num_contribs * constant_a + constant_b).
constant_b helps keep decent the height of days with a small number of contributions. When a users starts having more and more contribs, constant_b starts having less influence on the height.
Example (number of contributions -> corresponding height):
1 contribution -> log(1 contrib * 5 + 10) = log(15) = 1.18
2 contribs -> log(2 * 5 + 10) = 1.3
5 contribs -> log(35) = 1.54
10 contribs -> log(60) = 1.78 (going from 1 contribs to 10, increases height by 0.6, +50%)
20 contribs -> log(110) = 2.04
50 contribs -> log(260) = 2.41
100 contribs -> log(510) = 2.71 (going from 10 contribs to 100, increases height by 0.93, +52%)
200 contribs -> log(1010) = 3.00
500 contribs -> log(2510) = 3.40
1000 contribs -> log(5010) = 3.70 (going from 100 contribs to 1000, increases height by 0.99, +37%)
10000 contribs -> log(50010) = 4.70 (going from 100 contribs to 1000, increases height by 1, +27%)
For each order of 10 increase, there would be approximately an increase in height of 1 with relative percentage increase continually decreasing.
This way infinity isn't avoided but height difference between days is preserved and visually it might be nice(r) (play with the constants for a better result - maybe add some other constant related to the average of contributions in the last 365 days).

@yoshi389111
Copy link
Owner

Hi formidablae. Thank you for your proposal.
I think the idea of using logarithms is good.

The formula for finding the height is as follows.

  • Previous height: h1(x) = min(50, x)*3 + 3
  • New height: h2(x) = log(x*N+1)*K + 3

To determine N and K, I set some constraints.

First, if there are fewer contributions, I want to make the difference smaller than before.

  • h2(0) = h1(0) = 3 and h2(1) = h1(1) = 6
  • h2(1) - h2(0) = 3
  • log(N+1)*K - log(1)*K = 3
  • K = 3 / log(N+1)
  • h2(x) = log(x*N+1) / log(N+1) * 3 + 3

Next, I want to display the number of possible contributions at about the previous maximum size.
I think it's about 1200 contributions a day.

  • h2(1200) = h1(50) = 153
  • log(1200*N+1) / log(N+1) = 50
  • N = 0.1008515...

Rounding off the fine numbers, we get the following.

  • h2(x) = log(x/10+1)*72 + 3

However, 1200 contributions per day may be too much.

@formidablae
Copy link
Contributor Author

You are welcome @yoshi389111 :)
Your adjusted solution is better. I didn't know about the max 1200 contributions per day.
Nicely done that reverse parameter calculation!

However, 1200 contributions per day may be too much.

Yeah, you are right. But, since the heights of all days will be recalculated, there shouldn't be unusual differences between them (even with way less contributions than 1200).

Did you do produce any 3d svg with the new formula? Are the heights too low or too high when compared to the heights obtained with the old formula?

@yoshi389111
Copy link
Owner

I didn't know about the max 1200 contributions per day.

I may have misled you.

1200 is not the maximum number of contributions per day on github.
It is the maximum number of contributions that can be displayed in this tool without overlapping or overflowing.

Are the heights too low or too high when compared to the heights obtained with the old formula?

With this formula, the display seems to be too small.

I would like to adjust the formula so that it can be displayed a little larger.

@formidablae
Copy link
Contributor Author

formidablae commented Jan 25, 2022

1200 ... is the maximum number of contributions that can be displayed in this tool without overlapping or overflowing.

Oh ok, now I get it.

With this formula, the display seems to be too small.
I would like to adjust the formula so that it can be displayed a little larger.

Did you try doing an average of the old linear formula and the new logarithmic one?

@yoshi389111
Copy link
Owner

I tried the following formula.

(log10(x*12/5+1)*72 + min(x,50)*3) / 2 + 3

It is uncomfortable to have a small number of contributes.

fig1

fig2

fig3

I thought of using the following formula.

log10(x/20+1)*144+3

It is a little smaller, but I think it is acceptable.

fig4

fig5

fig6

@formidablae
Copy link
Contributor Author

Wow, the second one looks wonderful! Even though the absolute height of 51 contributions/day would now be lower than before, the differences between the heights of different days would still be very distinguishable, colors help too - so that last formula works perfect (for me at least :) ).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants