DEV Community

Cover image for Your GitHub year in review - 10 fun ways to visualize your contributions
Lee Reilly for GitHub

Posted on

Your GitHub year in review - 10 fun ways to visualize your contributions

Love 'em or loathe 'em, GitHub contribution graphs are often a great way to help share a story.

That little collection of โฌœ๏ธs and ๐ŸŸฉs can show when you started a new job, made your first open source contribution, got GitHub Actions working for the first time(!), or even took some time off to travel or begin your adventure as a new parent.

E.g. here's the first manually-created annotated contribution graph that I created back in 2012 highlighting some of the things I got up to that year:

@leereilly's annotated GitHub contribution graph from 2012

I was clearly working too many weekends and not taking enough vacation in 2012, but it sure was fun. Anyway...

If you follow developers on social media then there's a good chance you've have seen a smorgasboard of contributions graphs, videos and all sorts of fancy visualizations highlighting their 2022 year in review.

Much like Spotify's annual "Wrapped" and Reddit's ๐ŸŒ-themed "Recap" they all offer a fun way to highlight your work.

In no particular order, here are 10+ ways you can do the same. Enjoy!

1. GitHub Unwrapped

Demo ยท Source ยท Create your own

GitHub Unwrapped is a fun and festive way to view your public activity for 2002. In addition to showing you what times and days of the week you're most productive, it'll generate a Christmas tree showing your open and closed issues.

You can share the URL or the video file it creates on social media like thousands of others - see #githubunwrapped on Twitter.

Animation showing @abbycab's GitHub Unwrapped - commits by time of day

My colleague @abbycabs claims the spike above is due to maternity leave. Let's hope so!

2. GitHub Wrapped

Source ยท Create your own

GitHub Wrapped by Neat is a neat little little app showing total number of commits, contributions, stars you've given and received. The images generated would look great on your profile READMEs.

Animation showing the various screens that GitHub Wrapped will create and make available for download

The developers wrote a great little writeup about how they made it and reached 8000 users in just two weeks.

3. GitHub Trends Wrapped

Demo ยท Create your own

Lines of code changed โœ“ Bar charts โœ“ Scatter charts โœ“ Contributions by month, day, time โœ“ Weekend activity โœ“ GitHub Trends Wrapped has all that and more.

Screenshot showing the GitHub Trends Wrapped dashboard

This is the thing that all PHBs will be looking for come performance review time if you're cursed lucky enough to have them.

Narrator: Hopefully not.

4. GitHub Cities

Demo ยท Create your own

You shouldn't build a city on rock and roll. Nor should you build one from your GitHub contributions. That said, @honzaap has managed to create a fantastic visualization using three.js.

Image of a cute 3D city

๐Ÿ’ก Idea: Someone should add a wee car or airplane or something that can be controlled with arrow keys. #hint-hint #hacktoberfest #good-first-issue

5. Open Source Wrapped

Source ยท Create your own

Open Source Wrapped is like Spotify Wrapped, but for your open source contributions. You can download and share the images it generates, or set them as your phone's background if you're vain like me ๐Ÿ˜„

Animation showing the various images Open Source Wrapped will create for you

See what other folks are sharing on Twitter with #githubunwrapped2022.

6. GitHub Skyline

Demo ยท Create your own

GitHub Skyline provides a sci-fi-ish, synthwave-y visualization of your contributions for a given year that's viewable in your browser, in real life, or in virtual reality.

@mishmanner's GitHub Skyline

You can even download the .stl file and print it on a 3D printer. It's the perfect decoration for your desk or mantelpiece! Here's one that @mishmanners created earlier:

Did you know: There's an easter egg in your GitHub Skyline.

7. GitHub Wrap App

Demo ยท Create your own

Made with Next.js, Tailwind, and the Mona Sans font, GitHub Wrap will generate a portrait-style image that would look great as your phone's background, or that empty photo frame you've been meaning to put something in.

Image highlighting a user's annual contributions in terms of commits, pull requests, issues, and repositories created

Read more about how @harshil1712 built it.

8. GitHub Town

Demo ยท Create your own

Inspired by GitHub Skyline and GitHub Cities, @mornhee created this terrific 3D scene with blocks representing months and contributions represented by skyscrapers.

An isometric view of GitHub contributions broken down into blocks of months

Did you know: There's a browser extension that provides an isometric view of contribution graphs on user profiles.

9. GitHub Contributions Chart Generator

Source ยท Create your own

As the name implies, GitHub Contributions Chart Generator will prompt you for a username and generate that user's contribution graph going back every year until their account was created.

A collection of annual GitHub contribution graphs for a user going back years until their account was created

It's a great way to look back over the years and tell a story.

View #githubcontributions on Twitter to see even more.

ProTip: If you fancy trying to visualize this data yourself, you can also download the data in JSON format with the handy link in the bottom left of that webpage.

10. Build your own GitHub contributions visualization

Speaking of JSON, you can use the GitHub GraphQL API to grab the contributions for a given period with a query like the following:



query ContributionGraph {
  user(login: "filmgirl") {
    contributionsCollection(
      from: "2022-01-01T00:00:00+00:00"
      to: "2022-12-31T00:00:00+00:00"
    ) {
      contributionCalendar {
        weeks {
          contributionDays {
            contributionCount
            weekday
            date
          }
        }
      }
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

Try it for yourself on the handy GitHub GraphQL Explorer and you'll see a response similar to the following:



{
  "data": {
    "user": {
      "contributionsCollection": {
        "contributionCalendar": {
          "weeks": [
            {
              "contributionDays": [
                {
                  "contributionCount": 0,
                  "weekday": 6,
                  "date": "2022-01-01T00:00:00.000+00:00"
                },
                ...
                ...
                ...
                {
                  "contributionCount": 0,
                  "weekday": 6,
                  "date": "2022-12-31T00:00:00.000+00:00"
                }
              ]
            }
          ]
        }
      }
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

That's the easy part. Now for the fun part!

Use that data pragmatically along with your favorite data visualization techniques and libraries and you can get very creative!

You could create An ASCII art chart with chartscii to show your activity for the previous week:



 Mon (4.7%)  โ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘
 Tue (5.3%)  โ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘
 Wed (5.7%)  โ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘
Thu (11.8%)  โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘
Fri (68.3%)  โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ
 Sat (3.3%)  โ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘
 Sun (0.8%)  โ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘


Enter fullscreen mode Exit fullscreen mode

Or create an amazing ASCII line graph showing your rollercoaster of activity over your last couple of sprints using asciichart (available for C, C#, C++, Elixir, Java, JavaScript, Go, Haskell, Perl, Python, PHP, Rust, and well... you get the picture).



   10  โ”ผ---โ•ฎ                 
   09  โ”ค   โ•ฐ-โ•ฎ  
   08  โ”ค     โ•ฐ-โ•ฎ
   07  โ”ค       โ•ฐ-โ•ฎ
   06  โ”ค         โ•ฐโ•ฎ
   05  โ”ผ          โ•ฐโ•ฎ                      ๐Ÿš€
   04  โ”ค           โ•ฐ-โ•ฎ                 โ•ญ-โ•ฏ
   03  โ”ค             โ•ฐโ•ฎ               โ•ญโ•ฏ
   02  โ”ค              โ•ฐ-โ•ฎ           โ•ญ-โ•ฏ
   01  โ”ค                โ•ฐ--โ•ฎ     โ•ญ--โ•ฏ
   00  โ”ค                   โ•ฐ-----โ•ฏ            


Enter fullscreen mode Exit fullscreen mode

Or perhaps a multi-line graphic with Chart.js to see how you rank with a friend, colleague, or arch-nemesis?

Line graph showing two developers commits over a small period of time

There are lots of fun and creative ways to visualize that data.

Build something fun? Proud of something that one of the things above generated? Share it in a comment below!


horizontal rule

Remember: there's more to life than green squares on a contribution graph, commits, and lines of code. These are all shared for fun to share on your social feed or parent's refrigerators as appropriate ๐Ÿค ๐Ÿ’š

horizontal rule

Top comments (2)

Collapse
 
adriens profile image
adriens

Amazing set of resources !!! Thanks a lot for sharing it !!!

Collapse
 
dominik90 profile image
Dominik Bartsch

I guess none of them support GitHub Enterprise on-prem instances?