d3 tron style wip

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px 'M+ 1m';
  font-weight:100;
  background:#121212;
}

path.rim {
    stroke:#456763;
    stroke-width:0.5;
    fill:none;
}

path.interval {
    stroke:#f7f3f5;
    stroke-width:0.5;
    fill:#2af3f8;
}

circle.hr, circle.hr-inner {
    fill:#c3feff;
}

text.hr-label {
    fill:#ced5d3;
}

.beacon {
    fill:#f59423;
}

text.beacon-text {
  font: 12px 'M+ 1mn';
    fill:#f59423;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var intervals = [{
    values: [{
        start: new Date(),
        end: new Date(-(1000 * 60 * 60) + +new Date()),
        y: 10,
        y0: 0,
        x: d3.time.hour(new Date()),
        name: 'Foo bar'
    }]
}];

var hours = d3.range(24);

var width = 960,
    height = 500,
    innerRadius = Math.min(width, height) * .25,
    outerRadius = innerRadius * 1.1;

var fill = d3.scale.ordinal()
    .domain(d3.range(4))
    .range(["#000000", "#FFDD89", "#957244", "#F26223"]);

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

svg.append("g").selectAll("path.rim")
    .data([{startAngle: 0, endAngle: Math.PI * 2 }])
  .enter().append("path")
    .attr('class', 'rim')
    .attr('d', d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius));

svg.append("g").selectAll("circle.hr")
    .data(hours)
  .enter().append("circle")
    .attr('r', 1)
    .attr('class', 'hr')
    .attr('transform', function(d) {
        return 'translate(' + [Math.cos(d / 12 * Math.PI) * outerRadius, Math.sin(d / 12 * Math.PI) * outerRadius] + ')';
    });

svg.append("g").selectAll("circle.hr-inner")
    .data(hours)
  .enter().append("circle")
    .attr('r', 2)
    .attr('class', 'hr-inner')
    .attr('transform', function(d) {
        return 'translate(' + [Math.cos(d / 12 * Math.PI) * innerRadius, Math.sin(d / 12 * Math.PI) * innerRadius] + ')';
    });

var hrScale = d3.scale.linear()
    .domain([d3.time.day(new Date()), d3.time.day.offset(d3.time.day(new Date()),1)])
    .range([-Math.PI/2, (Math.PI * 2) - (Math.PI/2)]);

ticks.append("text")
    .attr('class', 'hr-label')
    .attr("x", 8)
    .attr("dy", ".35em")
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .text(function(d) { return d.hour; });

var d2r = 180 / Math.PI;

var now = svg.append("g")
  .datum(new Date());

now.append('rect')
    .attr('class', 'beacon')
    .attr('transform', 'translate(' + [0,0] + ')')
    .attr('width', innerRadius / 2)
    .attr('height', 1);

now.append('text')
  .attr('class', 'beacon-text')
  .style("text-baseline", 'middle')
  .attr('transform', 'translate(' + [innerRadius / 2 + 5, 0] + ')');

function updateNow() {
  now.datum(new Date());
  now.attr("transform", function(d) {
    return "rotate(" + (hrScale(d) * d2r) + ")";
  });
  now.select('text').text(d3.time.format('%X'));
}

window.setInterval(updateNow, 100);

var stack = d3.layout.stack()
    .values(function(d) { return d.values; });

svg.append("g").selectAll("path.interval")
    .data(stack(intervals))
  .enter().append("path")
    .attr('class', 'interval')
    .attr('d', function(d) {
        var o = outerRadius + 30 + d.values[0].y0;
        var startAngle = hrScale(d.values[0].start) + Math.PI / 2;
        var endAngle = hrScale(d.values[0].end) + Math.PI / 2;
        return d3.svg.arc().innerRadius(o + 5).outerRadius(o + 30)({
            startAngle: startAngle,
            endAngle: endAngle
        });
    });

</script>

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

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