Github風芝生をブログに設置する

WEB制作
Github風芝生をブログに設置する

今回は、cal-heatmap.jsを使って、Githubのプロフィールページにある芝生（contributions）を実装してみたいと思います。

目次

使い方

今回は、CDNを使って必要ライブラリを読み込みます。

html

<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />

js

var cal = new CalHeatMap();
cal.init({
	data: "http://localhost/datas.json"
});

オプションは、様々なものが用意されているので、公式ドキュメントを確認してみてください。

{
	"1530505222":1,
	"1520512222":1,
	"1530515222":1
}

データファイルは、json以外にも、csv、tsv、textを扱うことが可能です。

サンプル

html

<div id="example-heatmap"></div>

js

var now = new Date();
var cal = new CalHeatMap();
cal.init({
    itemSelector: '#example-heatmap',
    domain: "month",
    data: "/api/vi/dates.json",
    domainLabelFormat: '%Y-%m',
    start: new Date(now.getFullYear(), now.getMonth() - 11),
    cellSize: 10,
    range: 12,

    legend: [1, 3, 5, 7],
    legendColors: {
        min: "#efefef",
        max: "steelblue",
        empty: "#efefef"
    },
    tooltip: true
});