World Map of Internet Adresses

World Map of Internet Adresses (cutout)

This visualizations shows the geographic location of 1,139,441,531 ip adresses. The locations are grouped by city, divided into four categories according to the total number of ip adresses belonging to a city. The categories are net-metropoles (more than 10,000,000 IPs), net-capitals (1,000,000 up tp 10,000,000 IPs), net-cities (100,000 up 1,000,000 IPs) and net-villages (fewer than 100,000 IPs). IP adresses that cannot be allocated to a city were left out.

I created this visualization using ActionScript, based on my classes for map projections and polygon maths, which you can download for own usage. The data was extracted from the free GeoLite-City database by MaxMind.

Selected Map Projections in ActionScript

Update: I strongly recommend the use of as3-proj instead, which includes far more map projections and lots of other features.

Something you definitely need if you’re planning to create some geospatial visualizations from scratch is map projection. Map projection means the conversion of sphere coordinates (basically pairs of latitude and longitude values) to 2D-screen coordinates. While this is very easy for smaller regions like single countries things are getting complicated if you want to display the whole world. Continue reading

Visualization and interpretation of weather station data

There’s some kind of hype around climate data these days. Since the UK’s National Weather Service recently published an enormous set of weather station data files there’s a growing number of visualizations spreading the net. Among a few other examples I found this very nice and clear looking chart:

Figure 1: Visualization of climate changes taken from EagerEyes.org

Figure 1: Visualization of climate changes taken from EagerEyes.org

It’s showing the average world temperature over the last 250 years. Looking at this chart your first thought is something like: Oh my god, it’s getting hot on earth. But wait a minute. An mean temperature increase of 10°C in only 200 years? And what about this hard step around 1950? To answer these questions I had to step deeper into the data. Therefore I made a visualization myself, that simply shows a world map with all weather stations. The temperature range is from -70°C (dark blue) over 0° (white), 10°C (yellow), 32°C (red) to 40°C (dark red). The video goes through 3 loops showing the mean temperature (MT), the summer mean temperature (SMT) and the winter mean temperature (WMT).

One of the major insights you get from seeing this is the unequal and unsteady distribution of weather stations around world and time. While there are only few stations outside europe in 1850 the world is almost complete “filled” in 2000. Did you notice how suddenly africa fills with weather stations around 1950? To get a clearer look at the distribution of weather stations I made this stacked area chart:

Figure 2: Distribution of weather stations over latitude ranges

Figure 2: Distribution of weather stations over latitude ranges

You can see that there was a steady increasing number of weather stations in the near equator regions. You can even find the peak around 1950 in this chart.

As it’s always warmer near the equator than near the poles and this temperature difference is much bigger than the estimated increase over 200 years, one cannot simply average the data from unevenly distributed weather stations. The more stations you have in africa, the higher your global temperature gets. What you have to do instead is something like taking the average of the average temperature of the weather stations on the same latitude. I think this type of error is called a systematic bias.

So, who is going to make a corrected version of the firstly shown chart?

Mapping scalar data to circles

A very simple rule in visualizations is to never map scalar data to circle radii. Humans do better in comparing relative areas, so if you want to map data to a shape, you have to map it to it’s area. The rule is that simple that normally it’s not worth a blog post. But as I’m currently reading the book “Visualizing Data” by Ben Fry I was very surprised to notice, that shown examples are continuously breaking this rule.

The operative point in this case is data integrity, which means to tell the truth about the data you’re displaying. Showing all shapes in it’s true relative dimension is a fundamental law in data integrity. A book about data visualization isn’t allowed to miss this rule.

So, to fill this little post with some graphics, I made two simple illustrations. Both  containing a set of circles that represents the data set [6.25, 12.5, 25, 50, 100, 200]. Each circle should look like as twice as large as the circle to its left.

These values were mapped to the circle radii

These values were mapped to the circle radii

As you see above, especially the step from 100 to 200 looks not like its only the double value. As this brings in a quadratic error, the bigger the values, the bigger is the error. The next illustration show the same data set with corrected circle radii:

These values were mapped to the circles areas

These values were mapped to the circle areas

To make It even more comfortable I’m going to publish this super exclusive actionscript snippet that helps you mapping data to a circle radii:

/**
 * @param v The value to map
 * @param dmin  Minimum value in data set
 * @param dmax  maximum value in data set
 * @param rmin  circle radius for minimum data value
 * @param rmax  circle radius for maximum data value
 */
function mapRadius(v:Number, dmin:Number, dmax:Number, rmin:Number, rmax:Number):Number
{
	var areaMin:Number = rmin * rmin * Math.PI;
	var areaMax:Number = rmax * rmax * Math.PI;
	var area:Number = (v - dmin) / (dmax - dmin) * (areaMax - areaMin) + areaMin;
	return Math.sqrt(area / Math.PI);
}

Further reading:

  1. Linear vs. Quadratic Change by Robert Kosara

Real-time Visualization of Site Traffic

The last days I worked on a visualization experiment that shows the geographic locations of blog page requests on a world map. Furthermore, the visualization should be animated over time, so one can replay past events or just view the current live data. The last thing I added was an indicator for night and day phases in the world. Here you can see a little preview video showing the current results…

I did this with pure AS3.