Pie Padding

playing around with padAngle

forked from tomshanley's block: Pie Padding

<!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 = 800;
var height = width;
var radius = height / 2 - 10;
  
var innerRadius = 20;
  
var rScale = d3.scaleLinear()
	.range([innerRadius, radius])
	.domain([0, maxTotal])

var padding = .1;
var paddingArcLength = padding * (((innerRadius + radius)) * 2 * Math.PI);
var paddingArcAngle = paddingArcLength / innerRadius; //radians
const paddingChordLength = 2 * innerRadius * Math.sin((paddingArcAngle/2))
console.log("p " + paddingChordLength);
  
	
var arc = d3.arc()
    .innerRadius(function(d){
      return rScale(d.data.offset) 
    })
    .outerRadius(function(d){ 
      return rScale(d.data.offset + d.data.value) });

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){
  
  segment.values.forEach(function(slice, sliceNumber){
    
    let tempRadius = slice.offset + (slice.value/2);
    console.log(tempRadius)
    
    let tempRadiusPX = rScale(tempRadius);
    
    let tempCircumference = tempRadiusPX * 2 * Math.PI;
    console.log(tempCircumference)
    
    let tempArcAngle = 2 * Math.asin(paddingChordLength/(2 * tempRadiusPX))
    console.log("a " + tempArcAngle)
    
    let tempArcLength = tempRadiusPX * tempArcAngle
		console.log(tempArcLength)
    
    let tempPadding = (tempArcLength/tempCircumference)
    console.log(tempPadding);
    
    let tempPieData = [];
    let i = 0;
    for (i; i < dataLength; i++){
      tempPieData.push(slice)
    };
    
    let tempPie = d3.pie()
      .value(1)
      .padAngle(tempPadding)

let tempPieValues = tempPie(tempPieData);
    
    svg.append("g")
			.selectAll("path")
    	.data(tempPieValues)
  	.enter()
    	.append("path")
    	.style("fill", function(d) { 
        return color(d.data.segment); 
      })
    	.style("opacity", function(d,i) { 
        return i == sliceNumber ? 1 : 0; 
      })
    	.attr("d", arc);
		
  });
  
})
  
</script>

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