JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.min.js"></script>
<svg></svg>

JavaScript

/**************http://square.github.io/intro-to-d3/examples/ ***/
/* I only modified the  legend to show how to modify the layout of it.*/

var sales = [
  { product: 'Hoodie',  count: 12 },
  { product: 'Jacket',  count: 7 },
  { product: 'Snuggie', count: 6 },
  { product: 'Other', count: 5 },
  { product: 'Hoodie',  count: 12 },
  { product: 'Jacket',  count: 7 },
  { product: 'Snuggie', count: 6 },
  { product: 'Other', count: 5 },
];
    
var pie = d3.pie()
  .value(function(d) { return d.count })

var slices = pie(sales);
// the result looks roughly like this:

var arc = d3.arc()
  .innerRadius(0)
  .outerRadius(50);

// helper that returns a color based on an ID
var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select('svg');
var g = svg.append('g')
  .attr('transform', 'translate(200, 100)')

g.selectAll('path.slice')
  .data(slices)
  .enter()
  .append('path')
  .attr('class', 'slice')
  .attr('d', arc)
  .attr('fill', function(d) {
  return color(d.data.product);
});


/**********************************************************

THIS IS THE PLACE WHERE WE DO THE UPDATE TO THE LEGEND!!!!

*********************************************************/

svg.append('g')
 	.attr('class', 'legend')
  .selectAll('text')
	.data(slices)
	.enter()
	.append('text')
	.text(function(d) { return '• ' + d.data.product; })
	.attr('fill', function(d) { return color(d.data.product); })
	.attr('y', function(d, i) { return 20 * (i + 1); })
  
  .attr('transform', function(d, i){
             
    var sections = Math.round((Object.keys(slices).length - 1) / 2);
	
    if(i < sections)
      return 'translate(0,0)'; 
    else
      return 'translate(80,-40)'; 
});