Circle packing!

Circle packing

Simple directed layout to pack different-sized circles as close as possible

<!doctype html>
<html>
  <head>
    <title>Simple circle packing</title>
    <script src="https://unpkg.com/d3@4.4.1"></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;
      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;
      }

.circle {
      fill: black;
      fill-opacity: 0.5;
    }

.focus {
      fill: red;
    }

text {
      fill: white;
      font-family: Monaco, 'Courier New', Courier, monospace;
    }

</style>
  </head>
  <body>
    <form class="control" id="form">
      <p><label><input type="number" min="0" name="numCircles" value="50"> circles</label></p>
      <p><label><input type="number" min="1" value="10" name="minR"> min R</label></p>
      <p><label><input type="number" min="1" value="100" name="maxR"> max R</label></p>
      <p><label><input type="number" min="0" value="5" step="1" name="padding"> padding</label></p>
      <p><label><input type="number" min="-1" value="-1" name="pinned"> pinned node</label></p>
      <p><label><input type="checkbox" name="weightedAttraction" checked> Push smaller nodes out</label>
      <p><label><input type="checkbox" name="animate" checked> Animate</label>
      <p>
        <button name="generate" type="reset">Generate</button>
        <button name="pack" type="submit">Pack</button>
      </p>
    </form>
    <script src="index.js"></script>
  </body>
</html>

https://unpkg.com/d3@4.4.1