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.
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.