Consider the following GIF image:
It's 1728 pixels wide by 720 pixels tall.
However, the underlying equirectangular map is actually made up of 864 by 360 "hexels" (each one a square of 2 pixels by 2 pixels)
arranged in a staggered, 6-connected pattern:
The GIF above also contains a 241-entry palette,
although only six unique colours are used (four plus grey for Antarctica and transparent cyan for sea).
So, if we convert the palette to distinct greyscale values and "unstagger" the hexels, we get the following quarter-size image:
The indices of the region hexels are such that if we assign colours "modulo four" we get a
perfect colouring with four colours.
The original GIF weighed in at about 36 kilobytes.
If we save the quarter-size image as a compressed PNG, we can get this down (losslessly) to about 13.5KB.
However, using a domain-specific run-length encoding scheme,
we can store the map in under 16KB of ASCII characters including the JavaScript decompression algorithm.
See the decode() function in hexworld.js
and the blog for more details.
The 241 palette entries are made up of:
Once we have the region data decompressed, we can plot maps in a variety of formats.
Below is a chloropleth map showing when each nation joined the UN as a full member.
The colours range from red (1945) to green (2011).
Next is a map with coastlines outlined (disputed territories and non-UN members are coloured grey):
The coastlines highlight the plethora of tiny islands that are either overseas territories or nations in their own right.
The interactive map below allows you to hover over (or near) islands and nations to discover their names and flags.
Alternatively (on a device without a mouse) tap on the map to select a region.
You can also tap on a flag thumbnail or its attached ISO 3166 country code to select that nation.
Finally, here's a rather beautiful rendering using over 100,000 pixel-perfect hexagons to produce an image reminiscent of old, hand-tinted maps.
Zoom in 200% for the full effect.
For more details, please see the relevant blog entries.
It's 1728 pixels wide by 720 pixels tall.
However, the underlying equirectangular map is actually made up of 864 by 360 "hexels" (each one a square of 2 pixels by 2 pixels)
arranged in a staggered, 6-connected pattern:
The GIF above also contains a 241-entry palette,
although only six unique colours are used (four plus grey for Antarctica and transparent cyan for sea).
So, if we convert the palette to distinct greyscale values and "unstagger" the hexels, we get the following quarter-size image:
The indices of the region hexels are such that if we assign colours "modulo four" we get a
perfect colouring with four colours.
The original GIF weighed in at about 36 kilobytes.
If we save the quarter-size image as a compressed PNG, we can get this down (losslessly) to about 13.5KB.
However, using a domain-specific run-length encoding scheme,
we can store the map in under 16KB of ASCII characters including the JavaScript decompression algorithm.
See the