Proj 2 - 3D Visualization

[glegrady]

Proj 2 - 3D Visualization

This is the 2nd of 3 assignments to be realized in the MAT 259 Data Visualization course:
https://www.mat.ucsb.edu/~g.legrady/aca ... 4w259.html
----------------------------------
PROJECT ASSIGNMENT: The 3D visualization project consists in visualizing downloaded MySQL multi-dimensional data within a 3D space using the Java-based Processing language: https://processing.org/
----------------------------------------------------
PROCESSING LIBRARIES
PeasyCam: is the Processing library that allows for the 3D spatialization and mouse interaction: http://mrfeinberg.com/peasycam/
Control P5: http://www.sojamo.de/libraries/controlP5/ to add buttons if needed
Color Sampler: http://tristen.ca/hcl-picker/#/hlc/6/1/A7E57C/2C4321

Some Processing functions for 3D:
P3D: https://processing.org/tutorials/p3d/
Translate, pushmatrix, popmatrix functions are introduced. Information about push, pop and translation can be found at: https://www.processing.org/tutorials/transform2d/
-----------------------------------------------------
LESSONS LEARNED
. How to import multi-column csv data into java-based Processing
. How to work with basics of visual language (form, space, color, lines, labeling, etc.)
. How to visualize data in 3D space
. Acquire skills in design
-----------------------------------------------------
The MySQL Query
. Ask an interesting question to query in the Seattle Library database
. Download as csv file a query that returns minimum 5 columns to have data for the following:
X - for the Horizontal location
Y - for the Vertical location
Z - for the Depth location
C - for the Color value
S - for any other value such as the Scale of the data
-----------------------------------------------------
Some previous 3D Projects to review https://vislab.mat.ucsb.edu/

[paulkim]

I am still working with same-day checkout material in order to take a look at how people are using the library as a space to stay during the day. My original mockup was a map with each branch location marked at their coordinate locations. The idea is that each branch location, represented by a geometric shape, would expand and contract based on the number of same-day checkouts at that location. The user would be able to move through time, deciding which time scale to view the map at. The user could also filter based on type of checkout material and the weather as well.
The notes I received from the in-class presentation last week were mostly around how this visualization would necessarily be dependent on the static map structure. What I am working on now is a way to visualize this data without this dependence while preserving some geospatial data, since the physical location, in space, is a key part of this project.

[jingpeng]

Concept
With the inspiration of Project 1, I decided to focus on the five categories of publications related to mental health problems, which are Anxiety, Stress, Panic, Depression, and Mental Health.
I selected the number of checkouts in these categories from 2006 to 2023, and with the total number of checkouts, I calculated the percentage of these categories, which could reveal the trend over time more clearly.

I got this inspiration when I was listening to songs and thought it would be interesting if I could visualize the data in a sphere coordinate, combine different categories into one sphere, and compare them over time.

Process
I have gathered checkout records from 2006 to 2023 and specifically identified those related to five different categories. I organized the data by month and calculated the percentage of checkouts that fall under the different five categories. This provides insights into the proportion of these checkouts concerning the overall checkout activity over these years.

I first tried to visualize the date in the Cartesian coordinate system. The x-axis should be the year, the y-axis should be the month, and the z-axis should be the percentage.
But most of my percentage data is crammed together, making it kind of uneasy to draw in the coordinates.
I guess I need to use map() or other mathematical methods to make the difference between the data more clear. So I decided to first build a sphere coordinate system.
According to the sphere coordinate formula, for the next step, I’ll try to visualize the data in the sphere coordinate system first, then adjust the percentage data to make it more reasonable. Then connect all the points and try to realize the sound wave effect.

Final result
To make the result more like a sound wave, I’ve tried to use vertex() as well as curveVertex(). First, connect the points over the year and month. Then I also tried to connect every three adjacent vertexes to form and fill the surface, but it wasn’t what I wanted, so I stayed at the first way. Then due to two special points with extremely high values, I let all the 0 percentages stay at 0, used log() to change the range of these data, set the upper and lower limits, and then used map() to assign the percentage value to the minimum and maximum radius of the sphere.

Initially, five balls represent the percentage of checkout from five different categories. Then we can choose to draw any of these category balls separately or draw all the data in one sphere. We can also choose to make the points or the axis of year and month disappear.

[nefeli]

This visualization aims to explore the relationship between traditional art forms, such as textile art, and modern technological fields like AI. The study will examine the Seattle library checkout patterns to gain insights on this topic.

I began to visualize the outcomes of my previous assignment, but they did not meet my expectations for the weaving aesthetics that I was hoping to achieve. As a result, I decided to improve my search through the database by gathering more relevant data.
I explored different queries by searching through:
Subject Tag Count
Checkout Frequency
Average Checkout Variety
Checkout Durationin Hours
Checkout Date
Checkout Hour of day.

After careful consideration, I concluded that this query provides more suitable results.

Code: Select all

SELECT 
    o.title,
    o.itemtype,
    DATE(o.cout) AS CheckoutDate,
    HOUR(o.cout) AS CheckoutHour,
    TIMESTAMPDIFF(HOUR, o.cout, o.cin) AS CheckoutDurationHours,
    o.deweyClass
FROM
    spl_2016.inraw o
WHERE
    (LOWER(o.title) LIKE '%artificial intelligence%'
        OR LOWER(o.title) LIKE '%machine learning%'
        OR LOWER(o.title) LIKE '%neural networks%'
        OR o.deweyClass IN ('006.3'))
        AND o.cout >= '2021-01-01'
        AND o.cout < '2024-01-01'
ORDER BY o.cout;

Currently, I am working on visualizing the new data.

[yiranxiao]

Visualization Concept:

My 3D space is structured around time-based data columns: the X-axis denotes the year, the Y-axis is the month, and the Z-axis is the day. Within this space, nodes symbolize the daily checkout numbers of various music genres over an eight-year span. My visual concept of the nodes is inspired by fireworks, chosen for their dynamic and celebratory qualities, mirroring the vibrancy and impact of music on cultural festivities. The rotation speed and size of visual elements according to checkout volume.

To differentiate among the 10 queried music genres, a palette of 10 distinct colors will be applied, with a filtering option to isolate genre-specific data for analysis.

To highlight the periods of music festivals, I will also integrate a special dynamic firework effect to represent data fluctuations. This effect can visually emphasize the festivals' influence on music genre popularity.

[paulkim]

Library as third space

This project built on the first assignment of this course which was to analyze how the library was being used as a space itself rather than just as a repository. My proxy for this analysis was by looking at which items were checked out and back in on the same day. Below is the SQL query that I used to pull these items:

SELECT
*
FROM
spl_2016.inraw
WHERE
DAY(cout) = DAY(cin)
AND TIMESTAMPDIFF(DAY, cout, cin) < 1

In the last assignment, I did an analysis that revealed that non-books/DVD material, such as laptops, headphones, and other equipment, made up a significant portion of these items. My original idea for this project was to do a mapping of which branches saw how many of these same-day equipment checkouts, but some investigating into the inventory data uploaded on the Seattle Open Data Portal revealed that there are no unique identifiers for these types of equipment, meaning that they cannot actually be traced to branches. I then changed my project to analyzing the number of checkouts of these equipment compared to their total inventory by month over time to see how frequently these items were being used in comparison to how much of them the library had. This required a lot of data pre-processing which will be discussed in the next step.

Data Pre-processing
A lot of work was done in Python to merge the inventory and checkout data. The tasks were as follows:

• 1.Pull checkout data
  2. Pull inventory data
  3. Merge checkout data and inventory data
  • This was the most challenging part as it required keeping a data column that would keep track of the inventory over time as it updates. So basically, every time the inventory changed, I’d have to have the new inventory reflect in the merged dataset. Additionally, since the inventory was missing some data, I had to impute the missing data. Attached is a screenshot of some of my Python code:

In the first part of the code you will see the column “Running Total” created that keeps track of the inventory by month. In the second part of the code you will see where I imputed some missing data of the inventory. The imputation was done by just inserting the most recent inventory numbers for any missing data.

Process
I borrowed a similar idea from Li Zheng (2014) in the visualization since it allowed for a visualization of two different things on the same plane. Since I wanted to compare the inventory to checkouts data, I thought this would be a nice way of seeing this comparison.
I split the view into five different layers because I had five different equipment types so one could see the comparison of how many times certain pieces of equipment were checked out vs. how many were available, by month. Every time the non-blue graph goes above the flatter inventory line, that equipment type was checked out more times than the library had in inventory. This makes sense because the data is by month, and each item can be checked out multiple times.
Attached is a screenshot of my visualization.

If you mouse over the peaks of each graph, you will see the number of checkouts and the number of inventory at each month for each equipment type. I will be working on adding more labels, figuring out a better color scheme, the ordering of the data layers, and some other design choices. The final visualization is to come, but you can definitely still see some interesting insights in this visualization as it is. Some insights:

• 1. How the library responds to demand over time. It seems to generally lag, but they also generally responded to demand in some way. One interesting insight is that the library seemed to reduce the inventory of tablets due to lack of interest.
  2. Headphones and laptops are often checked out at high frequencies, whereas tablets and hot spots are hardly checked out at all.
  3. There is a huge number of hot spots available for checkout, but they are rarely checked out.
  4. You can see a predictable trough in each of these materials during COVID.

[nefeli]

InterWeaving

This exploration seeks to understand the interplay between traditional art forms such as textile art and modern technological fields like AI, as evidenced by patterns observed in Seattle library checkouts.

After the sudden expansion of AI in the creative field, some artist expressed their concern about the traditional art forms. This exploration aims to understand how traditional art forms like textile art are related or influenced by modern technological fields like AI, as reflected in the Seattle library checkout patterns.

I explored different queries throughout the first weeks of the course and after careful consideration, I concluded that this query provides more suitable results.

Code: Select all

SELECT 
    title,
    itemtype,
    DATE(cout) AS CheckoutDate,
    DATE_FORMAT(cout, '%H:%i') AS CheckoutHour,
    TIMESTAMPDIFF(HOUR, cout, cin) AS CheckoutDurationHours,
    deweyClass
FROM
    spl_2016.inraw
WHERE
    (LOWER(title) LIKE '%artificial intelligence%'
        OR LOWER(title) LIKE '%machine learning%'
        OR deweyClass IN ('006.3'))
        AND cout >= '2021-01-01'
        AND cout < '2024-01-01'
ORDER BY cout;

After extracting the data, I began visualizing the data with Check-out Date in the X axis, Check-out Time in the Y axis and the Check-out Duration in the Z axis.

A first draft visualization looked like this:


After spending some time otimising the visualization the log() function helped into a better distribution of the points. The Curve line needs to be optimized to reach both the beginning and the ending point. And the color palette need to be refined to provide a better understanding between the two topics.

Final color palette:
The final results are these:

,
,


There are buttons to turn on/off the box and the grid. A button for each Category being visualized and a slider changing towards the Y axis to have a better view on the data.

[yiranxiao]

Concept:
My concept is to analyze the impact of specific music festivals in Seattle (such as Capitol Hill Block Party, Bumbershoot, Belltown Bloom Festival, Beyond Wonderland Seattle, and Northwest Folklife), on the popularity of various music genres in the Seattle Public Library's collection. While acknowledging the shift in music consumption to digital platforms, this project aims to examine how checkouts of CDs, DVDs, and books across different music genres have fluctuated over the years from 2015 to 2023.

The project will query data trends in the number of checkouts for genres like pop, rock, jazz, electronica, country, folk, soul, blues, hip-hop, and funk. The focus on a range of years will help in understanding how physical media usage has changed in the context of evolving digital consumption habits. While I plan to visualize these trends on a monthly basis for a broader overview, a key focus will be on analyzing data around the specific dates of different music festivals. This approach aims to pinpoint any impacts these events may have on borrowing patterns. By observing checkout fluctuations during and around music festivals, I intend to analyze whether there is a direct correlation between these cultural events and shifts in genre popularity at SPL.

The data will reveal broader trends in music consumption and genre popularity over the years, offering a historical perspective on how music interests have evolved in the era of digital transformation.

Conclusion:
Rock and pop music consistently lead in yearly music checkouts in SPL, with a peak in 2015 and a decline thereafter, reflecting that music consumption is shifting to digital formats. Monthly data shows a surge in these genres around September, aligning with Seattle's Bumbershoot festival. Additionally, daily checkouts peak before and after major festivals like Capitol Hill Block Party and Northwest Folklife, particularly in their respective genres. This pattern suggests that music festivals influence public interest in specific music genres, with increased borrowing of related CDs, DVDs, and books around these events.

Visualization Concept:
My 3D space is structured around time-based data columns: the X-axis denotes the year, the Y-axis is the month, and the Z-axis is the day. Within this space, nodes symbolize the daily checkout numbers of various music genres over an eight-year span. My visual concept of the nodes is inspired by fireworks, chosen for their dynamic and celebratory qualities, mirroring the vibrancy and impact of music on cultural festivities. The rotation speed and size of visual elements according to checkout volume.

To differentiate among the 10 queried music genres, a palette of 10 distinct colors will be applied, with a filtering option to isolate genre-specific data for analysis.

For a more detailed analysis of checkout situations on specific dates, an input box function is integrated into the GUI, allowing viewers to input the information of year, month, and date for an observation of the genre's checkout pattern on specific year/month/date.

To highlight the periods of music festivals, I also integrated a special dynamic firework effect to represent data fluctuations. This effect can visually emphasize the festivals' influence on music genre popularity.

The final result:

[paulkim]

My updated code is attached. Changes made:

• 1. Color of the inventory layer changed to gray
  2. Re-ordered layers
  3. Made grid lines less visible
  4. Changed label orientation
  5. Removed "Months" label on x-axis
  6. Mouse hover on the higher of the checkouts/inventory data layer at vertices will show number of checkouts and number of inventory at that month/year for that equipment
  7. Added graph title