D3 Examples - Huygens' arc length approximation

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <title>Huygens' arc length approximation</title>
    <script src="https://unpkg.com/d3@4.4.1"></script>
    <style>
    circle {
      fill-opacity: 1;
      stroke: #000000;
      stroke-width: 0.5;
    }
​
    text {
      font-family: sans-serif;
      font-size: 10px;
      fill: #000000;
    }
​
    .drawing {
      z-index: 0;
    }
​
    .controls {
      z-index: 1;
    }
​
    .circle {
      stroke-width: 2;
      fill: none;
      z-index: 0;
    }
​
    .point {
      cursor: move;
      fill: #cccccc;
      fill-opacity: 1;
      z-index: 10;
    }
​
    .active {
      stroke-width: 1;
      cursor: move;
    }
​
    .chord, .sagitta, .half-chord, .radius {
      stroke-width: 1;
      stroke: #000000;
    }
​
    .radius {
      stroke: #2222ff;
      stroke-opacity: 0.3;
    }
​
    .control {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 10px 20px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
​
    .control h4 {
      font-weight: 300;
    }
​
    .control input[type=number] {
      width: 50px;
    }
​
    .arc {
      stroke-width: 3;
      stroke: #aa5555;
    }
​
    .name {
      font-weight: bold;
    }
    </style>
  </head>
  <body>
    <div class="control">
      <h4><a href="https://en.wikipedia.org/wiki/Christiaan_Huygens" target="_blank">Huygens</a>' arc length approximation</h4>
      <table>
        <tr>
          <td class="name">Angle</td>
          <td id="angle"></td>
        </tr>
        <tr>
          <td class="name">R &times; &theta;</td>
          <td id="classic"></td>
        </tr>
        <tr>
          <td class="name">Huygens</td>
          <td id="huygens"></td>
        <tr>
          <td class="name">Error</td>
          <td id="error"></td>
        </tr>
      </table>
    </div>
    <script src="index.js"></script>
  </body>
</html>
​
    