15 lines
3.3 KiB
HTML
15 lines
3.3 KiB
HTML
|
<p>This is a world map of the Internet. It shows how the IPv4 address space is distributed among the world's countries (hint: unevenly!). If you zoom all the way out, you can see the entire Internet. If you zoom all the way in, each pixel is one unique IP address.</p>
|
||
|
|
|
||
|
|
<p>The initial idea was to visualize the data provided by <a href="http://maxmind.com">MaxMind</a>'s free <a href="http://www.maxmind.com/app/geolitecity">GeoLite City</a> database. The algorithm that translates IP addresses to map coordinates was inspired by the <a href="http://xkcd.com/195/" target="_blank">xkcd</a> comic you see on the right. It uses a fractal mapping, so that consecutive addresses form compact and contiguous regions.</p>
|
||
|
|
|
||
|
|
<p>The map tiles are rendered using a recursive function. When passing a square region of the map to this function, it calls itself for each quarter of the square, and so on. If all four calls return the same country, it returns that country. Otherwise, it returns an image, rendered by combining any images that were returned with the flag of each country that was returned. This way, large blocks of IP addresses appear as large blocks on the map.</p>
|
||
|
|
|
||
|
|
<p>The mapping algorithm becomes quite simple once you realize that there are only four possible path segments — their shapes resemble the letters A, C, D and U — and that they decompose into each other. The U segment, for example, becomes D-U-U-C. The image on the right shows the path from 0.X.X.X to 255.X.X.X.</p>
|
||
|
|
|
||
|
|
<p>Each tile has a size of 256 by 256 pixels, and its file name is the range of IP addresses it depicts. For example, at the highest zoom level, the the top left corner tile is "0/0.0.0.0-0.0.255.255.png". This naming scheme is pretty, but combined with the fractal projection, it makes translating screen coordinates to tile names somewhat more difficult than in most other map applications.</p>
|
||
|
|
|
||
|
|
<p>Another challenge is the fact that nation states, since they were invented long before the Internet, are represented by flags and not by icons. These flags tend to have weird aspect ratios and don't work well on a map that is essentially a square of squares. One could just crop or resize them, but in most cases, the results look surprisingly stupid.</p>
|
||
|
|
|
||
|
|
<p>Luckily, <a href="http://oxjs.org" target="blank">OxJS</a> solves this problem. Its Geo module comes with a set of square flag icons. They're generated (almost) automatically, by fetching SVGs from wikipedia and applying some more or less regular transformations. The French Tricolore is easy. The Union Jack is harder. And the flag of Nepal is <i>really</i> hard. (But the hardest part was figuring out how to render SVGs as PNGs, in python, on Mac OS X, without installing obscure libraries that have insane dependencies. It turned out to be a one-liner: <b><code>os.system('qlmanage -t -s %d -o %s %s' % (size, path, svg))</code></b>. Making these icons was definitely more time-consuming than making this map.</p>
|
||
|
|
|
||
|
|
<p>Generating the images took <a href="txt/ipv4map.py.txt" target="_blank">200 lines of Python</a>. The map client is <a href="txt/ipv4map.js.txt" target="_blank">1,000 lines of JavaScript</a>. And the server backend is <a href="txt/ipv4map.php.txt" target="_blank">5 lines of PHP</a>. If you find bugs, or spot anything that should be done more elegantly, your <a href="http://0x2620.org/0x0073/">feedback</a> is appreciated.</p>
|