GitHub Contributions 風！カレンダーグラフの作り方

こういう形式のグラフって日本語で何ていうの？

作り方

Google Charts の Calendar Chart を使って書きます．データを HTML に打ち込んで，それをブラウザで表示するという大変原始的な手法なので，もっと洗練された方法も考えられるね．でも今回はこの程度で満足することにします！

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Count' });
       dataTable.addRows([
          [ new Date(2021, 08, 03), 1],
          [ new Date(2021, 08, 09), 1],
          [ new Date(2021, 08, 15), 1]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "RareJob Lesson Count",
         height: 350,
         noDataPattern: {
           backgroundColor: '#f0f0f0',
           color: '#fff'
         },
        colorAxis: {
          minValue: 0,
          colors: ['#FFFFFF', '#14c4a5']
        }
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

サンプルコードをコピペしてるだけのコードなので何の付加価値もないかもしれない… 変更した点は以下の4点．

11行目: 2カラム目の id を 'Count' に
21行目: options のパラメータの title を RareJob Lesson Count に
23行目: options のパラメータの backgroundcolor と color も設定した
1. データなし部分の網掛けの色が濃すぎたので薄く
27行目: options のパラメータの colorAxis の，minValue と colors を設定
1. カラーコンターの最小値と，コンターの上限/下限の色を指定