JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://kamisama.github.com/cal-heatmap/js/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="http://kamisama.github.com/cal-heatmap/css/cal-heatmap.css">
<link rel="stylesheet" href="http://kamisama.github.com/cal-heatmap/css/main.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<div id="cal-heatmap"></div>

CSS

body {
    margin: 1em;
}

JavaScript

var cal = new CalHeatMap();
        cal.init({
            displayLegend: false,
            domain: 'month',
            subDomain: 'x_day',
            subDomainTextFormat: function (d, val) { return new Date(d).getDate() + "<br>€" + val; }, 
            cellSize: 47,
            cellPadding: 5,
            range: 1,
            start: new Date(2015, 5),
            minDate: new Date(),
            maxDate: new Date(2016, 4),
            itemName: ["pound"],
            domainLabelFormat: "%B %Y",
            label: { position: "top", height: 30 },
            data: {
                1433145600: 40,
                1433232000: 20,
                1433318400: 10,
                1433404800: 20,
                1433491200: 10,
                1433577600: 10,
                1433664000: 40,
                1433750400: 30,
                1433836800: 40,
                1433923200: 30,
                1434009600: 10,
                1434096000: 30,
                1434182400: 30,
                1434268800: 20,
                1434355200: 30,
                1434441600: 20,
                1434528000: 10,
                1434614400: 20,
                1434700800: 20,
                1434787200: 10,
                1434873600: 20,
                1434960000: 30,
                1435046400: 40,
                1435132800: 10,
                1435219200: 20,
                1435305600: 10,
                1435392000: 20,
                1435478400: 10,
                1435564800: 30,
                1435651200: 40,
            },
            legend: [10, 20, 30, 40],
            onClick: function (date, nb) {
                alert(date + '|' + nb);
            }

        });