3D Interactive
MAT 259, 2012
David Gordon

An adaptation of my Project 2 (2D spatial map), this project is a 3D visualization of all checkout transactions at the Seattle Public Library (SPL) between April 11-15, 2011. I expanded the dataset to include five days of data, so that the user can compare daily transaction patterns over a week. The height and color of the boxes indicates the number of transactions for that hour and Dewey category on a particular day.

and Sketches
Project 2 showed the daily transactions at the SPL by hour and Dewey category on a 2D spatial map, where the opacity of the overlapping boxes represented the transaction frequency. While this visualization provided a useful and aesthetically pleasing overview, I thought that it was difficult to compare the boxes' opacities, especially when very close together, or at high frequency values. For this project, I tried to improve these issues by visualizing the data points as separate 3D bars, whose heights can easily be compared.

select floor(deweyClass) as deweyCl, HOUR(cout) as hourCout, count(*) as hourCount from inraw where deweyClass != 'null' and date(cout) = '2011-04-11' group by deweyCl, hourCout order by deweyCl, hourCout;
This query returns all transactions on the April 12th, 2011, grouped and ordered by Dewey class and checkout hour.

I began by laying the 2D spatial map from Project 2 on the "ground" and representing the transaction frequencies, previously indicated by opacity, by the heights of 3D bars. Next, to further aid the viewer in comparing data points, I mapped the transaction frequency to the hue of each bar as well as height, making the shortest bars yellow, medium bars are green, and the highest ones blue. Finally, with the raw data mapped to height and color, some of the bars appeared extremely tall. To fix this problem, I mapped height to the square of the frequencies, improving the clarity and visibility of the whole dataset.

Result and
Adding 3D to the dataset from Project 2 added a new level of difficulty in coding, but I felt that the additional dimension and user interactivity strengthened the visualization of the data. The use of 3D allowed me to map the three variables (transaction frequency, hour and Dewey category) to three dimensions, rather than two, and I found it easier to compare heights of bars than opacity of boxes.

I used the PeasyCam library in Processing.

Run in Browser

Source Code

Click and drag mouse to control the camera. Rotate the model with the keyboard in each of the three dimensions, X, Y and Z, using pairs X-C, Y-B, and Z-A, respectively. Navigate the 3D space and change the date displayed using the number keys 1-5. The remaining number keys 6,7,8,9 and 0 are preset viewing angles selected to easily show the data from multiple viewpoints. Spacebar resets the camera to the default view.