Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 3

Past year of activity svg polyline points

I'm trying to replicate the github "Past year of activity" svg but I'm not sure from which values are used to generate the polyline points. For reference the graph I'm taking about is the one next to each repository on search results or in a user/org page, for example https://github.com/laravel. I'm obtaining the weekly values from the API but the polyline values are not always integer so I guess there is some calculation behind the values. Any idea?

2 Replies
Moderator
Message 2 of 3

Re: Past year of activity svg polyline points

I took a look at the definition of one of the sparkline graphs that you describe as having non-integer values:

 

<svg width="155" height="30">
    <defs>
      <linearGradient id="gradient-7548986" x1="0" x2="0" y1="1" y2="0">
          <stop offset="10%" stop-color="#c6e48b"></stop>
          <stop offset="33%" stop-color="#7bc96f"></stop>
          <stop offset="66%" stop-color="#239a3b"></stop>
          <stop offset="90%" stop-color="#196127"></stop>
      </linearGradient>
      <mask id="sparkline-7548986" x="0" y="0" width="155" height="28">
        <polyline transform="translate(0, 28) scale(1,-1)" points="0,19.1 3,29.0 6,15.0 9,7.76 12,8.24 15,12.1 18,9.69 21,15.97 24,8.24 27,10.17 30,10.41 33,15.24 36,15.72 39,13.55 42,7.03 45,12.59 48,22.24 51,18.86 54,19.34 57,11.38 60,16.45 63,13.79 66,11.14 69,16.45 72,12.83 75,29.0 78,22.24 81,16.93 84,14.03 87,6.31 90,3.41 93,5.59 96,14.28 99,15.48 102,11.14 105,10.17 108,15.97 111,16.45 114,15.97 117,11.62 120,7.28 123,7.03 126,6.31 129,12.34 132,11.38 135,9.93 138,18.14 141,12.59 144,12.34 147,9.93 150,11.14 153,22.48 " fill="transparent" stroke="#8cc665" stroke-width="2">
      </polyline></mask>
    </defs>

    <g transform="translate(0, 2.0)">
      <rect x="0" y="-2" width="155" height="30" style="stroke: none; fill: url(#gradient-7548986); mask: url(#sparkline-7548986)"></rect>
    </g>
  </svg>

If you take a look at the definition of the `svg` element, it's height is 30 and the height of the sparkline `mask` is 28. You'll also notice that none of the Y values in the `points` attribute is larger than 29.0. So it would appear that the reason for the non-integer values is that if any of the values in the Y-axis are greater than 29.0, then the values are scaled to fit into a range from 0.0-29.0.

 

I hope that helps!

 


 

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.

 

As you’ll notice, your topic is now here in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.

 

Highlighted
Copilot Lvl 2
Message 3 of 3

Re: Past year of activity svg polyline points

Hi,

 

I doesn't shed light about how the points are obtainted. The following table shows the first 23 points a svg https://github.com/laravel/docs/graphs/participation?h=28&type=sparkline&w=155 compared to the commits activity https://github.com/laravel/docs/graphs/commit-activity which is the closest graph....

 

10.1223
11.0710
20.8246
13.5826
14.2126
18.9333
9.4910
5.410
5.094
5.46
5.0910
4.465
4.786
5.411
5.47
5.729
3.214
7.6139
9.8125
19.5640
21.7657
2912
6.0320

 

It must be following a custom calculation or a formula to generate the values.

 

Thanks