Circular d3.js heat chart

I’ve been going through some interesting d3.js examples as an learning exercise. One noteworthy example is Peter Cook’s circular heat chart. I’ve modified it here to have a circular animation.

Animations are fairly easy in d3.js with the transition() function. Essentially you just specify the changes you would like to do to the d3 object, and then d3 will create a transition to smoothly alter the attributes. It evens works with colours and some strings.

For more information, take a look at this tutorial.

Code to build chart:

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);

John Trengrove

Circular d3.js heat chart