d3 pie

by Mariya Gnitetckaya

HTML

<div class='chart'></div> 

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.arc{
  cursor: pointer
}

JavaScript

var data = [{
	value: 55,
  binding:{}
},{
	value: 88,
  binding:{}
},{
	value: 344,
  binding:{}
},{
	value: 45,
  binding:{}
}]
var width = 500;
var height = 500;
var radius = Math.min(width, height) / 4;
var colors = ['#7E107E','#B50059','#DB1E00','#046889','#00A524']

var el = document.querySelector('.chart');
var svg = d3.select(el).append("svg:svg")
	.attr('width', width)
  .attr('height',height)
  .append("g")
  .attr("transform", "translate(" + (width / 4 + 10) + "," + (height / 4 + 10) + ")");
  
var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);
    
var arcHover = d3.arc()
    .outerRadius(radius + 10)
    .innerRadius(0);
    
var labels = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40)
    
var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.value; });
    
var g = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc")
  
  
g.append("path")
  .attr("d", arc)
  .attr("fill", function(d,i) { 
  	return colors[i]; 
  }).on("mouseover", function(d) {
      d3.select(this).transition()
        .duration(500)
        .attr("d", arcHover);
    })
  .on("mouseout", function(d) {
    d3.select(this).transition()
      .duration(500)
      .attr("d", arc);
  });
  
g.append('text')
	.attr('style','font-family:Arial; font-size: 14px; fill:rgba(255,255,255,.5); font-weight:600')
	.attr("transform", function(d) { 
  	var centroid = labels.centroid(d);
  	return "translate(" + (centroid[0] - 10) + "," + centroid[1] + ")"; })
  .attr("dy", ".35em")
  .text(function(d){return d.value})