Visualizing Mike Bostock's GitHub Contributions Calendar — How to Create a JS Calendar Chart
Tags: javascript, webdev, datascience, programming
Published: 2022-02-13 15:57:29

A calendar chart is an effective way to represent activity over time graphically. It can nicely display how a quantity varies with the days, weeks, months, and years. If you want to learn to build stylish interactive calendar charts easily using JavaScript, welcome to my step-by-step tutorial!

To make this guide not only educating but also entertaining, I decided to reproduce [GitHub’s calendar graph](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-graphs-on-your-profile/viewing-contributions-on-your-profile#contributions-calendar) and visualize the repository contribution activity of [Mike Bostock](https://en.wikipedia.org/wiki/Mike_Bostock), a prominent computer scientist known globally as one of the creators of the open-source JavaScript charting library [D3.js](https://d3js.org/) and of the interactive data visualization development platform [Observable](https://observablehq.com/). So, we’ll also get a telling picture of how he performed in that regard!

## Calendar Chart That Will Be Created

Before anything else, let me get you all pumped up by demonstrating the beautiful JavaScript-based calendar chart of Mike Bostock’s contributions that will be created along this tutorial. Read on to see how it’s built!

![Interactive JavaScript calendar chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1au1f2j2mhzrmv3jdp4.png)

## Basic Interactive JS Calendar Chart

An interactive JavaScript calendar chart can look a bit complex. But just follow these basic four steps, and you’ll be able to build one quite easily.

1. Create an HTML page.
2. Add the required JS files.
3. Include the data.
4. Add some JavaScript charting code.

### 1. Create an HTML page

Let’s start with the very basics and create an HTML page to render our JS calendar chart.

On this page, add a `div` element with a unique id attribute so that it can be easily referred to in the code later.

For the full-page rendering of the chart, set the width of the `div` as 100%. You may change this to your liking, of course.

```html
<html>
  <head>
    <title>JavaScript Calendar Chart</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
```

### 2. Include the required JavaScript files

The quickest and most convenient way to create a calendar graph for the web is using a [JavaScript charting library](https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries) that supports this type of data visualization out of the box.

In this tutorial, we will use [AnyChart](https://www.anychart.com/) as an example, and the visualization will be built following its [calendar chart documentation](https://docs.anychart.com/Basic_Charts/Calendar_Chart). This library is free for non-commercial use and has many examples for the various chart types and options. So if you are a beginner, it still looks good for you to start.

Include the required JS files in the `<head>` section of the HTML page. Let’s take them from the [CDN](https://cdn.anychart.com/) this time, but you can also download them if you want.

AnyChart has an inherent modular system. We need two charting modules to create a calendar chart: [core](https://docs.anychart.com/Quick_Start/Modules#calendar) and [calendar](https://docs.anychart.com/Quick_Start/Modules#calendar).

```html
<html>
  <head>
    <title>JavaScript Calendar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-calendar.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // The JS calendar chart code goes here.
    </script>
  </body>
</html>
```

###  3. Procure and add the data

Now, let’s see how to set the data for our calendar chart.

It is easy to retrieve data on the contributions of any GitHub user — we are looking at [Mike Bostock](https://github.com/mbostock) in our case — via the [GitHub GraphQL API](https://github.com/mbostock).

I have already downloaded it and put it in the appropriate form in a JSON data file [here](https://gist.githubusercontent.com/shacheeswadia/56f3867eb6f8fcc4532e7ac458c8d9f7/raw/702f30b457cc1b573093c6977a69958fb741ede6/calendarData.json).

To load this file in a straightforward manner, we can use the [Data Adapter](https://docs.anychart.com/Quick_Start/Modules#data_adapter). Therefore, it needs to be referenced in the `<head>` section of our HTML page together with the other scripts we will use to create the calendar chart.

```html
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
```

We have all the preparation done now, so let’s get on to the JS coding part. You will not believe how just a few lines will create a functional interactive calendar chart very quickly!

### 4. Add the JS charting code

To ensure that the charting code is executed only when the web page is ready, we must enclose it in the `anychart.onDocumentLoad()` function.

Inside, first, load the JSON data file using the `data.loadJsonFile` function.

Then, create a function with the `data` parameter, define a dataset variable to store the data, map the data, and pass the mapped data to the `calendar()` function.

```javascript
anychart.onDocumentReady(function() {

  // load the json file
  anychart.data.loadJsonFile(
    'https://gist.githubusercontent.com/shacheeswadia/56f3867eb6f8fcc4532e7ac458c8d9f7/raw/702f30b457cc1b573093c6977a69958fb741ede6/calendarData.json',

    // create a function with the data parameter
    function(data) {

      // define a dataset variable to store the data
      var dataset = anychart.data.set(data);
      // map the data
      var mapping = dataset.mapAs({
        x: 'date',
        value: 'level'
      });

      // pass the mapped data to the calendar function
      var chart = anychart.calendar(mapping);

    }

  );

});
```

Let’s set the height of our calendar chart dynamically based on its actual value, which will enable scrolling in case the chart’s height is greater than the page’s.

```javascript
chart.listen('chartDraw', function() {       
  document.getElementById('container').style.height = chart.getActualHeight() + 'px';
});
```

Lastly, we add a title to make it clear for everyone what is visualized, set the container reference, and draw the resulting chart.

```javascript
chart.title("GitHub Contributions of Mike Bostock in 2017–2021");
chart.container('container');
chart.draw();
```

That’s all we need to do to get an interactive JavaScript-based calendar chart created! Check out this initial version on [AnyChart Playground](https://playground.anychart.com/lVYS0AHd/).


![A basic JavaScript calendar chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of7k4hbab9kggpikn3qt.png)

Don’t you think this calendar chart looks cool? We can see that Mike Bostock had a huge number of contributions every year, especially in 2017 and 2021. Such an inspiration to code and create more in this new year 2022!

## Advanced Interactive JS Calendar Chart

1. Color customization
2. Stroke, spacing, other aesthetic changes
3. Title and tooltip formatting
4. Configuring the order of years
5. Final touch

**FOR A WALKTHROUGH OF THESE JS CALENDAR CHART CUSTOMIZATIONS, [CONTINUE READING HERE](https://www.anychart.com/blog/2022/02/11/calendar-chart-js/).**