<?xml version="1.0"?>
<?xml-stylesheet href="/transform" type="text/xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:bibo="http://purl.org/ontology/bibo/" xmlns:bs="http://purl.org/ontology/bibo/status/" xmlns:ci="https://vocab.methodandstructure.com/content-inventory#" xmlns:dct="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xhv="http://www.w3.org/1999/xhtml/vocab#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" lang="en" prefix="bibo: http://purl.org/ontology/bibo/ bs: http://purl.org/ontology/bibo/status/ ci: https://vocab.methodandstructure.com/content-inventory# dct: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns# xhv: http://www.w3.org/1999/xhtml/vocab# xsd: http://www.w3.org/2001/XMLSchema#" vocab="http://www.w3.org/1999/xhtml/vocab#" xml:lang="en">
  <head>
    <title property="dct:title">The NetMap</title>
    <base href="https://doriantaylor.com/the-netmap"/>
    <link href="document-stats#EZ1g9ta3bgr_8GT3I624gJ" rev="ci:document"/>
    <link href="elsewhere" rel="alternate bookmark" title="Elsewhere"/>
    <link href="this-site" rel="alternate index" title="This Site"/>
    <link href="http://purl.org/ontology/bibo/status/published" rel="bibo:status"/>
    <link href="" rel="ci:canonical" title="The NetMap"/>
    <link href="lexicon/#Egc4d-5WzcNE5sHqVIaCpK" rel="dct:audience" title="Designer"/>
    <link href="person/dorian-taylor#me" rel="dct:creator" title="Dorian Taylor"/>
    <link href="netmap" rel="dct:hasPart"/>
    <link href="lexicon/#E1A8DBAFHvuhCgTUPIAVlJ" rel="dct:subject" title="Data Visualization"/>
    <link href="person/dorian-taylor" rel="meta" title="Who I Am"/>
    <link about="./" href="3f36c30c-6096-454a-8a22-c062100ae41f" rel="alternate" type="application/atom+xml"/>
    <link about="./" href="f07f5044-01bc-472d-9079-9b07771b731c" rel="alternate" type="application/atom+xml"/>
    <link about="./" href="this-site" rel="alternate"/>
    <link about="./" href="elsewhere" rel="alternate"/>
    <link about="./" href="e341ca62-0387-4cea-b69a-cdabc7656871" rel="alternate" type="application/atom+xml"/>
    <link about="verso/" href="3f36c30c-6096-454a-8a22-c062100ae41f" rel="alternate" type="application/atom+xml"/>
    <link about="verso/" href="this-site" rel="alternate"/>
    <link about="verso/" href="elsewhere" rel="alternate"/>
    <meta content="the-netmap" datatype="xsd:token" property="ci:canonical-slug"/>
    <meta content="A tour of the NetMap interface I designed to interact with the IP address space." name="description" property="dct:abstract"/>
    <meta content="2009-04-02T00:42:13+00:00" datatype="xsd:dateTime" property="dct:created"/>
    <meta content="the-netmap" property="dct:identifier"/>
    <meta content="2009-04-02T01:13:55+00:00" datatype="xsd:dateTime" property="dct:issued"/>
    <meta content="2009-04-02T01:15:06+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2009-04-03T20:16:16+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2022-05-31T04:18:52+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2022-05-31T15:10:50+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta about="person/dorian-taylor#me" content="Dorian Taylor" name="author" property="foaf:name"/>
    <meta content="summary" name="twitter:card"/>
    <meta content="@doriantaylor" name="twitter:site"/>
    <meta content="The NetMap" name="twitter:title"/>
    <meta content="A tour of the NetMap interface I designed to interact with the IP address space." name="twitter:description"/>
    <object>
      <nav>
        <ul>
          <li>
            <a href="document-stats#EZ1g9ta3bgr_8GT3I624gJ" rev="ci:document" typeof="qb:Observation">
              <span>urn:uuid:67583db5-addb-482b-9ffc-193dc8eb6e20</span>
            </a>
          </li>
        </ul>
      </nav>
    </object>
  </head>
  <body about="" id="EQ42-bV3oMuAj6i4I3w7GI" typeof="bibo:Article">
    <p>In November of <span class="parenthesis" title="still using the Long Now date format">02006</span>, I was working at a company on a project that entailed surveying the entire Internet. I wanted a way to easily view and manipulate the data we were gathering. This is what I came up with:</p>
    <img class="figure" src="netmap;desaturate;invert" alt="Picture of the NetMap depicting activity on the IP 66.248.149.141" title="The NetMap is a visualization and interaction tool for navigating the IPv4 address space."/>
    <p>Each vertical bar is 256 pixels tall and represents an <em>octet</em> in an <a href="http://en.wikipedia.org/wiki/IP_address" title="IP address &#x2014; Wikipedia" rel="dct:references"><acronym title="Internet Protocol">IP</acronym> address</a>. The horizontal stripes within were the data I wanted to read in two dimensions: width and contrast. Each stripe on the octet bar would also depict aggregates for the addresses it contained. 16,777,216 addresses in the leftmost bar, 65,536 in the second, 256 in the third and a single address in the fourth. This is in accordance with how the Internet's address space is partitioned. Further maturations of this interface also depicted colour-coded regional and corporate network assignments to give a bird's-eye view of the Internet at large.</p>
    <section id="ERN24hLG4bVmLJMPV-GIIJ">
      <h2>Interaction and Implementation</h2>
      <p>Each octet bar could be dragged up and down by the mouse. When you let go of any but the rightmost bar, all bars to the right of it would automatically slide to the point at which there was the most activity in the data. The numbers at the top of each bar would also naturally change. The compact size of this interface left significant real estate on a typical screen for more detailed information to be displayed.</p>
      <p>I implemented the only fully working prototype of this interface as <acronym title="Scalable Vector Graphics">SVG</acronym> and <acronym title="Asynchronous Javascript and XML">AJAX</acronym> over a <acronym title="Representational State Transfer">REST</acronym>ful <abbr title="World-Wide Web">Web</abbr> interface to my employer's database.</p>
    </section>
    <section id="E5hWNaxOC59PP_E88YQdfI">
      <h2>Inspired by the Glass Engine</h2>
      <p>In 02001, several researchers at <acronym title="International Business Machines">IBM</acronym> designed a visualization of the works of <a href="http://www.philipglass.com/" title="Philip Glass: Welcome" rel="dct:references">Philip Glass</a> which allowed a listener to navigate based on several different aspects of the composer's repertoire. It was called the <a href="http://www.philipglass.com/glassengine/" title="The IBM Glass Engine" rel="dct:references">Glass Engine</a>, and, much like the work of its patron, is minimal, elegant and profound.</p>
    </section>
  </body>
</html>
