Your GitHub year in review - 10 fun ways to visualize your contributions
Tags: github, opensource, devjournal, community
Published: 2023-01-09 18:00:55

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aiu8hx9h9iwfdu6oxrhg.png)

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](https://www.spotify.com/us/wrapped/)" and Reddit's 🍌-themed "[Recap](https://www.reddit.com/r/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 <em>Un</em>wrapped

[`Demo`](https://www.githubunwrapped.com/abbycabs) · [`Source`](https://github.com/remotion-dev/github-unwrapped-2022) · [`Create your own`](https://www.githubunwrapped.com/)

[GitHub Unwrapped](https://www.githubunwrapped.com/) 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`](https://twitter.com/search?q=githubunwrapped&src=typed_query&f=live) on Twitter.

![Animation showing @abbycab's GitHub Unwrapped - commits by time of day](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po1hri84j5qy2dmjd27v.gif)

My colleague [@abbycabs](https://github.com/abbycabs) claims the [spike above is due to maternity leave](https://twitter.com/abbycabs/status/1605601728979619846). Let's hope so!

## 2. GitHub Wrapped

[`Source`](https://github.com/neat-run/wrapped) · [`Create your own`](https://wrapped.run/)

[GitHub Wrapped](https://wrapped.run/) by [Neat](https://neat.run/) 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](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme).

![Animation showing the various screens that GitHub Wrapped will create and make available for download](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydk6fqdgk7ubuz8je8yh.gif)

The developers wrote a great little writeup about [how they made it and reached 8000 users in just two weeks](https://neat.run/blog/wrapped).

## 3. GitHub Trends Wrapped

[`Demo`](https://www.githubtrends.io/wrapped/yyx990803) · [`Create your own`](https://www.githubtrends.io/wrapped)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlevst1p3di8hc7vhera.png)

This is the thing that all [PHBs](https://tvtropes.org/pmwiki/pmwiki.php/Main/PointyHairedBoss) will be looking for come performance review time if you're ~~cursed~~ lucky enough to have them.

**Narrator:** Hopefully not.

## 4. GitHub Cities

[`Demo`](https://honzaap.github.io/GithubCity/?name=anipind&year=2022) · [`Create your own`](https://honzaap.github.io/GithubCity/)

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](https://github.com/mrdoob/three.js/).

![Image of a cute 3D city](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mewyexlu7ynkz9vmc7uz.png)

💡 **Idea:** Someone should add a wee car or airplane or something that can be controlled with arrow keys. <kbd>#hint-hint</kbd> <kbd>[#hacktoberfest](https://github.com/search?q=label%3Ahacktoberfest&type=Issues&ref=advsearch&l=&l=)</kbd> <kbd>[#good-first-issue](https://github.com/search?q=label%3Agood-first-issue&type=issues&ref=advsearch&l=&l=)</kbd>

## 5. Open Source Wrapped

[`Source`](https://github.com/Schrodinger-Hat/open-source-wrapped) · [`Create your own`](https://wrapped.schrodinger-hat.it/)

[Open Source Wrapped](https://wrapped.schrodinger-hat.it/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6hlkklxzxcsb3ctgxcn.gif)

See what other folks are sharing on Twitter with [`#githubunwrapped2022`](https://twitter.com/search?q=githubwrapped2022&src=typed_query&f=top).

## 6. GitHub Skyline

[`Demo`](https://skyline.github.com/mishmanners) · [`Create your own`](https://skyline.github.com/)

[GitHub Skyline](https://skyline.github.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsajxjrjhpznkibuanxg.png)

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:

{% embed https://twitter.com/MishManners/status/1609682023958081536 
 %}

**Did you know:** There's an [easter egg in your GitHub Skyline](https://dev.to/github/six-secret-easter-eggs-in-github-2j17#:~:text=To%20activate%20the%20Easter%20egg%2C%20enter%20the%20Konami%20Code%20once%20a%20Skyline%20has%20loaded%20and%20you%27ll%20be%20transported%20back%20even%20further%20in%20time...).

## 7. GitHub Wrap App

[`Demo`](https://www.githubwrap.app/wrap/ladykerr) · [`Create your own`](https://www.githubwrap.app/)

Made with [Next.js](https://github.com/vercel/next.js/), [Tailwind,](https://github.com/tailwindlabs/tailwindcss) and the [Mona Sans font](https://github.com/github/mona-sans), [GitHub Wrap](https://www.githubwrap.app/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5drkguk4fhkhxnbq6nd.png)

Read more about [how @harshil1712 built it](https://harshil.dev/writings/how-i-built-github-wrap).

## 8. GitHub Town

[`Demo`](https://github-town.mornhee.works/blackgirlbytes/2022) ·  [`Create your own`](https://github-town.mornhee.works/)

Inspired by GitHub Skyline and GitHub Cities, [@mornhee](https://github.com/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47x4ump21dkpoetez4ti.png)

**Did you know:** There's a [browser extension that provides an isometric view of contribution graphs on user profiles](https://github.com/jasonlong/isometric-contributions). 

## 9. GitHub Contributions Chart Generator

[`Source`](https://github.com/sallar/github-contributions-chart) · [`Create your own`](https://github-contributions.vercel.app/)

As the name implies, [GitHub Contributions Chart Generator](https://github-contributions.vercel.app) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggd6cckbk6bs3vkp62r8.png)

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

{% embed https://twitter.com/shuding_/status/1610003126190211073 %}

{% embed https://twitter.com/MaximeEuziere/status/1610023085930938368 %}

View [`#githubcontributions`](https://twitter.com/search?q=githubcontributions&src=typed_query) 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](https://docs.github.com/en/graphql) to grab the contributions for a given period with a query like the following:

```graphql
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
          }
        }
      }
    }
  }
}
```

Try it for yourself on the handy [GitHub GraphQL Explorer](https://docs.github.com/en/graphql/overview/explorer) and you'll see a response similar to the following:

```json
{
  "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"
                }
              ]
            }
          ]
        }
      }
    }
  }
}
```

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](https://github.com/tool3/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%)  █░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
```

Or create an amazing ASCII line graph showing your rollercoaster of activity over your last couple of sprints using [asciichart](https://github.com/kroitor/asciichart) (available for [C](https://github.com/annacrombie/plot), [C#](https://github.com/kroitor/asciichart#:~:text=C%23%3A-,asciichart%2Dsharp,-%2C%20ported%20by%20samcarton), [C++](https://github.com/Civitasv/asciichart), [Elixir](https://github.com/sndnv/asciichart), [Java](https://github.com/MitchTalmadge/ASCIIGraph), [JavaScript](https://github.com/kroitor/asciichart), [Go](https://github.com/guptarohit/asciigraph), [Haskell](https://github.com/madnight/asciichart), [Perl](https://github.com/vti/app-asciichart), [Python](https://pypi.org/project/asciichartpy), [PHP](https://github.com/noximo/PHP-colored-ascii-linechart), [Rust](https://github.com/orhanbalci/rasciigraph), and well... you get the picture).

```
   10  ┼---╮                 
   09  ┤   ╰-╮  
   08  ┤     ╰-╮
   07  ┤       ╰-╮
   06  ┤         ╰╮
   05  ┼          ╰╮                      🚀
   04  ┤           ╰-╮                 ╭-╯
   03  ┤             ╰╮               ╭╯
   02  ┤              ╰-╮           ╭-╯
   01  ┤                ╰--╮     ╭--╯
   00  ┤                   ╰-----╯            
```

Or perhaps a multi-line graphic with [Chart.js](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03z7s7gsjn9tbixwgbj8.png)

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!
<br>
![horizontal rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j60i5h4go3jquji9m8vs.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uazchwlcigrkvj8qi5lp.png)