D3 Examples - Hilbert Map of Autonomous System Numbers (ASn) allocations

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hilbert AS space allocations Map</title>
​
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.2.0/d3.min.js"></script>
  <script src="//unpkg.com/ip.js"></script>
  <script src="//unpkg.com/hilbert-chart"></script>
​
  <style>
    body {
      margin: 0;
      text-align: center;
    }
    #asn-chart { display: inline-block; }
​
    .hilbert-canvas {
      cursor: crosshair;
    }
  </style>
​
</head>
<body>
  <div id="asn-chart"></div>
​
  <script>
​
    // Get the ASn 16-bit data
    d3.csv('./asn16.csv', function(asn16data) {
      // Get the ASn 32-bit data
      d3.csv('./asn32.csv', function(asn32data) {
        HilbertChart()
          .margin(50)
          .hilbertOrder(20 / 2)
          .data(parseAsnData(asn16data.concat(asn32data)))
          .rangePadding(0.03)
          (document.getElementById("asn-chart"))
          .focusOn(0, Math.pow(2, 16)); // Focus on 16-bit area
      });
    });
​
    //
​
    function parseAsnData(asnData) {
      var asns = [],
        ignoreNames = ['see sub-registry 16-bit as numbers'];   // Remove 16bit placeholder
​
      asnData.map(function(asn) {
        var asRange = asn.Number.split('-');
        return {
          start: +asRange[0],
          length: asRange.length > 1 ? +asRange[1] - asRange[0] + 1 : 1,
          name: asn.Description.replace('Assigned by', ''),
          infos: [asn]
        };
      }).filter(function(asn) {
        return ignoreNames.indexOf(asn.name.toLowerCase()) === -1;
      }).filter(function(asn) {
        return asn.name.toLowerCase() !== 'unallocated'
          && (asn.start + asn.length) <= Math.pow(2, 24); // Filter out really high stuff (perf issue)
​
      })
      .forEach(function(asn) {
        var last;
​
        if (asns.length
            && (last = asns[asns.length - 1])
            && last.name === asn.name
            && (last.start + last.length === asn.start)) {
​
          last.length += asn.length;
          last.infos.push(asn.infos[0]);
        } else {
          asns.push(asn);
        }
      });
​
      return asns;
    }
  </script>
</body>
</html>
    