3D Interactive
MAT 259, 2012
Ankit Srivastava

Introduction
The idea of this project is to extend the capabilities of a 2d treemap into the 3d space. The motivation for this comes from a conference paper - Exploration of the 3D Treemap Design Space - presented in "Poster Compendium of IEEE InfoVis'07". The link to this paper has been added below. Treemaps have been been one of the most accepted hierarchical area based visualization. Each rectangle area represents a information attribute. By giving it a height, i.e. a volume, we can extend the amount of information that we can add to it in the 2d space, where volume can represent a third attribute with the color representing a second attribute. We can still maintain hierarchical relationships as represented in the doodle below.

Conference Paper

Background
and Sketches


Query
select FLOOR(deweyClass/100)*100 dewey, FLOOR(deweyClass/10)*10 deweySub, month(cout) month, day(cout) day, count(*) from spl0.inraw where (deweyClass <> 'null' OR deweyClass <> NULL) and year(cout) = 2011 group by dewey, deweySub, month, day order by dewey, deweySub, month, day;

select FLOOR(deweyClass/100)*100 dewey, month(cout) month, count(*), avg(TIMESTAMPDIFF(DAY, cout, cin)) from spl0.inraw where (deweyClass <> 'null' OR deweyClass <> NULL) and year(cout) = 2011 group by dewey, month order by dewey, month;
Explanation
The first query gets Day-wise data for all months, deweys and sub-deweys. The second query gets Average Checkout Duration and Number of Checkouts per month for eacch Dewey Category.

Result and
Analysis
The aim of this project is to extend the capabilities of a 2d treemap visualization and still maintaining hierarchical relationships. In this project, I have represented each tower (cuboid) as a dewey category with the area of the tower representing the average checkout duration for the dewey category in a particular month (You can scroll through the month using keys - 'q' or 'w') and the height representing the total number of checkouts in a month. Each dewey category tower is then subdivided into layers to provide information about each of the sub dewey categories. Each layer represents a sub dewey category and the vertical bars in each layer represent the number of checkouts on each day for the sub-dewey category. Red represents very high activity and black represents zero or very minimal activity.


Code
I used the PeasyCam library in Processing.

Run in Browser

Source Code

Control
Click and drag mouse to control the camera
1. q/w - use these keys to scroll through each month
2. g - to switch on the axis lines
3. m - to change color mode. 3 modes are supported - grayscale, red/black and all colors