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?

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.

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.12 23
11.07 10
20.82 46
13.58 26
14.21 26
18.93 33
9.49 10
5.4 10
5.09 4
5.4 6
5.09 10
4.46 5
4.78 6
5.4 11
5.4 7
5.72 9
3.2 14
7.61 39
9.81 25
19.56 40
21.76 57
29 12
6.03 20

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

Thanks