Goal of this project is creating a scalable dynamic and interactive data visualization prototype. I saw fortune 500 data as a fantastic opportunity to understand this valuable data much more easily. This data is provided by Fortune magazine and it has powerful impact, but way of representation is only numbers with table, which is neither easy to understand nor able to see big picture. This data visualization present ‘fortune 500 companies’ from 1955 to 2012 in thorough and engaging manner.
You would be able to individually browse through each year from 1955 to 2012 and see the ranking, revenue and profit change of the range of companies.This final delivery is a interactive and dynamic data visualization that enable user compare complex data much more easily than before. Along with the data visualization, I’ve created video sketch that provides context of this data visualization to convey the concept much more easily.

Fortune 500 data visualization

Date: Dec, 11, 2012 / 5 weeks
Individual Project
Skill Used: Processing, Video Sketch, HTML5


Visit Project Site

1. Data integration

I started by collecting all of necessary data from Fortune 500 company’s official website. Data I’ve collected was revenue, profit and ranking data of those companies that are listed as Fortune 500 companies from 1955 to 2012.

 


2. Function Requirement

After I finish collect data I want to visualize in unified form, I started to make list about what kinds of functions should be provided. In this phase, I often consulted with professor Stanzel.

 


3. User Experience Design

Now, I have functions and data I want to initiate. But before start to make code, I want to get design right to provide clear user interaction. I sketched lots of draft mockups with pen and paper.

 


4. Programming

In this phase, I used Processing to implement what I have done in the previous process. To learn a new programming language was quite challenging, but I could implement what I designed by myself without compromising by doing lots of iterations.

 

1. Year manipulation

User can navigate through each year by adjusting slider bar at the top. User can directly click a year or drag through so he can see trend by the year

 



2. Revenue / Profit view switch

Revenue and profit is varied according to companies’ ranking. But it shows a certain difference when it’s sorted by revenue and profit. By clicking background, user can switch the view easily.

 


3. Company detail information

Company detail data is shown when user hover the mouse over one of the circle.

 


4. Inflation adjustment

All of the data can be converted to the current currency according to inflation calculator by simply click the button at the top right.

539
Lines of Code
64
Excel Data
35
Days to make
7
Iterations

The Final Result – Fortune 500 companies data visualization

This video explains what it does and how it help in real context of use.


If you like this project, please take a second
to share with the world!