D3.js donut chart

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js">


</script>


<div id="timelines"></div>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 11px;
  position: relative;
  background: #eeeeee;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.link {
  fill: none;
  stroke: red;
}

JavaScript

var data = [{
  "date": "2012-03-20",
  "total": 3
}, {
  "date": "2012-03-21",
  "total": 8
}, {
  "date": "2012-03-22",
  "total": 2
}, {
  "date": "2012-03-23",
  "total": 10
}, {
  "date": "2012-03-24",
  "total": 3
}, {
  "date": "2012-03-25",
  "total": 20
}, {
  "date": "2012-03-26",
  "total": 12
}, {
  "date": "2012-03-28",
  "total": 17
}];

var margin = {
    top: 40,
    right: 40,
    bottom: 40,
    left: 60
  },
  width = 600,
  height = 500;


var y = d3.time.scale()
  .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
  .range([height - margin.top - margin.bottom, 0]);


var yAxis = d3.svg.axis()
  .scale(y)
  .orient('left')
  .tickPadding(1);

var svg = d3.select('#timelines').append('svg')
  .attr('class', 'chart')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

var axisArray = [];

//http://stackoverflow.com/questions/22722952/how-can-i-get-the-d3-js-axis-ticks-and-positions-as-an-array

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis)
  .selectAll(".tick").each(function(data) {
    var tick = d3.select(this);
    // pull the transform data out of the tick
    var transform = d3.transform(tick.attr("transform")).translate;

    // passed in "data" is the value of the tick, transform[0] holds the X value
    //console.log("each tick", data, transform);

    var obj = {
      "data": data,
      "transform": transform
    }

    axisArray.push(obj);
  });

//console.log("all the points", yAxis.scale().ticks(yAxis.ticks()[0]));

function getRadius(d) {
  var count = 2;
  var ratio = count * 2.8;

  if (count == 1) {
    ratio = 10;
  }
  return ratio;
}



var data = [{
  "date-start": "2012-03-20",
  "date-end": "2012-03-21"
}, {
  "date-start": "2012-03-22",
  "date-end": "2012-03-25"
}, {
  "date-start": "2012-03-21",
  "date-end": "2012-03-24"
}];


function getPos(date) {
  var trans;
 ...