RoundPlot

Roundplot is a javascript library, based on D3 to create circular time plots.

Screenshot

Examples

See the simple demo, the customization demo, or the jsfiddle.

How to use

Inclusion

Include d3 and roundplot in your page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="http://lovasoa.github.io/roundplot/dist/roundplot.js" charset="utf-8"></script>

Or use bower : bower install roundplot.

API

Available options

var plot = new RoundPlot({
    data: data,
    target: "#graph",
    size: 550, // size of the generated svg, in px
    clockRadius: 150, // Radius of the inner circle
    timeInClock: 1*60*60*1000, // How much time (in ms) a full circle represents
    valueToColor: function (v){return v>3?"red":"green";}, // Color of the bars
    dateFormat: function(d){return d.toLocaleString();},
    valueFormat: function(v){return v.toFixed(2)},
});

Available methods

RoundPlot.prototype.setData(data)

Updates the data of the plot.