Proj 2 - 3D Visualization

Professor George Legrady
Post Reply
glegrady
Posts: 203
Joined: Wed Sep 22, 2010 12:26 pm

Proj 2 - 3D Visualization

Post by glegrady » Fri Dec 23, 2022 7:58 am

Proj 2 - 3D Visualization

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/

Library geographic distribution. Data in 3D box with lines and curves
http://vislab.mat.ucsb.edu/2020/p2/Evge ... nyNoi.html, Evgeny Noi: "Slow Readers"
--
Irregular distribution of 641 Cookbooks Info Data
https://vislab.mat.ucsb.edu/2019/p2/Cha ... index.html
--
Prediction Analysis. Data that prioritizes curves
http://vislab.mat.ucsb.edu/2020/p2/Guan ... index.html, Guanyu Chen: "True vs Prediction"
--
Occult and Long Tube
http://vislab.mat.ucsb.edu/2020/p2/Erin_Woo/index.html, Erin Woo: "Trends in Parasychology & the Occult at SPL"
--
Correlating library data with external temperature
http://vislab.mat.ucsb.edu/2017/p2/MertToka/index.html, Mert Toka: "Word Temperatures"
--
Uses word2vec: https://www.tensorflow.org/tutorials/text/word2vec
http://vislab.mat.ucsb.edu/2017/p2/Hann ... index.html, Hannah Wolfe: "Lost & Forgotten Books"
----------------------------------------------------
EVALUATION
Your project will be reviewed according to these criteria. You can redo the project throughout the length of the course.

What are the conditions for a good grade?:
1) An interesting MySQL query
2) A working, interactive visualization in 3D in the java-based Processing environment
3) Data to determine the shape of the visual form: Let the metadata values determine where and how the data is to be organized within the 3D space, rather than to have a predetermined form
4) Be innovative - you can begin with an existing project but you must significantly change it so that it becomes something new
5) Visual Design: Consider space, the function of color, color relationships, clean fonts (Arial, Helvetica, Futura, etc.) Review examples at the course website: https://www.mat.ucsb.edu/~g.legrady/aca ... ences.html

CONTENT INNOVATION: your query question and outcomes. How original, engaging, unusual, your query, or your approach to the query may be, and how interesting the data may be. The data has to be multivariate, and granular (meaning a lot of data) so that we can see patterns forming in the data.

DESIGN: The design can build on our demos but hopefully go beyond. Areas of exploration are in how you use space, form, colors, data organization, timing, interaction, coherence, direction, etc.

COMPUTATION: The third evaluation is the computational component. First of all, the code needs to work. Special consideration will be for unusual, elegant expression, utilizing functions, algorithms, etc that you can introduce to the class.
------------------------------------------------------
Label your Documents
Please make sure to label your documents like csv files by the name of your project, or your name so we can identify where they come from

This is a lot to cover in the short time we have. Take one step at a time! Let us know if you have any questions.
George Legrady
legrady@mat.ucsb.edu

briannagriffin
Posts: 11
Joined: Fri Sep 23, 2022 10:04 am

Re: Proj 2 - 3D Visualization

Post by briannagriffin » Thu Feb 16, 2023 1:31 pm

For my second project, I would like to show the relationships between the first checkout date and the last checkin date at the Seattle Public Library. Overall, this will show the “lifespan” of books at the SPL. By connecting their first checkout date to the last checkin date, the resulting vectors tells how long the book was in use by readers in Seattle. A long line means the book was used for a long period of time, while a short line means it was used for a short period of time. I am also considering popularity of the books as a key variable in my visualization by dividing the data into categories based on their number of checkouts over time and coloring them based on it. The x, y, and z axis for my 3D visualization correspond to month, date, and year respectively.

Here is my presentation for Tuesday 2/21/23:
MAT 259 Project 2_ 3D Visualization.pdf
(716.85 KiB) Downloaded 63 times
Here is the data that I queried for for the visualization.
data_new.csv
(359.27 KiB) Downloaded 50 times
Here is the processing code in a zip file:
Project2_Feb26.zip
(714.07 KiB) Downloaded 43 times
Below is my processing code for the Project.

Code: Select all

/****************************************************************************************
Mat 259 : Project 2 3D Visualization
"Lifespan of Books at the Seattle Public Library"
                                                     
Author: Brianna Griffin                        
Supervisor: George Legrady                           

Purpose: Show how to present library data in a basic 3D environment. Show relationships 
         between the first checkout date and the last checkin date at the SPL. 

Usage:    1. A mouse left-drag will rotate the camera around the subject. 
          2. A double-click restores the camera to its original position. 
          3. 'p' - removes/adds points
          4. '1' - removes/adds data with 1 ≤ checkouts ≤ 10
          5. '2' - removes/adds data with 11 ≤ checkouts ≤ 20
          6. '3' - removes/adds data with 21 ≤ checkouts ≤ 30
          7. '4' - removes/adds data with 31 ≤ checkouts ≤ 40
          8. '5' - removes/adds data with checkouts ≥ 41
          9. 'x' - removes text on screen
          10. '<' & '>': rotate the X axis
          11. 'w' & 's': rotate the Y axis
          12. 'o' & 'i': rotate the Z axis
(color of the vector denotes the number of checkouts of the book since 2005 at the SPL)
****************************************************************************************/
import peasy.*; 
import controlP5.*;

ControlP5 cp5; 
PeasyCam cam;

Table table;
int numRows; 
ArrayList<Item> items = new ArrayList<Item>();
int numMiddlePoints = 10;


void setup(){
  size(1500, 800, P3D); 
  cam = new PeasyCam(this, 200); 
  cam.setMinimumDistance(95); 
  cam.setMaximumDistance(150);  
  cam.lookAt(0, 0, 0); // sets center POV
  
  float fov = PI/6; // field of view try between PI/2 to PI/10
  
  float  cameraZ = (height/2.0) / tan(PI*60.0/360.0);

  //perspective(field of view in radians; aspect/ratio of width to height; zNear - Z position of nearest clipping, zFar - Z position of farthest clipping)
  //default values are : perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ*10.0) where cameraZ is ((height/2.0) / tan(PI*60.0/360.0));
  perspective(fov, float(width)/float(height), cameraZ/10.0, cameraZ*10.0); // if using 0.001 instead of cameraZ/10.0 so that all things close to the screen can be seen - get noise
  
  // import the csv 
  table = loadTable("data_new.csv", "header");
  numRows = table.getRowCount();
  
  // make the array with the data from the csv 
  for(int i=0; i<numRows; i++){
    String title = table.getString(i,0);
    float x_0 = table.getFloat(i,1);
    float y_0 = table.getFloat(i,2);
    float z_0 = table.getFloat(i,3);
    float x_1 = table.getFloat(i,4); 
    float y_1 = table.getFloat(i,4); 
    float z_1 = table.getFloat(i,6); 
    String item_cat = table.getString(i,7); 
    float number_checkouts = table.getFloat(i,8); 
    items.add(new Item(title,x_0, y_0, z_0, x_1, y_1, z_1, item_cat, number_checkouts));
  }
}

void draw(){
  background(200);
  
for(int i = 0; i<numRows; i++){ 
  
  if(A){
  if(items.get(i).number_checkouts >= 1 && items.get(i).number_checkouts <= 10){
  line(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0, 
  items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  color middleColor;
  middleColor = lerpColor(begColor(items.get(i).number_checkouts),endColor(items.get(i).number_checkouts), i/float(numRows));
  stroke(middleColor);}
  }
  
  if(B){
  if(items.get(i).number_checkouts >= 11 && items.get(i).number_checkouts <= 20){
  line(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0, 
  items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  color middleColor;
  middleColor = lerpColor(begColor(items.get(i).number_checkouts),endColor(items.get(i).number_checkouts), i/float(numRows));
  stroke(middleColor);}
  }
  
  if(C){
  if(items.get(i).number_checkouts >= 21 && items.get(i).number_checkouts <= 30){
  line(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0, 
  items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  color middleColor;
  middleColor = lerpColor(begColor(items.get(i).number_checkouts),endColor(items.get(i).number_checkouts), i/float(numRows));
  stroke(middleColor);}
  }
  
  if(D){
  if(items.get(i).number_checkouts >= 31 && items.get(i).number_checkouts <= 40){
  line(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0, 
  items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  color middleColor;
  middleColor = lerpColor(begColor(items.get(i).number_checkouts),endColor(items.get(i).number_checkouts), i/float(numRows));
  stroke(middleColor);}    
  }
  
  if(E){
  if(items.get(i).number_checkouts >= 41){
  line(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0, 
  items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  color middleColor;
  middleColor = lerpColor(begColor(items.get(i).number_checkouts),endColor(items.get(i).number_checkouts), i/float(numRows));
  stroke(middleColor);}    
  }
  
  }
  
  
 pushStyle();

for(int i = 0; i<numRows; i++){ 
  
  if (points){
    
  if(pointA){
  if(items.get(i).number_checkouts >= 1 && items.get(i).number_checkouts <= 10){
  color beg = begColor(items.get(i).number_checkouts);
  color end = endColor(items.get(i).number_checkouts);
  point(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0);
  stroke(beg);
  strokeWeight(7);
  point(items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  stroke(end);
  strokeWeight(7);
    }}
  
  if(pointB){
  if(items.get(i).number_checkouts >= 11 && items.get(i).number_checkouts <= 20){
  color beg = begColor(items.get(i).number_checkouts);
  color end = endColor(items.get(i).number_checkouts);
  point(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0);
  stroke(beg);
  strokeWeight(7);
  point(items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  stroke(end);
  strokeWeight(7);}}
  
  if(pointC){
  if(items.get(i).number_checkouts >= 21 && items.get(i).number_checkouts <= 30){
  color beg = begColor(items.get(i).number_checkouts);
  color end = endColor(items.get(i).number_checkouts);
  point(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0);
  stroke(beg);
  strokeWeight(7);
  point(items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  stroke(end);
  strokeWeight(7);}}  
  
  if(pointD){
  if(items.get(i).number_checkouts >= 31 && items.get(i).number_checkouts <= 40){  
  color beg = begColor(items.get(i).number_checkouts);
  color end = endColor(items.get(i).number_checkouts);
  point(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0);
  stroke(beg);
  strokeWeight(7);
  point(items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  stroke(end);
  strokeWeight(7);}}
  
  if(pointE){
  if(items.get(i).number_checkouts >= 41){
  color beg = begColor(items.get(i).number_checkouts);
  color end = endColor(items.get(i).number_checkouts);
  point(items.get(i).x_0, items.get(i).y_0, items.get(i).z_0);
  stroke(beg);
  strokeWeight(7);
  point(items.get(i).x_1, items.get(i).y_1, items.get(i).z_1);
  stroke(end);
  strokeWeight(7);}}  
  }
}
    
  popStyle(); 
  hi(); 

  // x axis
  stroke(0);
  line(0, 0, 0, 12, 0, 0);
  // y axis 
  line(0, 0, 0, 0, 31, 0); 
  // z axis
  line(0, 0, 0, 0, 0, 23);
  
  textAxis();
  
void textAxis(){
  fill(0); 
  textSize(1);
  text("Month", 12, 0,0);
  text("Day", 0, 31,0); 
  text("Year", 0, 0,23);
}
}

class Item{
  String title;
  float x_0;
  float y_0;
  float z_0;
  float x_1; 
  float y_1; 
  float z_1; 
  String item_cat;
  float number_checkouts; 
  
  Item(String title, float x_0,float y_0,float z_0,float x_1, float y_1, float z_1, 
  String item_cat, float number_checkouts){
  this.title = title;
  this.x_0 = x_0;
  this.y_0 = y_0;
  this.z_0 = z_0;
  this.x_1 = x_1; 
  this.y_1 = y_1; 
  this.z_1 = z_1; 
  this.item_cat = item_cat; 
  this.number_checkouts = number_checkouts;
}
}

Boolean points = true, A = true, B = true, C = true, D = true, E = true; 
Boolean pointA = true, pointB = true, pointC = true, pointD = true, pointE = true;

// colors
 
color c1 = #f4a4c4; // light magenta
color c2 = #d80e5f; // dark magenta
color c3 = #f4f2a4; // light yellow 
color c4 = #d8d40e; // dark yellow 
color c5 = #a4f4a8; // light green 
color c6 = #076e4a; // dark green
color c7 = #a4f2f4; // light blue
color c8 = #0e1bd8; // dark blue
color c9 = #cda4f4; // light purple
color c10 = #760ed8; // dark purple

// beggining color for linear gradient
color begColor(float number_checkouts){
  color color_beg = #FFFFFF;
  
  if(number_checkouts >= 1 && number_checkouts <= 10){
  color_beg = c1; 
  }
  
  else if(number_checkouts >= 11 && number_checkouts <= 20){
  color_beg = c3; 
  }

  else if(number_checkouts >= 21 && number_checkouts <= 30){
  color_beg = c5; 
  }

  else if(number_checkouts >= 31 && number_checkouts <= 40){
  color_beg = c7; 
  }

  else if(number_checkouts >= 41){
  color_beg = c9; 
  }
  return color_beg;
}


// ending color for linear gradient
color endColor(float number_checkouts){
  color color_end = #FFFFFF;
  
  if(number_checkouts >= 1 && number_checkouts <= 10){
  color_end = c2; 
  }
  
  else if(number_checkouts >= 11 && number_checkouts <= 20){
  color_end = c4; 
  }

  else if(number_checkouts >= 21 && number_checkouts <= 30){
  color_end = c6; 
  }

  else if(number_checkouts >= 31 && number_checkouts <= 40){
  color_end = c8; 
  }

  else if(number_checkouts >= 31){
  color_end = c10; 
  }
  return color_end;
}


void keyPressed() {

// press p to remove end points of the lines
  if (key == 'p') {
    points = !points; 
  }
  if (key == '1') {
    A = !A; 
    pointA = !pointA;
  }
  if (key == '2') {
    B = !B; 
    pointB = !pointB;
  }
  if (key == '3') {
    C = !C; 
    pointC = !pointC;
  }
  if (key == '4') {
    D = !D;
    pointD = !pointD;
  }
  if (key == '5') {
    E = !E; 
    pointE = !pointE;
  }
  if (key == 'x') {
    textselect = !textselect; 
  }  
  
  //horizontal rotation
  if (key =='<') {
    cam.rotateY(0.45); 
    }
  if (key =='>') {
    cam.rotateY(-0.45); 
    }
    
  //vertical rotation
  if (key =='w') {
    cam.rotateX(-0.45); 
    }
  if (key =='s') {
    cam.rotateX(0.45); 
    }
    
  // z rotation 
  if (key =='o') {
    cam.rotateZ(-0.45); 
    }
  if (key =='i') {
    cam.rotateZ(0.45); 
    }
    
}

Boolean textselect = true; 

void hi(){
  if(textselect){
  hint(DISABLE_DEPTH_TEST);
  cam.beginHUD();
  textSize(80);
  scale(0.4);
  textAlign(LEFT);
  fill(0); 
  text("MAT 259: Project 2", 50, 120);
  textSize(50);
  fill(0);
  text("Brianna Griffin", 50, 180);
  textSize(60);
  text("Lifespan of Books at the Seattle Public Library", 2400, 100);
  textSize(50); 
  text("Keyboard Functions:", 50, 1550);
  textSize(40); 
  text("'p' - removes/adds points", 50, 1600);  
  text("'1' - removes/adds data with 1 ≤ checkouts ≤ 10", 50, 1650);  
  text("'2' - removes/adds data with 11 ≤ checkouts ≤ 20", 50, 1700); 
  text("'3' - removes/adds data with 21 ≤ checkouts ≤ 30", 50, 1750); 
  text("'4' - removes/adds data with 31 ≤ checkouts ≤ 40", 50, 1800); 
  text("'5' - removes/adds data with checkouts ≥ 41", 50, 1850); 
  text("'x' - removes text on screen", 50, 1900); 
  textSize(50);   
  text("Color Legend:", 3000, 1550);
  fill(#d80e5f);
  text("1 ≤ checkouts ≤ 10", 3000, 1600); 
  fill(#ffdd00); 
  text("11 ≤ checkouts ≤ 20", 3000, 1650); 
  fill(#076e4a);
  text("21 ≤ checkouts ≤ 30", 3000, 1700); 
  fill(#0e1bd8);
  text("31 ≤ checkouts ≤ 40", 3000, 1750); 
  fill(#760ed8);
  text("checkouts ≥ 41", 3000, 1800); 
  textSize(40);
  fill(0); 
  textSize(55); 
  text("Camera Functions:", 3000, 200); 
  textSize(50);
  text("'<' & '>': rotate the X axis ", 3000, 250); 
  text("'w' & 's': rotate the Y axis ", 3000, 300);  
  text("'o' & 'i': rotate the Z axis ", 3000, 350); 
  cam.endHUD();
  hint(ENABLE_DEPTH_TEST);
  }
}

Last edited by briannagriffin on Sun Feb 26, 2023 5:26 pm, edited 7 times in total.

qinghuang
Posts: 5
Joined: Thu Jan 12, 2023 1:09 pm

Re: Proj 2 - 3D Visualization

Post by qinghuang » Thu Feb 16, 2023 1:37 pm

This project intends to examine whether the development history of social media and artificial intelligence are aligned with check-out book records in the Seattle library. Both social media and artificial intelligence are emerging technologies that have become known to the public and led to some heated discussions.

By visualizing these two concept-related books' check-out records together within a 3D model, we can gain insights into how the public gets to learn about new technologies through borrowing book from the library (time, date, itemNumber).

Main features:
Rows = 14670
Three dimension: ItemNumber;Time (10 AM-8 PM); Date (2006-2022)
Count: the number of records
Category: 1-social media 2-AI

Code: Select all

/*************************************************************************************
Assignment 2 in course MAT259 
3D visualization - Social Media vs. Artificial Intelligence - Qing Huang

Green: Artificial Intelligence Books
Red: Social Media Books

Borrowed from Data Visualization - Basic 3D Demo                                                                     
Author: Rodger (Jieliang) Luo                        
Supervisor: George Legrady                           

Purpose: Show how to present volume data in a basic 3D environment     

Usage: 1. A mouse left-drag will rotate the camera around the subject.
          2. A right drag will zoom in and out. 
          3. A middle-drag (command-left-drag on mac) will pan. 
          4. A double-click restores the camera to its original position. 
          5. The shift key constrains rotation and panning to one axis or the other.
*************************************************************************************/
import controlP5.*;
import peasy.*;
PeasyCam cam;
ControlP5 cp5;

float gray;
float fillColor;
boolean showBox;

int startYear = 2006;
int endYear = 2022;

Table table;
int numRows, numColumns;

ArrayList<Book> books = new ArrayList<Book>();

void setup(){
  size(1000, 1000, P3D);
  cam = new PeasyCam(this, 300);
  
  //Added on Jan 30th by Rodger Luo
  float  cameraZ = (height/2.0) / tan(PI*60.0/360.0);
  perspective(PI/3.0, width/height, 0.001, cameraZ*10.0); //set near clip to 0.001 to go inside data
  //Finished adding 
  
  table = loadTable("t1.csv", "header");
  numRows = table.getRowCount();
  println("Rows: " + numRows);
  
  for(int i=0; i<numRows; i++){
    Float itemNum= table.getFloat(i,0);
    String time = table.getString(i,1);
    String date = table.getString(i,2);
    String title = table.getString(i,3);
    int count = table.getInt(i,4);
    int category = table.getInt(i,5);
    books.add(new Book(itemNum, time, date, title, count, category));
  }
  cp5 =new ControlP5(this);
  gray=128;
  showBox = true;
  fillColor= 255;
  setGui();
}


void draw(){
  background(0);
  
  for(int i=0; i<books.size(); i++){
    float yearAxis = map(dateParser(books.get(i).date), 0, 6205, -100, 100);
    float timeAxis = map(timeParser(books.get(i).time), 600, 1200, -50, 50);
    float itemAxis = map(books.get(i).itemNum, 86851, 8018820, -50, 50);
    color c = categoryDetermine(books.get(i).category);
    pushMatrix();
    translate(yearAxis, timeAxis, itemAxis);
    strokeWeight(2);
    stroke(c);
    point(0,0,0);
    popMatrix();
  }
  
  drawLabels();  
    
  fill(200, 20);
  noStroke();

  
  if(showBox == true){
    box(200, 100, 100);
  }
  gui();
  println(mouseX,mouseY);
  if((mouseX<180)&(mouseY<180)){
  cam.setActive(false);
  }
  else{
  cam.setActive(true);
  }
}








void drawLabels(){
  fill(255);
  textSize(30);
  pushMatrix();
  textAlign(LEFT, TOP);
  translate(-100, 50, 50);
  scale(0.1);
  text("2006", 0, 0, 0);
  popMatrix();
  
  pushMatrix();
  textAlign(RIGHT, TOP);
  translate(100, 50, 50);
  scale(0.1);
  text("2022", 0, 0, 0);
  popMatrix();
  
  pushMatrix();
  textAlign(RIGHT, TOP);
  translate(-100, -50, 50);
  scale(0.1);
  text("10AM", 0, 0, 0);
  popMatrix();
  
  pushMatrix();
  textAlign(RIGHT, BOTTOM);
  translate(-100, 50, 50);
  scale(0.1);
  text("8PM", 0, 0, 0);
  popMatrix();
  
  pushMatrix();
  textAlign(LEFT, CENTER);
  translate(100, 50, 50);
  scale(0.1);
  text("new", 0, 0, 0);
  popMatrix();
  
  pushMatrix();
  textAlign(LEFT, CENTER);
  translate(100, 50, -50);
  scale(0.1);
  text("old", 0, 0, 0);
  popMatrix();
}

void setGui(){
  PFont pfont=createFont("Arial", 16, true);
  ControlFont font = new ControlFont(pfont,12);
  float X = 60;
  float distance = 40;
  int index =1;
  
  cp5.addToggle("showBox")
  .setFont(font)
  .setPosition (X, distance*index);
  index++;
  
  
  cp5.addTextlabel("label")
  .setFont(font)
  .setText("Press Space: Show Box")
  .setPosition(X, index*distance);
  index++;
  
  cp5.setAutoDraw(false);
}

void randomizeColor(){
  gray = random(0,255);
}

void gui(){
  hint(DISABLE_DEPTH_TEST);
  cam.beginHUD();
  cp5.draw();
  cam.endHUD();
  hint(ENABLE_DEPTH_TEST);
}
Attachments
t1.csv
(1.4 MiB) Downloaded 51 times
Qing_MAT_VISUALIZATION2.pptx
(1.93 MiB) Downloaded 56 times

arnavkumar
Posts: 3
Joined: Fri Jan 07, 2022 12:14 pm

Re: Proj 2 - 3D Visualization

Post by arnavkumar » Mon Feb 20, 2023 11:24 pm

Initial Concept:

The focus of this analysis is on the distribution of checkouts aggregated across year and modality for books in Dewey categories 400-499. This topic was chosen to reveal change across language learning modalities across the years 2006-2023, so the magnitude of checkouts were not as relevant themselves as were the gradients across time. A treemap structure thus seemed suitable for this hierarchical aggregation task, with a 3D augmentation to account for the third axis, which is time. Attached below is the final outcome based on this query, including a report as well as the code and data zipped together in a separate file.
Screenshot 2023-02-23 at 11.48.01 AM.png
Screenshot 2023-02-23 at 11.48.25 AM.png
Attachments
Arnav Kumar MAT259 Project 2 Report.pdf
(2.38 MiB) Downloaded 49 times
TreeMapAggregated.zip
(12.9 KiB) Downloaded 43 times
Last edited by arnavkumar on Thu Feb 23, 2023 12:05 pm, edited 1 time in total.

zeyuwang
Posts: 3
Joined: Thu Jan 12, 2023 4:26 pm

Re: Proj 2 - 3D Visualization

Post by zeyuwang » Tue Feb 21, 2023 12:58 am

In my project 2, I implemented The Chinese Related Books Interests at Seattle Public Library visualization, an interactive 3D environment allowing users to explore the library's circulation data from 2006 to 2022. It has two main views, the plot and the point of view. The plot view displays a plot that shows the checkout number of Chinese-related books over time, with a focus on the top 50 popular books. The point view presents a 3D visualization of popular books over time, highlighting trends in five-year intervals. Together, these views offer a comprehensive picture of the popularity of Chinese-related books at the Seattle Public Library, making it easy for users to understand the trends and identify popular titles.
new_version.png
new version(updated on 03/22/2023)
lollipop_view.png
lollipop view
point_view.png
point view overview
show_specific_class_information.png
show specific class information
Attachments
project2_zeyu_mat259 3.zip
(1.15 MiB) Downloaded 50 times
MAT259_Project2_Zeyu_Presentation.pdf
(1.13 MiB) Downloaded 49 times
Last edited by zeyuwang on Wed Mar 22, 2023 1:45 pm, edited 3 times in total.

lu_yang
Posts: 9
Joined: Mon Sep 26, 2022 10:23 am

Re: Proj 2 - 3D Visualization

Post by lu_yang » Tue Feb 21, 2023 2:08 am

I want to create a dynamic self-organized flocking simulation based on books been checked out at the same time. I assume it would be interesting to see:
Book titles with a specific keyword may contain different Dewey classes and different subjects
Books checked out with these books may contain a broader range of Dewey classes and subjects
These books may aggregate at a different Dewey class than their designated ones

The flocking simulation does not intend to deliver a result right at the beginning. Instead, it requires interaction with provided parameters and observation through its self-organized forms. Different parameter setups could lead to different results.
Attachments
Flocking_updated.zip
(2.57 MiB) Downloaded 49 times
Lu Yang MAT259 Project 2.pdf
(213.04 KiB) Downloaded 55 times
Flocking.zip
(2.5 MiB) Downloaded 49 times
Last edited by lu_yang on Thu Feb 23, 2023 2:01 pm, edited 1 time in total.

yanchenlu
Posts: 3
Joined: Thu Jan 12, 2023 4:20 pm

Re: Proj 2 - 3D Visualization

Post by yanchenlu » Tue Feb 21, 2023 2:44 am

This project examines the check-out and check-in data for fiber and textile art related books. I looked into 4 main keywords, "Crochet", one of its sub-form "Amigurumi", "Macrame", and its sub-form "Friendship Bracelet". Then, I queried for book records with titles containing these keywords, and measured the length of time each book spent outside the Seattle Public Library. Additionally, I also aggregated the total number of check-outs and check-ins that happened on each day, regarding these 4 categories of books.

The queried data contains records from 2005 to the first 2 weeks of February 2023. The year-month-day timestamp data maps each record to a point in the 3D space: days of a month are organized along the x-axis, and the months and years are organized along the z-axis. For each book record, I then draw a curve from the check-out date to the check-in date. The number of days each book spent outside the SPL is used to determine the height (along -y) of each curve. For the aggregated frequency data, I visualized them as spheres. The size of each sphere corresponds to the number of check-out and check-in records of that date.

The GUI allows the user to navigate the 3D space, and has many toggles to show and hide relevant information. Specific options are detailed in the user interface and in the code.

Report webpage: https://cold-chocolate.notion.site/Proj ... e9ce2c97f6

Some screenshots:
Screen Shot 2023-02-21 at 2.31.24 AM.png
Screen Shot 2023-02-21 at 2.33.45 AM.png
Screen Shot 2023-02-21 at 2.33.28 AM.png
Attachments
YanchenLu_Project2_Report.pdf
(2.96 MiB) Downloaded 47 times
query_and_data_preprocessing.zip
(3.01 MiB) Downloaded 53 times
ProcessingCode.zip
(2.1 MiB) Downloaded 56 times
Last edited by yanchenlu on Tue Feb 21, 2023 11:25 am, edited 1 time in total.

jhutson
Posts: 3
Joined: Thu Jan 12, 2023 1:08 pm

Re: Proj 2 - 3D Visualization

Post by jhutson » Tue Feb 21, 2023 9:43 am

*Updated with revisions Mar 9 -- Latest Version titles "project2_final"*
Latest version includes data for all available years and has improvements on labels available when mouse hovers over a data point.
Python script attached which was used to process the data.

For my second project, I wanted to continue with my question from project 1 of if overall happiness trends could be determined from the titles checked out each day, but over a longer span of time. To accomplish this, I created grid layers for each year between 2006-2016, organized by month and day. Each day was assigned a height value (y direction) according to their calculated happiness level. I liked this visually, but found the data somewhat difficult to read. As a result, I added interaction modes to focus on specific years and turn off others as needed.

Here is my presentation for Tuesday 2/21/23: https://docs.google.com/presentation/d/ ... sp=sharing

I've attached my processing code to the post, which includes the CSV used which stores happiness scores per day. I am not attaching my raw SQL query output because the amount of data is too large (every checkout for 16 years).
Attachments
gethappy.py.zip
(1.79 KiB) Downloaded 41 times
project2_final.zip
(66 KiB) Downloaded 42 times
assignment2_sketch2.zip
(34.2 KiB) Downloaded 47 times
Last edited by jhutson on Thu Mar 09, 2023 1:42 pm, edited 1 time in total.

qinghuang
Posts: 5
Joined: Thu Jan 12, 2023 1:09 pm

Re: Proj 2 - 3D Visualization

Post by qinghuang » Thu Feb 23, 2023 2:00 pm

This project intends to examine whether the development history of social media and artificial intelligence are aligned with check-out book records in the Seattle library. Both social media and artificial intelligence are emerging technologies that have become known to the public and led to some heated discussions.

By visualizing these two concept-related books' check-out records together within a 3D model, we can gain insights into how the public gets to learn about new technologies through borrowing book from the library (time, date, itemNumber).
Attachments
assignment2.zip
(165.42 KiB) Downloaded 53 times
MAT-Assignment2.pptx
(1.6 MiB) Downloaded 36 times

Post Reply