D3 Examples - Removing overlaps on radial layout

Removing overlaps on radial layout

This algorithm moves along the circle and removes the overlapping of the nodes laid out on a circle maintaining a custom gap between them. O(n), doesn't use trigonometry. Relaxation sometimes cannot be completed in one sweep, cause it moves nodes in one direction: clockwise.

Special case is when a node is pushed across the 0° mark.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <title>Remove overlaps on a radial layout</title>
    <script src="https://unpkg.com/d3@4.4.1"></script>
    <style>
    circle {
      fill-opacity: 0.3;
      stroke: #000000;
      stroke-width: 0.5;
    }
    text {
      font-family: sans-serif;
      font-size: 10px;
      fill: #000000;
    }
    .isect {
      fill-opacity: 0.8;
      fill: red;
      stroke: red;
      stroke-width: 0.5;
    }
    .isect.prime {
      fill: green;
    }
​
    .ln {
      stroke-weight: 0.5;
    }
​
    .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;
    }
    </style>
  </head>
  <body>
    <div class="control">
      <h4>Remove overlaps on a radial layout</h4>
      <p><label><input id="n" value="30" type="number" min="0" step="1" /> Vertices</label></p>
      <p><label><input id="gap" value="5" type="number" min="0" step="1" max="5" /> Gap (px)</label></p>
      <p><button id="relax">Remove overlaps</button><button id="generate">Generate</button></p>
    </div>
    <script src="index.js"></script>
  </body>
</html>
​
    