ITエンジニア/デザイナ向けにオープンソースを毎日紹介

一年分の活動を振り返る際にはどういった表示が良いでしょう。各月のカレンダーを表示して、日付ごとに色分けするのも良いでしょう。しかし開発者であればもっと面白い方法があります。それがGitHubのコントリビューショングラフ(正式名称は知りませんが)です。

縦軸に曜日、横に52週分並べればそれだけで一年間を意味するグラフになります。後は活動の多かった日を濃く、何もしていない日を薄くすればOKです。そんなグラフを自分でも簡単に作れるのがGlance Yearです。

Glance Yearの使い方

サンプルです。まさにGitHubのグラフ風です。
サンプルです。まさにGitHubのグラフ風です。

クリックすると詳細が分かります。
クリックすると詳細が分かります。

例えばデータは次のように作ります。

var massive = [
  {date: '2014-8-3', value:'1'},
  {date: '2014-8-4', value:'2'},
  {date: '2014-9-3', value:'3'},
  {date: '2014-10-14', value:'2'},
  {date: '2014-10-13', value:'8'},
  {date: '2014-7-3', value:'1'},
  {date: '2014-7-4', value:'2'},
  {date: '2014-7-7', value:'3'},
  {date: '2014-7-14', value:'2'},
  {date: '2014-6-3', value:'1'},
  {date: '2014-6-4', value:'2'},
  {date: '2014-6-5', value:'3'},
  {date: '2014-6-14', value:'2'}
];

後はそのまま実行するだけです。

$('div#js-glanceyear').glanceyear(massive);

このグラフはGitHubに限らず色々なサービスで使えるのではないでしょうか。特にこのグラフをみてわくわく感を感じてくれそうな人が多そうなサービスに使うと良いと思います(開発者はまさにそうですね)。

Glance YearはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Glance Year - CodePen

Kraigo/glanceyear

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2