D3 clock / calendar

by yccu

CSS

.blue {
    fill: steelblue;
}
.grey {
    fill: lightgrey;
}

JavaScript

var w = 960,
    h = 500;


var vis = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
    .attr("class", "clock");


var intervals = function () {
    var date = new Date();

    var seconds = date.getSeconds();
    var totalSeconds = 60;

    var minutes = date.getMinutes();
    var hour = date.getHours();

    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDate();

    var daysInCurrentMonth = (function () {
        var today = new Date();
        lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        return lastDayOfMonth.toString().split(' ')[2];
    }());

    var dayInCurrentMonth = (function () {
        var arr = (new Date()).toString().split(' ');
        return arr[2];
    }());

    var daysLeftInMonth = (function () {
        return daysInCurrentMonth - dayInCurrentMonth;
    }());


    // day of year , days left in year
    var dayOfYear = (function () {
        var now = new Date();
        var start = new Date(now.getFullYear(), 0, 0);
        var diff = now - start;
        var oneDay = 1000 * 60 * 60 * 24;
        return Math.floor(diff / oneDay);
    }());

    circleFuction(seconds, totalSeconds, 60, "seconds");
    circleFuction(minutes, 60, 90, "minutes");
    circleFuction(hour, 24, 120, "hours");
    circleFuction(dayInCurrentMonth, daysInCurrentMonth, 150, "dayInCurrentMonth");
    circleFuction(dayOfYear, 365, 180, "dayOfYear");

};




var circleFuction = function (current, total, radius, what) {


    d3.select("g ." + what).remove();

    var group = vis.append("g").attr("class", what);



    var r = radius;
    var p = Math.PI * 2;


    var data = d3.range(total),
        data1 = d3.range(current),
        angle = d3.scale.ordinal().domain(data).rangeBands([0, 2 * Math.PI]),
        angle1 = d3.scale.ordinal().domain(data1).rangeBands([0, (2 * Math.PI) *...