D3 Examples - Loose Quadtree Illustration

xxxxxxxxxx
 
<!doctype html>
<meta charset="utf-8">
<style>
  body {position: relative;}
  canvas, svg {position: absolute;}
  .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
  }
  .qbound, .qbound-loose {
    fill: none;
    stroke: black;
  }
  .qbound-loose {
    opacity: 0.4;
  }
  div {
    display: inline-block;
    vertical-align: top;
  }
</style>
<body>
<div id="container">
  <canvas></canvas>
  <svg></svg>
</div>
<div>
  <div>
    <label>Expansion Factor (p=<span id="p-val"></span>):<br />
    <input type="number" id='p' min="0.00001" max="2.0" value="0.25" step="0.01" onchange="updatePVal(this.value);"/>
  </label><br />
  <button id="update" style="margin-left:auto; margin-right:auto;">Update</button>
  </div>
</div>
</body>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="quadtree.js"></script>
​
    