D3 Examples - Circle merging

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <title>Circle merging</title>
    <script src="https://unpkg.com/d3@4.4.1"></script>
    <script src="https://unpkg.com/faster-delaunay@1.0.0"></script>
    <style>
​
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
​
    .control {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 10px 20px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
      font-size: 13px;
      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;
      }
​
      .control div {
        margin-top: 5px;
      }
​
      .control fieldset {
        border: 0;
        padding: 0;
        display: none;
      }
​
        .control fieldset ul {
          list-style: none;
          padding: 0;
        }
​
          .control fieldset ul li {
            display: block;
          }
​
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <form class="control" id="params">
      <div>
        <select id="graph-select">
          <option value="tree-550" selected>Tree 550 nodes</option>
          <option value="tree-1500">Tree 1500 nodes</option>
          <option value="er500x2000">Erdosz-Renyi 500 x 2000</option>
        </select>
      </div>
​
    </form>
    <script src="index.js"></script>
  </body>
</html>
​
    