D3 Examples - Spatial hash on morton curve

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <title>Z-curve hash for boxes and segments with range queries</title>
  <script type="text/javascript" src="https://unpkg.com/splaytree@0.1.1/dist/splay.js"></script>
  <script type="text/javascript" src="https://unpkg.com/liang-barsky@1.0.1/dist/liang-barsky.js"></script>
  <script type="text/javascript" src="https://unpkg.com/d3-quadtree@1.0.3"></script>
  <script type="text/javascript" src="https://unpkg.com/d3-dispatch@1.0.3/build/d3-dispatch.js"></script>
  <script type="text/javascript" src="https://unpkg.com/d3-timer@1.0.7/build/d3-timer.js"></script>
  <script type="text/javascript" src="https://unpkg.com/d3-collection@1.0.4/build/d3-collection.js"></script>
  <script type="text/javascript" src="https://unpkg.com/d3-force@1.1.0/build/d3-force.js"></script>
  <script type="text/javascript" src="https://unpkg.com/bresenham-zingl@0.1.0/dist/bresenham.js"></script>
  <script type="text/javascript" src="https://unpkg.com/bezier-intersect@0.0.1/dist/bezier-intersect.js"></script>
  <script type="text/javascript" src="morton.js"></script>
  <script type="text/javascript" src="ubtree.js"></script>
  <style type="text/css">
    body, html, #canvas {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background: #ddd;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    #canvas {
      background: #fff;
    }
​
    #control {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #fff;
      box-shadow: 0 0 5px rgba(80,80,80, 0.5);
      padding: 5px 10px;
      border-radius: 5px;
    }
​
    #control p {
      padding: 0;
      margin: 4px;
    }
​
    #range {
      position: absolute;
      bottom: 20px;
      left: 20px;
      width: 90%;
    }
​
    #indicator {
      position: absolute;
      bottom: 50px;
      right: 20px;
      left: 20px;
      font-size: 1.5em;
      font-weight: 300;
      color: #222222;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <input type="range" id="range" min="10" max="10000" value="1000" />
  <div id="indicator">1000</div>
  <form id="control">
    <p><label><input type="checkbox" name="nodes" checked> nodes</label></p>
    <p><label><input type="checkbox" name="edges" checked> edges</label></p>
    <p><label><input type="checkbox" name="grid"> grid</label></p>
    <p><label><select name="level">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8" selected>8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select> level</label></p>
  </form>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>
​
    