Pie Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
		let body = d3.select('body');
    let svg = body.append('svg')
    	.attr('width', 800)
    	.attr('height', 800);
    
    let filter = svg.append('filter')
    	.attr('id', 'brightness')
    	.append('feComponentTransfer');
    let filterR = filter.append('feFuncR')
    	.attr('type', 'linear')
    	.attr('slope', 1.5);
    let filterG = filter.append('feFuncG')
    	.attr('type', 'linear')
    	.attr('slope', 1.5)
    let filterB = filter.append('feFuncB')
    	.attr('type', 'linear')
    	.attr('slope', 1.5)
    
    let data = [1, 1, 2, 3, 5, 8, 13, 21];
    
    let makePie = d3.pie();
    let pie = makePie(data);
    
    let arc = d3.arc()
    	.innerRadius(0)
    	.outerRadius(200)
    	.startAngle(d => d.startAngle)
    	.endAngle(d => d.endAngle);
    
    let group = svg.append('g')
    	.attr('transform', 'translate(250 250)')
    
    let arcs = group.selectAll('path')
    	.data(pie)
    	.enter().append('path')
    	.attr('d', arc)
      .attr('fill', () => randomHSL())
      .attr('stroke', 'white')
      .attr('stroke-width', 2)
      .on('mouseenter', function() {
        d3.select(this)
          .interrupt()
          .transition()
          .duration(300)
          .ease(d3.easeCubic)
          .attr('transform', 'scale(1.1)')
          .style('filter', 'url(#brightness)')
      })
      .on('mouseleave', function() {
        d3.select(this)
          .interrupt()
          .transition()
          .duration(300)
          .ease(d3.easeCubic)
          .attr('transform', 'scale(1)')
          .style('filter', 'none')
      });
    
    function randomRGB() {
      let r = Math.floor(Math.random() * 256),
          g = Math.floor(Math.random() * 256),
          b = Math.floor(Math.random() * 256);

return `rgba(${r}, ${g}, ${b}, 1)`;
    }
    
    function randomHSL() {
      let h = Math.floor(Math.random() * (240 - 180 + 1)) + 180,
          s = Math.floor(Math.random() * (50 - 25 + 1)) + 25,
          l = Math.floor(Math.random() * (67 - 34 + 1)) + 34;
      
			return `hsla(${h}, ${s}%, ${l}%, 1)`;
    }

</script>
</body>

https://d3js.org/d3.v4.min.js