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: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  background: #432010;
}

#timelines {
  width: 560px;
  height: 500px;
}

svg {
  width: 100%;
  height: 100%;
}

path.slice {
  stroke-width: 2px;
}

polyline {
  opacity: .3;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

.labelholder {
  fill: white;
}

JavaScript

var svg = d3.select("#timelines")
  .append("svg")
  .append("g")

svg.append("g")
  .attr("class", "timeline");


var width = 560,
  height = 450;


svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


function colores_google(n) {
  var colores_g = ["#e9168a", "#f8dd2f", "#448875", "#c3bd75", "#2b2d39", "#311854", "#553814", "#f7b363", "#89191d", "#c12f34", "#2b2a2c", "#c5b8a6", "#57585b"];
  return colores_g[n % colores_g.length];
}


var data = [{
  id: 0,
  date: 10 / 04 / 2016
}, {
  id: 1,
  date: 11 / 04 / 2016
}, {
  id: 3,
  date: 12 / 04 / 2016
}, {
  id: 4,
  date: 14 / 04 / 2016
}, {
  id: 5,
  date: 16 / 04 / 2016
}, {
  id: 6,
  date: 29 / 04 / 2016
}]


change(data);

function change(data) {

  var timeline = svg.select(".timeline").selectAll("rect.slice")
    .data(data);

  timeline.enter()
    .insert("rect")
    .attr('fill', "white")
    .attr("x", 10)
    .attr("y", function(d, i) {
      return 5 * i;
    })
    .attr("width", 20)
    .attr("height", 2)
    .attr("class", "slice");

  timeline
    .transition().duration(1000)

  timeline.exit()
    .remove();




};