heat-chart.js

var chart = circularHeatChart()
    .numSegments(24)
    .radialLabels(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"])
    .segmentLabels(["Midnight", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "Midday", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"])
    .margin({top: 20, right: 0, bottom: 20, left: 80})
    .innerRadius(30)
    .segmentHeight(20)
    .range(["orange", "magenta"])

var data = [];

// populate with random data
for (var i = 0; i < 168; i++) {
    data[i] = Math.random();
}

d3.select('svg')
    .style("display", "block")
    .data([data])
    .call(chart);

var rotate = 5

function rotateChart() {
    d3.selectAll(".circular-heat").transition().attr("transform", "translate(250,190) rotate("+rotate+")");
    rotate  = (rotate + 5) % 360;
}

window.setInterval(rotateChart,100);