Pie Padding

playing around with padAngle

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var pieData = []

nestBySlice.forEach(function(d){
  d.values.forEach(function(v){
    let s = {}
    s.segment = v.segment;
    s.slice = d.key;
    s.offset = v.offset;
    s.value = v.value;
    s.total = d.total;
    pieData.push(s)
  })
});
 
var nestBySegment = d3.nest()
	.key(function(d) { return d.segment; })
  .entries(pieData);
  
nestBySegment.forEach(function(d){
  let minOffset = d3.min(d.values, function(s){ return s.offset })
  d.values.forEach(function(v){
    v.minOffset = minOffset
  })
})
  
var maxTotal = d3.max(nestBySlice, function(d){ return d.total });
  
var width = 960,
    height = 500,
    radius = height / 2 - 10;
  
var innerRadius = 20;
  
var rScale = d3.scaleLinear()
	.range([innerRadius, radius])
	.domain([0, maxTotal])

var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

nestBySegment.forEach(function(segment){
  
  let minOffset = d3.min(segment.values, function(d){ return d.offset })
  let c = rScale(minOffset) * 2 * Math.PI;
  let thisPadding = (paddingPX/c)
  
  var pie = d3.pie()
		.value(1)
		.padAngle(thisPadding)
  
  let p = pie(segment.values);
  
  svg.append("g")
		.selectAll("path")
    .data(p)
  .enter()
    .append("path")
    .style("fill", function(d) { return color(d.data.segment); })
    .attr("d", arc);
  
})
  
</script>

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