var dataset = [
  { name: 'Residential', value: 0.391, absolute: 391000 },
  { name: 'Office', value: 0.3251, absolute: 325100 },
  { name: 'Retail', value: 0.1368, absolute: 136800 },
  { name: 'Craft / Industry', value: 0.0871, absolute: 87100 },
  { name: 'Others', value: 0.0601, absolute: 60100 }
];

//var color = d3.scale.category10();
var color = d3.scale.ordinal()
.domain(["Residential", "Office", "Retail", "Craft / Industry", "Others"])
.range(["#EA4424", "#008DD2", "#00A859", "#FDBA02", "#565656"]);

var w=300,h=300;
var outerRadius=w/2;
var innerRadius=100;

var pie=d3.layout.pie()
.value(function(d){return d.value})
.sort(null)
.padAngle(.01);

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([0, 0])
.html(function(d) {
  return d.name + ": <span style='color:orangered'>" + d.value + "</span>";
});

var arc=d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);

var svg=d3.select("#chart")
.append("svg")
.attr({
  width:w+400+100,
  height:h+50,
})
.append('g')
.attr({
  transform:'translate('+(w/2+50)+','+(h/2+25)+')'
});

svg.call(tip);

var pathAnim = function(path, dir) {
  switch(dir) {
    case 0:
      path.transition()
        .duration(500)
        .ease('bounce')
        .attr('d', d3.svg.arc()
              .innerRadius(innerRadius)
              .outerRadius(outerRadius * 1.08)
             );
      break;

    case 1:
      path.transition()
        .attr('d', d3.svg.arc()
              .innerRadius(innerRadius)
              .outerRadius(outerRadius)
             );
      break;
  }
}

var path=svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr({
  d:arc,
  fill:function(d){
    return color(d.data.name);
  }
})
.on('mouseover', function(d,i,j){
  pathAnim(d3.select(this),0);
  //tip.show(d,i,j);
  d3.select('.usetype').text(dataset[i].name);
  d3.select('.absolute').text(d3.format(",.0f")(dataset[i].absolute));
  d3.select('.relative').text(d3.format(".1%")(dataset[i].value));
})
.on('mouseout', function(d,i,j) {
  pathAnim(d3.select(this),1);
  //tip.hide(d,i,j);
  d3.select('.usetype').text('');
  d3.select('.absolute').text('');
  d3.select('.relative').text('');
});

var chartTitle = svg.append("svg:text")
.attr("class", "chart-title")
.attr("dy", "-0.5em")
.attr("text-anchor", "middle")
.text("Market rent");

var usetype = svg.append("svg:text")
.attr('class', 'usetype')
.attr("text-anchor", "middle")
.attr("dy", "-0.5em")
.attr("x", 0)
.attr("y", 20)
.text('');

var usetypeRelative = svg.append("svg:text")
.attr('class', 'relative')
.attr("text-anchor", "middle")
.attr("dy", "-0.5em")
.attr("x", 0)
.attr("y", 60)
.text('');

var usetypeAbsolute = svg.append("svg:text")
.attr('class', 'absolute')
.attr("text-anchor", "middle")
.attr("dy", "-0.5em")
.attr("x", 0)
.attr("y", 40)
.text('');

path.transition()
  .duration(1000)
  .attrTween('d', function(d) {
  var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
  return function(t) {
    return arc(interpolate(t));
  };
});

var restOfTheData=function(){
  var text=svg.selectAll('.label')
  .data(pie(dataset))
  .enter()
  .append("text")
  .attr("class", "label")
  .transition()
  .duration(200)
  .attr("transform", function (d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("dy", ".4em")
  .attr("text-anchor", "middle")
  .text(function(d){
    return d3.format(".1%")(d.data.value);
  })
  .style({
    fill:'#fff',
    'font-size':'14px'
  });

  var legendRectSize=20;
  var legendSpacing=7;
  var legendHeight=legendRectSize+legendSpacing;

  var legend=svg.selectAll('.legend')
  .data(color.domain())
  .enter()
  .append('g')
  .attr({
    class:'legend',
    transform:function(d,i){
      //Just a calculation for x & y position
      return 'translate(200,' + ((i*legendHeight)-65) + ')';
    }
  });
  legend.append('rect')
    .attr({
    width:legendRectSize,
    height:legendRectSize,
    rx:0,
    ry:0
  })
    .style({
    fill:color,
    stroke:color
  });

  legend.append('text')
    .attr({
    x:30,
    y:15
  })
    .text(function(d){
    return d;
  }).style({
    fill:'#929DAF',
    'font-size':'14px'
  });
};

setTimeout(restOfTheData,1000);