Shipping data visualization

I was tasked with the idea of creating some proof-of-concept (I notice i do a lot of those, imo they’re the most fun part of the project) data-visualizations involving the movement of objects on an international scale. You can obviously tell i’m trying to give out as few specific details as possible that could get me into trouble, so sorry for being so seemingly mysterious.

The first concept I had was to take the data, and use various classic key elements of infographics to denote and show at a glance the voluminous information displayed. One of the problems I came across was that I basically had more data than my computer could handle, so I had to truncate it, but that left me with information that heavily favored specific ports. In the end I used Perlin Noise to generate realistic feeling randomness to these proof-of-concepts.

(Sorry. Again, cant get into specifics, but this might be as close as this project gets to getting made so i thought i’d share.)
The key is as follows:
X axis represents something
Y axis represents a different value Logarithmicly scaled
Size is controlled by weight
Color is controlled by destination country

It was the first one I created that I actually liked, it has a really abstract feel to it. I don’t know if the client was looking for that, but I tend to make more along the lines of what I like and hope they like it too.

Actually that concept came from playing using Adobe Ideas ( a sketching application for ipad ). I really like that program, it’s actually my favorite program on the iPad and it’s made by Adobe. So take that Apple!
In any case…. this is the sketch


In this second one I decided that it would be good to show the various ports weighed against one another..
So I stacked the ports clockwise in order of importance ( in terms of a simple formula I created with the data ). I also decided, mostly cus it looked nice to show the port codes under the country-code which gives the image a more mathy-feel which kind of works out.

Actually that idea also came from sitting there and playing in Adobe Ideas until something popped into my head.
This is the original sketch. I was hoping to show some more relationships between the ports using arcs, but some of the data wasn’t playing nice.

I took that previous concept one step further and used a 100 ports, which is too much but it looked very very cool!
I also decided to order the ports non-sequentially, as a result the structure of the graph feels like a sunburst almost.


This is the last one I made before I started another project, it’s a combination of sorts of various ideas I had along the way.

It was really a lot of fun creating these, I did tend to stay mostly on the side of making something that looked pretty. I don’t know how useful they might be, but at the same time they’re all early proofs without finessing so they could possibly a middle ground could of been formed.

All of the images were created via Actionscript, in the flash player. I used it to crunch all the numbers, and using the drawing API the images were born. It was really the only way to do it for me, i have no design skills and the idea of duplicating each node and mapping it to where it should be seems crazy to me. To do that by hand, my hats off to people who can do that

There are some other concepts / proofs I created which i’ll share another time.

2 thoughts on “Shipping data visualization”

  1. Hi there,

    I’m doing a project for my architecture degree based on the shipping industry and am eager to work on some visualizations of container movement globally. What are the chances of my being able to access your data set used for these?


    1. Hi Lorcan,

      Unfortunately there is no way that I can divulge the statistical data used as it was for a client, and the actual data is their property.

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.