D3 Examples - html clock w/color scales

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html {
        width: 100%;
        margin: 0;
        font-family: "Helvetica";
    }
    body {
        width: 60em;
        margin: 2em auto;
        background: #C6DBEF;
        position: relative;
    }
    .datediv {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        border:1px solid white;
        margin: auto;
    }
    .time {
        margin-bottom: 1em;
        position: relative;
        width: 100%;
    }
    .hour, .month {
        z-index: -1;
    }
    .minute, .day {
        z-index: 0;
    }
    .second {
        z-index: 1;
    }
    .date {
        margin: 1em 0;
        position: relative;
    }
</style>
    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
​
        <section class="time">
            <div class="datediv second"></div>
            <div class="datediv minute"></div>
            <div class="datediv hour"></div>
        </section>
​
        <section class="date">
            <div class="datediv day"></div>
            <div class="datediv month"></div>
        </section>
​
        <script>
        (function newClock() {
            var colorRange =
                //["#DADAEB", "#3F007D"]; //purple
                ["#C6DBEF", "#08306B"]; //blue
                //["#C7E9C0", "#00441B"]; //green
​
            var date = new Date();
​
            var maxDays =  new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
            var hours = ((date.getHours() / 24) * 50) + 10;
            var minutes = (date.getMinutes() / 60) * hours;
            var seconds = (date.getSeconds() / 60) * minutes;
​
            var months = (((date.getMonth() + 1) / 12) * 50) + 10;
            var days = (date.getDate() / maxDays) * months;
​
​
            var colorSeconds = d3.scale.linear().domain([0, minutes]).range(colorRange);
            var colorMinutes = d3.scale.linear().domain([0, hours]).range(colorRange);
            var colorDays = d3.scale.linear().domain([0, days]).range(colorRange);
            var colorScale = d3.scale.linear().domain([0, 60]).range(colorRange);
​
            $('.second').css("width", seconds + "em").css("height", seconds + "em").css("background", colorSeconds(seconds));
            $('.minute').css("width", minutes + "em").css("height", minutes + "em").css("background", colorMinutes(minutes));
            $('.hour').css("width", hours + "em").css("height", hours + "em").css("background", colorScale(hours));
            $('.time').css("height", hours + "em");
​
            $('.day').css("width", days + "em").css("height", days + "em").css("background", colorDays(days));
            $('.month').css("width", months + "em").css("height", months + "em").css("background", colorScale(months));
            $('.date').css("height", months + "em");
​
            setTimeout(newClock, 1000);
        })()
        </script>
​
    