report.js

var width = 460,
    height = 300,
    radius = Math.min(width, height) / 2,
    twoPi = 2 * Math.PI,
    progress = 0,
    formatPercent = d3.format(".0%");

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(radius - 50)
    .outerRadius(radius - 15);

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

var meter = svg.append("g");

meter.append("path")
    .attr("fill", "#eee")
    .attr("d", arc.endAngle(twoPi));

meter.append("circle")
    .style("fill", "#222")
    .attr("r", radius - 50);

var foreground = meter.append("path");

var text = meter.append("text")
    .style("font", "300 48px/1 Helvetica, sans-serif")
    .style("fill", "#eee")
    .attr("text-anchor", "middle")
    .attr("dy", ".35em");


// The data and numbers!

var res = {
  "data": {
    "current_week": {
      "created": 233, 
      "updated": 1
    }, 
    "previous_week": {
      "created": 582, 
      "updated": 4
    }
  }, 
  "succes": true
};

var progress = 0;
var percent = res.data.current_week.created / res.data.previous_week.created * 100;
var range = parseInt(percent, 10);

var tweenProgress = function() {
  return function(t) {
    progress = i(t);
    
    var hue = ((0+progress)*100).toString(10);
    var hsl = "hsl(" + hue + ", 90%, 60%)";
    var color = d3.scale.ordinal().range([hsl, "#f4f3f8"]);
    
    foreground
      .attr("fill", function(d, i) { return color(i); })
      .attr("d", arc.endAngle(twoPi * progress));
    
    text.text(formatPercent(progress));
  };
};

for (x=0; x <= range; x++) {
  var i = d3.interpolate(progress, x / 100);
  
  d3.transition()
    .duration(3000)
    .tween("progress", tweenProgress);
}