Circular Segment

This example demonstrates how to compute the height h of a circular segment given the fraction k of the circle’s area that should be covered by the segment. For example, for values of k 0, 0.5 and 1, the value of h is k. For other values, h is computed numerically via Newton’s method; I am unaware of an analytical solution to this problem.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

form,
svg {
  position: absolute;
}

</style>

var r = 240;

var line = d3.select("#line"),
    path = d3.select("#path"),
    text = d3.select("#text"),
    textValue = d3.select("#height"),
    clip = d3.select("#clip rect");

d3.select("form")
    .on("input", function() { change(+this.output.value); });

change(.25);

function change(k) {
  var t0, t1 = k * 2 * Math.PI;

// Solve for theta numerically.
  if (k > 0 && k < 1) {
    t1 = Math.pow(12 * k * Math.PI, 1 / 3);
    for (var i = 0; i < 10; ++i) {
      t0 = t1;
      t1 = (Math.sin(t0) - t0 * Math.cos(t0) + 2 * k * Math.PI) / (1 - Math.cos(t0));
    }
    k = (1 - Math.cos(t1 / 2)) / 2;
  }

var h = 2 * r * k,
      y = r - h,
      a = (Math.PI - t1) / 2;

clip
      .attr("y", y)
      .attr("height", h);

line
      .attr("x2", -r * Math.cos(a))
      .attr("y1", y)
      .attr("y2", y);

text
      .attr("transform", "translate(280," + (r - h / 2) + ")");

textValue
      .text((h / (2 * r)).toFixed(3));

path
      .attr("d", "M280," + r + "V" + y);
}

</script>

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