html clock w/color scales

<!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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

https://d3js.org/d3.v3.min.js