Hilbert Map of IPv4 address space

Inspired by xkcd's version. Data provided by IANA.

Address space represented along an Hilbert Curve, using the hilbert-chart D3 component.

See also the IPv6 version or the AS numbers version.

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Hilbert IPv4 Address Map</title>

</head>
<body>
  <div id='ipv4-chart'></div>
  <div class='info-note'>(use mouse-wheel/drag to zoom/pan)</div>

data.forEach(row => {
        row.prefix = row.Prefix;
        row.name = row.Designation;
      });

const hilbertChart = HilbertChart()
        .hilbertOrder(32 / 2)
        .data(parseIpData(data))
        .rangePadding(0.03)
        .valFormatter(ipFormatter)
        .rangeTooltipContent(d => `<b>${d.name}</b>: ${prefixFormatter(d)}`)
        (document.getElementById('ipv4-chart'));

// Fetch my IP
      d3.json('//stat.ripe.net/data/whats-my-ip/data.json', data => {
        const ip = data.data.ip;
        const iconWidth = Math.min(30, Math.min(window.innerWidth, window.innerHeight) * 0.03);
        hilbertChart.addMarker(
          new Ip.Addr(ip).toNum(),
          './target.svg',
          iconWidth,
          iconWidth,
          () => `You are here: ${ip}`
        );
      });
    });

function parseIpData(ipData) {
      const prefixes = [];

ipData.map(row => {
        const pref = new Ip.Prefix(row.prefix);
        return {
          start: pref.firstIp().toNum(),
          length: pref.countIps(),
          name: getName(row.name),
          infos: [row]
        };
      }).forEach(prefix => {
        let last;

if (prefixes.length
            && (last = prefixes[prefixes.length - 1])
            && last.name === prefix.name
            && (last.start + last.length === prefix.start)) {

last.length += prefix.length;
          last.infos.push(prefix.infos[0]);
        } else {
          prefixes.push(prefix);
        }
      });

return prefixes;

function getName(designation) {
        let name = designation;

if (name.indexOf('Administered by') > -1) {
          name = 'Various Registries';
        }

return name;
      }
    }

function ipFormatter(d) {
      return new Ip.Addr(d).toString();
    }

function prefixFormatter(d) {
      const ipRange = new Ip.Range(d.start, d.start + d.length - 1),
          prefixes = ipRange.toPrefixes();

return (prefixes.length===1 ? prefixes[0] : ipRange).toString();
    }
  </script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.0/d3.min.js

https://unpkg.com/ip.js

https://unpkg.com/hilbert-chart