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

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}];

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

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

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis);