Radial 24H scale (from ff)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.time.js"></script>
    <style type="text/css">
    svg path{
        stroke: none;
        fill: lightskyblue;
        stroke-width: 1px;
    }
    </style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">

// Modified from https://groups.google.com/d/msg/d3-js/AWuRpoXxDFk/sOflKd-kzmcJ

var json = [
            {
                "value": 0,
                "timetag": new Date(2011, 0, 1,0,   0),
                "unit": ""
            },
            {
                "value": 1,
                "timetag": new Date(2011, 0, 1, 3, 00)
            },
            {
                "value": 0.5,
                "timetag": new Date(2011, 0, 1, 6, 00)
            },
            {
                "value": 0,
                "timetag": new Date(2011, 0, 1, 12, 00),
                "unit": ""
            },
            {
                "value": 1,
                "timetag": new Date(2011, 0, 1, 18, 00) //"2011-08-14T09:00:24+00:00",
            },
            {
                "value": 0,
                "timetag": new Date(2011, 0, 1, 23, 59) //"2011-08-14T09:00:24+00:00",
            }
            ];

var graphsize = 350;

//the axis is a time scale that runs from 00:00 - 23:59
var y = d3.time.scale().domain([new Date(2011, 0, 1,0,0), new Date(2011, 0, 1, 23, 59)]).range([0, 2* Math.PI]);

function buildData(i) {
    if ( typeof this.currentData == 'undefined' ) this.currentData = 0;
    if ( i > y(json[this.currentData+1].timetag)*180/Math.PI) {
    	/* Step forward */
    	this.currentData++;
    }
	return {
        "value": json[this.currentData].value,
        "timetag": y.invert(i*Math.PI/180)
    }
}

function getValue(d) { return d.value;}

var r = graphsize / 2,
    data = d3.range(361).map(buildData),
    maxValue = d3.max(data, getValue),
    minValue = d3.min(data, getValue),
    delta = Math.abs(maxValue - minValue);

function yValue(d) { return (d.value/delta + 1)* r/2};

var svg = d3.select("#chart").append("svg:svg")
    .data([data])
    .attr("width", r * 2)
    .attr("height", r * 2)
    .append("svg:g")
    .attr("transform", "translate(" + r + "," + r + ")");

svg.append("svg:path")
    .attr("class", "area")
    .attr("d", d3.svg.area.radial()
	    .innerRadius(r / 2)
	    .outerRadius(yValue)
	    .angle(function(d, i) { return y(d.timetag); })
    );

svg.append("svg:path")
	.attr("class", "line")
	.attr("d", d3.svg.line.radial()
	    .radius(yValue)
	    .angle(function(d, i) { return y(d.timetag); }));

svg.append("svg:circle")
    .attr("r", r)
    .attr("stroke", "steelblue")
    .attr("fill", "none");

svg.selectAll("rect.tick")
    .data(d3.range(24))
    .enter().append("svg:rect")
    .attr("class", "tick")
    .attr("x", -2)
    .attr("y", -r)
    .attr("width", 4)
    .attr("height", function(d, i){return (i%2) ? 5 : 15;})
    .attr("transform", function(d, i){return "rotate("+(i*15)+")";})
    .attr("fill", "steelblue");

svg.selectAll("text.label")
    .data(d3.range(24))
    .enter().append("svg:text")
    .attr("class", "label")
    .attr("x", function(d, i){return (r-30)*Math.cos(i*0.26-1.57)})
    .attr("y", function(d, i){return (r-30)*Math.sin(i*0.26-1.57)})
    .attr("fill", "steelblue")
    .attr("alignment-baseline", "middle")
    .attr("text-anchor", "middle")
    .text(function(d, i){return d});

</script>

</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://mbostock.github.com/d3/d3.time.js to a secure url

https://mbostock.github.com/d3/d3.js

https://mbostock.github.com/d3/d3.time.js