cal-heatmapを使ってGithubの草を再現してみる
Githubの草、去年は結構話題だったかと思います(いや、Githubが出来てからずっとか?w)
遅ればせながら、あの「草」をどのようにすれば作れるのかを調べてみました。
結論としてはcal-heatmapというライブラリを使えば出来ることが分かりました。
https://cal-heatmap.com/
今回はこれを使い、以下のような草をhtmlファイル一つで作ってみました。
htmlファイル一つで作ってみた理由としては
- APIからデータを取得している例が多いが、cal-heatmapを試したいだけの場合はAPIは用意したくない
- cal-heatmapをbowerなどでローカルに持ってきている例も多いが、これも試したいでだけの場合は面倒
といったところです。
今回作成したソース
今回作成したソースは以下になります。
<html> <head> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" /> </head> <body> <div id="sample-heatmap"></div> </body> <script type="text/javascript"> var datas = { "1530370800" : 1, // 2018/07/01 "1530457200" : 3, // 2018/07/02 "1533049200" : 5, // 2018/08/01 "1533135600" : 7, // 2018/08/02 "1546268400" : 10 // 2019/01/01 }; var cal = new CalHeatMap(); var now = new Date(); cal.init({ itemSelector: '#sample-heatmap', domain: "month", data: datas, domainLabelFormat: '%Y-%m', start: new Date(now.getFullYear(), now.getMonth() - 11), cellSize: 10, range: 12, legend: [1, 3, 5, 7, 10], }); </script> </html>
またGithubにも格納してあります。
https://github.com/SrcHndWng/cal-heatmap-sample
過去1年を表示するようになっているので、「datas」に格納しているデータの日付は任意の値に変えてください。
キーは日付のUnix Timestampですが、以下のサイトで算出できます。
https://url-c.com/tc/
少しソースについて解説すると
- head部で必要なライブラリ、css等を参照
- divタグで「草」を表示
- JavaScriptの「datas」に表示するデータを固定値で設定
- 「cal.init~」で草の設定
を行っています。
「datas」については先に書いたように、
- キー = 日付のUnix Timestamp
- 値 = commit(か何かの)回数
となります。
この値は、実運用ではAPIから取得することが多いかと思います。
「cal.init」で草のグラフの書式を設定します。
- domainで月毎の表示
- rangeで表示する期間(ここでは12カ月を設定)
- legentで草の色の濃さを変えるレベルを指定
という感じです。
上記のソースで単純な「草」は実現できましたが、その他の機能を知りたければ
以下の公式ドキュメントを参考にしてみてください。
https://cal-heatmap.com/