const data = [{
  year: '2013', 
  value: 755
}, {
  year: '2014', 
  value: 284
}, {
  year: '2015',  
  value: 246
}, {
  year: '2016',  
  value: 365
}, {
  year: '2017', 
  value: 322
}];

const svg = d3.select('svg'),
      width = svg.attr('width'),
      height = svg.attr('height');

const radius = 200;
const g = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);

const color = d3.scaleOrdinal(["#4497eb", "#3679bc", "#295b8d", "#1b3c5e", "#0e1e2f"]);

const pie = d3.pie().value(d => d.value);

const path = d3.arc().outerRadius(radius).innerRadius(0);

const label = d3.arc().outerRadius(radius).innerRadius(radius - 90);

const pies = g.selectAll('.arc').data(pie(data)).enter().append('g').attr('class', 'arc');

pies.append('path').attr('d', path).attr('fill', d => color(d.data.value));

pies.append('text')
  .text(d => d.data.year)
	.attr('class', 'arc')
	.attr('transform', function(d) {
		return "translate(" + label.centroid(d) + ")";
	})