Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 13, 2022 03:57 pm GMT

Visualizing Mike Bostock's GitHub Contributions Calendar How to Create a JS Calendar Chart

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 GitHubs calendar graph and visualize the repository contribution activity of Mike Bostock, a prominent computer scientist known globally as one of the creators of the open-source JavaScript charting library D3.js and of the interactive data visualization development platform Observable. So, well 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 Bostocks contributions that will be created along this tutorial. Read on to see how its built!

Interactive JavaScript calendar chart

Basic Interactive JS Calendar Chart

An interactive JavaScript calendar chart can look a bit complex. But just follow these basic four steps, and youll 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

Lets 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>  <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 that supports this type of data visualization out of the box.

In this tutorial, we will use AnyChart as an example, and the visualization will be built following its calendar chart documentation. 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. Lets take them from the CDN 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 and calendar.

<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, lets 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 in our case via the GitHub GraphQL API.

I have already downloaded it and put it in the appropriate form in a JSON data file here.

To load this file in a straightforward manner, we can use the 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.

<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 lets 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.

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);    }  );});

Lets set the height of our calendar chart dynamically based on its actual value, which will enable scrolling in case the charts height is greater than the pages.

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.

chart.title("GitHub Contributions of Mike Bostock in 20172021");chart.container('container');chart.draw();

Thats all we need to do to get an interactive JavaScript-based calendar chart created! Check out this initial version on AnyChart Playground.

A basic JavaScript calendar chart

Dont 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.


Original Link: https://dev.to/andreykh1985/visualizing-mike-bostocks-github-contributions-calendar-how-to-create-a-js-calendar-chart-3p9m

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To