[unlisted] Slices of the Pie

<!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>
  <svg width="200" height="200"></svg>
  <script>
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        radius = Math.min(width, height) / 2,
        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    
    var total = 5000;
    
    var freelancers = d3.range(3).map(() => ({
      hours: 10,
      rate: 100
    }));
    
    var managingPartners = [1, 2];
    
    d3.select("body").append("label")
      .text("Freelancers (hours)");
    
    d3.select("body").selectAll(".freelancer").data(freelancers)
      .enter().append("input")
        .attr("type", "range")
        .attr("min", "1")
        .attr("max", "10")
        .attr("step", "0.5")
        .attr("value", "5")
        .on("input", function(d){
          d.hours = this.value;
          render();
        });
    
    d3.select("body").append("div").append("label")
      .text("Total")
    
    d3.select("body").append("input")
        .attr("type", "range")
        .attr("min", "1")
        .attr("max", "20000")
        .attr("step", "500")
        .attr("value", total)
        .style("width", "500px")
        .on("input", function(d){
          total = this.value;
          render();
        });
    
    var pie = d3.pie()
        .sort(null)
        .value(function(d) { return d.cash; });

var path = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);
    
    function render(){
      var data = freelancers.map((d) => ({
        cash: d.hours * d.rate,
        type: "freelancer"
      }));

var subtotal = total - d3.sum(data, (d) => d.cash);

data = data.concat(managingPartners.map((d) => ({
        cash: subtotal / managingPartners.length,
        tyle: "managing partner"
      })));
      
      var arc = g.selectAll("path").data(pie(data));
      arc
        .enter().append("path")
        .merge(arc)
          .attr("d", path)
          .attr("fill", function(d) { return color(d.data.type); })
          .attr("stroke", "white")
    }
    
    render();
    
  </script>
</body>

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