The hue of a company is determined by the first year the company appears in the visualization. Companies are highlighted when hovered over. The box on the bottom displays the year and rank of the mouse position, as well as the highlighted company, if one exists. This project is implemented in C++ with openFrameworks.
Discoveries
The form of this visualization affords the following:
Efficiently answer what companies were successful at time X
Follow the Fortune 500 ranking of an individual company
The drawing of all the shapes requires a significant amount of computation. Fortunately, the background image does not change. Taking advantage of this, in setup(), I drew the static image in pieces and saved the screens to an array of ofImage objects. Therefore, during the main loop, the ofImage’s are drawn in their appropriate locations followed by the drawing of only one company if needed (the one hovered over).
Hover detection
It’s usually harder to make traditional interactive mouse applications in platforms such as Processing and openFrameworks where there isn’t really a concept of a GUI object. To solve this problem, I used the rather hacky process of saving the generated color of each company. Whenever the mouse moves, the program grabs the color of the point under the mouse and does a lookup in the color-company map.
Fortune 500 visualization
Concept: Graph the Fortune 500 companies, rank over time
Data Source
Complete list of Fortune 500 companies 1955-2009
The hue of a company is determined by the first year the company appears in the visualization. Companies are highlighted when hovered over. The box on the bottom displays the year and rank of the mouse position, as well as the highlighted company, if one exists. This project is implemented in C++ with openFrameworks.
Discoveries
The form of this visualization affords the following:
Implementation
Drawing the curves
The shapes are more or less Bézier curves combined with straight line segments. To achieve this, I had to draw the outline, which proceeded in the order one line segment followed by two Bézier curve segments. openFrameworks does not smooth filled shapes so to get the nice edges, I drew each shape a second time without fill.
Caching images
The drawing of all the shapes requires a significant amount of computation. Fortunately, the background image does not change. Taking advantage of this, in setup(), I drew the static image in pieces and saved the screens to an array of ofImage objects. Therefore, during the main loop, the ofImage’s are drawn in their appropriate locations followed by the drawing of only one company if needed (the one hovered over).
Hover detection
It’s usually harder to make traditional interactive mouse applications in platforms such as Processing and openFrameworks where there isn’t really a concept of a GUI object. To solve this problem, I used the rather hacky process of saving the generated color of each company. Whenever the mouse moves, the program grabs the color of the point under the mouse and does a lookup in the color-company map.