Proj 3: 2D Reorderable Matrix

glegrady
Posts: 203
Joined: Wed Sep 22, 2010 12:26 pm

Proj 3: 2D Reorderable Matrix

Post by glegrady » Mon Jan 05, 2015 3:44 pm

The assignment is to re-organize the cells in your 2D Matrix assignment according to another order and output the newly ordered data into a 2D matrix to compare the two 2D matrices. Successful completion of this project should include a re-order that classifies your data in a different way, have clear design functions, possibly include interactivity to hide labels and values to be called up as needed.

Your original 2D matrix may use an ordinal system such as sequences of days, weeks, or sequences of Dewey categories resulting in a distributed set of values for each cell. The demo introduces the "Bubble Sort" as a way to re-order the values of your data, so that cells are now re-ordered based on their value, rather then the imposed ordinal sequences of the x, y location values.

Assignment is due on February 5, 2015.

Advanced versions of this project can explore other forms such as a sphere, or else a treemap, or else use an algorithm that specially organizes data such as the Kohonen Self-Organizing Map Algorithm as presented in the class.
George Legrady
legrady@mat.ucsb.edu

nataly_moreno
Posts: 5
Joined: Sat Jan 10, 2015 11:31 am

Re: Proj 3: 2D Reorderable Matrix

Post by nataly_moreno » Sun Feb 01, 2015 9:18 pm

The code allows the user to re-order the data in the matrix in different ways. Data can be ordered from least to most checkouts (top to bottom) per row, by individual month columns from least to most (left to right), and by annual column from least to most (left to right). Additionally, the labels re-organize as needed, or disappear if they are irrelevant.

Order by time = press o (for original ordering)
Order by row = press r
Order by column = press c
Order by row and column = press b (for both)
Order by column using the year = press g (for grouped months in the year)
Order by column and row using the annual grouping = press G
Change the color scheme = press the space bar

Pressing the space bar results in a different color scheme. There are 6 different color schemes.

The CSV file I used, is the same one from the last assignment. I have also updated the last assignment with a set of revised color schemes which can be viewed in my last assignment's post.

Ordered by Row:
byRow.png
Ordered by Column:
byColumn.png
Ordered by Row and Columns Grouped by Year:
RowColumnGrouped.png
Ordered by Columns that are Grouped by Year:
GroupedColumn.png

Code: Select all

///////////////////////////////////////////////////////////////////////////////////////////
// MAT 259 Assignment 2: Reorderable Matrix
// "Header" File / Global File
// by Nataly Moreno
///////////////////////////////////////////////////////////////////////////////////////////

int [][] dataMatrix   = null;
int [][] drawMatrix   = null;
int [][] chunkyMatrix = null;

int YEARS   = 9;
int numRows = 15;           //7 books and 8 movies
int numColumns = 108;       //2004-2013: 9 years * 12 months

//Fun Fonts for me :D
PFont funFont1 = createFont("Courier", 14, true);
PFont funFont2 = createFont("Chalkboard", 24, true);
PFont funFont3 = createFont("Apple Chancery", 24, true);

//Other Fonts
PFont font1    = createFont("Arial", 12, true);     
PFont font2    = createFont("Helvetica", 18, true); 

int removeColumnLabels = 0;

String[] origLabels = {"Book 1", "Film 1", "Book 2", "Film 2", "Book 3", "Film 3",
                       "Book 4", "Film 4", "Book 5", "Film 5", "Book 6", "Film 6",
                       "Book 7", "Film 7", "Film 8"};
                   
String[] labels = {"Book 1", "Film 1", "Book 2", "Film 2", "Book 3", "Film 3",
                   "Book 4", "Film 4", "Book 5", "Film 5", "Book 6", "Film 6",
                   "Book 7", "Film 7", "Film 8"};

String[] origYearL = {"2005", "2006", "2007", "2008", "2009", "2010", "2011",
                      "2012", "2013"};  
                  
String[] yearL = {"2005", "2006", "2007", "2008", "2009", "2010", "2011",
                  "2012", "2013"};   
                  
Table myTable;
int maxCheckOuts = -1;

int cellWidth  = 9;
int cellHeight = 18;
int rowMargin  = 100;
int colMargin  = 100;

int barPosX   = 675;
int barPosY   = 450;
int barLength = 400;
int barHeight = 30;
int barColor  = -1;

int colorTheme = 0;
int colorMode[]         = {HSB, HSB, HSB, HSB, HSB, HSB};

color backgroundColor[] = {color(0),
                           color(0),
                           color(0),
                           color(0),
                           color(114, 114, 114, 100),
                           color(0)
                          };
                          
color cellBackground[]  = {color(128),
                           color(128),
                           color(128),
                           color(128),
                           color(128),
                           color(128)
                          };
  
color cellOutline[]     = {color(255, 153, 255, 100),  //scheme 0
                           color(180, 153, 255, 100),  //scheme 1
                           color(180, 150, 255, 100),  //scheme 2 
                           color(180, 150, 255, 100),
                           color(180, 150, 255, 100),
                           color(180, 150, 255, 100)
                          };
                           
color dataCells[]       = {color(180, 155, 255),       //scheme 0
                           color(180, 150, 255, 100),  //scheme 1
                           color(255, 150, 50),        //scheme 2
                           color(255, 150, 50),
                           color(170),
                           color(178, 255, 102)
                          };

color lineSeparator[]   = {color(30, 144, 255, 100),   //scheme 0
                           color(100, 255, 100, 100),  //scheme 1
                           color(255, 150, 50, 100),   //scheme 2
                           color(255, 150, 50, 100),
                           color(255, 150, 50, 100),
                           color(255, 235, 0, 100)
                          };
                           
color colorBarOutline[] = {color(30, 144, 255,200),    //scheme 0
                           color(180, 155, 255, 100),  //scheme 1
                           color(255, 150, 50, 100),   //scheme 2
                           color(255, 150, 50, 100),
                           color(255, 150, 50, 100),
                           color(255, 150, 50, 100)
                          };
                           
color colorLabel[]      = {color(30, 144, 255),        //scheme 0
                           color(100, 255, 100, 100),  //scheme 1
                           color(255, 150, 50),        //scheme 2
                           color(255, 150, 50),
                           color(0),
                           color(255, 220, 0)
                          };
                           
color outlineBorder[]   = {color(30, 144, 255, 130),   //scheme 0
                           color(200, 255, 100, 100),  //scheme 1
                           color(255, 150, 50, 130),   //scheme 2
                           color(255, 150, 50, 130),
                           color(0),
                           color(255, 255, 0, 130)
                          };
                           
int barDiv[] = {100, 100, 100, 100, 100, 100};

///////////////////////////////////////////////////////////////////////////////////////////
// MAT 259 Assignment 2: Reorderable Matrix
// Setup Function with different sorting methods
// by Nataly Moreno
///////////////////////////////////////////////////////////////////////////////////////////

int [] sumRows            = new int[numRows];
int [] trackRowChanges    = new int[numRows];

int [] sumColumns         = new int[numColumns];
int [] trackColumnChanges = new int[numColumns];

//the row stays the same for the chunky matrix
int [] sumChunkColumns    = new int[YEARS];
int [] trackChunkChanges  = new int[YEARS];

void setup()
{
  size(1190, 560);
  background(255);
  smooth();
  println("SetUp Done!");
  myTable = loadTable("XcelCombined.csv", "header");
  
  println("Rows: " + numRows);
  println("Columns: " + numColumns);
  
  dataMatrix    = new int[numRows][numColumns];
  drawMatrix    = new int[numRows][numColumns];
  chunkyMatrix  = new int[numRows][YEARS];
  
  int k = 0; //row
  int m = 0; //column
  
  //This ordering is by year and month, the way it is in the CSV file
  for(int i = 0; i < myTable.getRowCount(); i++)
  {
    for(int j = 2; j < myTable.getColumnCount(); j++)
    {   
      maxCheckOuts = max(myTable.getInt(i,j), maxCheckOuts);   
      dataMatrix[k][m] = myTable.getInt(i,j);
      drawMatrix[k][m] = myTable.getInt(i,j);
      k++;
      
      if(k == 15)
      {
        k = 0;
        m++;
      }
    }
  }
  
  //This makes the chunky matrix the way it is in the CSV file
  for(int i = 0; i < numRows; i++)
    for(int j = 0; j < YEARS; j++)
      chunkyMatrix[i][j] = 0;                   //clear the matrix
  
  //this is a sum of the column chunk itself
  //this treats a year as a column
  k = 0;
  m = 0;
  
  for(int i = 0; i < numRows; i++)
  {
    for(int j = 0; j < YEARS; j++)
    {
      for(int v = 0; v < 12; v++)
        chunkyMatrix[k][j] += dataMatrix[i][(j * 12) + v];
    }
    k++;
  }  
  
///////////////////////////////////////////////////////////////////////////////////////////
//Bubble Sort: Rows
//One iteration of bubble sort can not promise full sorting
//therefore, a while loop keeps the iterations going until 
//it is fully sorted.
///////////////////////////////////////////////////////////////////////////////////////////

  for(int i = 0; i < numRows; i++)
  {
    sumRows[i] = 0;         //initialize array to zero
    trackRowChanges[i] = i; //initialize array to i
    
    for(int j = 0; j < numColumns; j++) //add values in the same row
      sumRows[i] += dataMatrix[i][j];
  }
    
  //Reorder the Matrix by Rows
  int ordered = 0;     //0 = false, 1 = true
  
  while(ordered == 0)
  {
    ordered = 1;
    for(int i = 0; i < numRows - 1; i++)
    {   
      if(sumRows[trackRowChanges[i]] > sumRows[trackRowChanges[i + 1]])
      {      
        //track the change for it to be ordered
        int temp               = trackRowChanges[i];
        trackRowChanges[i]     = trackRowChanges[i + 1];
        trackRowChanges[i + 1] = temp;
        ordered = 0; //if it came here, it is not ordered
      }
    }
  }  //end when it is ordered
 
///////////////////////////////////////////////////////////////////////////////////////////
//Bubble Sort: Columns
///////////////////////////////////////////////////////////////////////////////////////////

  for(int i = 0; i < numColumns; i++)
  {
    sumColumns[i] = 0;
    trackColumnChanges[i] = i;
    
    for(int j = 0; j < numRows; j++)
      sumColumns[i] += dataMatrix[j][i];
    
  }
  
  ordered = 0;
  while(ordered == 0)
  {
    ordered = 1;
    for(int i = 0; i < numColumns - 1; i++)
    {
      if(sumColumns[trackColumnChanges[i]] > sumColumns[trackColumnChanges[i + 1]])
      {
        //track the order change - that is all that is needed
        int temp                  = trackColumnChanges[i];
        trackColumnChanges[i]     = trackColumnChanges[i + 1];
        trackColumnChanges[i + 1] = temp;
        ordered = 0; //it is not ordered if the code gets here
      }
    }
  }  //end when it is ordered
  
///////////////////////////////////////////////////////////////////////////////////////////
//Bubble Sort: Years (Column Chunks)
///////////////////////////////////////////////////////////////////////////////////////////
  
  for(int i = 0; i < YEARS; i++)
  {
    sumChunkColumns[i]   = 0;
    trackChunkChanges[i] = i;
    
    for(int j = 0; j < numRows; j++)
      sumChunkColumns[i] += chunkyMatrix[j][i];
    
  }
  
  ordered = 0;
  while(ordered == 0)
  {
    ordered = 1;
    for(int i = 0; i < YEARS - 1; i++)
    {
      if(sumChunkColumns[trackChunkChanges[i]] > sumChunkColumns[trackChunkChanges[i + 1]])
      {
        int temp                 = trackChunkChanges[i];
        trackChunkChanges[i]     = trackChunkChanges[i + 1];
        trackChunkChanges[i + 1] = temp;
        ordered = 0; //it is not ordered if the code gets here
      }
    }
  }  //end when it is ordered

} //end setup

///////////////////////////////////////////////////////////////////////////////////////////
// MAT 259 Assignment 2: Reorderable Matrix
// Helper Functions
// by Nataly Moreno
///////////////////////////////////////////////////////////////////////////////////////////

void cellColor(int i, int j)
{
  switch(colorTheme)
  {
    case 0:
      fill(red(dataCells[colorTheme]), green(dataCells[colorTheme]), drawMatrix[j][i]);
      break;
    case 1:
      if(drawMatrix[j][i] != 0)
      {
        fill(  red(dataCells[colorTheme]) * drawMatrix[j][i] / maxCheckOuts, 
             green(dataCells[colorTheme]),
              blue(dataCells[colorTheme]) * drawMatrix[j][i] / maxCheckOuts);
      }
      else
      {
        fill(0, 0, 0);
      }
      break;
    case 2:
      if(drawMatrix[j][i] != 0)
      {
        fill(       hue(dataCells[colorTheme]) * drawMatrix[j][i] / maxCheckOuts, 
             saturation(dataCells[colorTheme]),
             brightness(dataCells[colorTheme]) * drawMatrix[j][i] / maxCheckOuts);
      }
      else
      {
        fill(0, 0, 0);
      }
      break;
    case 3:
      if(drawMatrix[j][i] != 0)
      {
        fill(  red(dataCells[colorTheme]) * drawMatrix[j][i] / maxCheckOuts, 
             green(dataCells[colorTheme]),
              blue(dataCells[colorTheme]) * 4);
      }
      else
        fill(0);
      break;
    case 4:
      if(drawMatrix[j][i] != 0)
      {
        fill(red(dataCells[colorTheme]) * drawMatrix[j][i] / maxCheckOuts);
      }
      else
        fill(0);
      break;
    case 5:
      if((j < 13) && (j % 2 == 0))
      {
        if(drawMatrix[j][i] != 0)
        {
          fill(       hue(dataCells[colorTheme]) - 30, 
               saturation(dataCells[colorTheme]) + 70,
               brightness(dataCells[colorTheme]) * dataMatrix[j][i] / maxCheckOuts);
        }
        else
          fill(0);
      }
      else
      {
        if(drawMatrix[j][i] != 0)
        {
          fill(       hue(dataCells[colorTheme]), 
               saturation(dataCells[colorTheme]) + 30,
               brightness(dataCells[colorTheme]) * drawMatrix[j][i] / maxCheckOuts);
        }
        else
          fill(0);
      }
      break;
    default:
      break;
  }
}

void colorBarFill(int i)
{
  switch(colorTheme)
  {
    case 0:
      fill( red(dataCells[colorTheme]), green(dataCells[colorTheme]), 
           blue(dataCells[colorTheme]) * i / barDiv[colorTheme]);
      break;
    case 1:
      fill(  red(dataCells[colorTheme]) * i / barDiv[colorTheme], 
           green(dataCells[colorTheme]),
            blue(dataCells[colorTheme]) * i / barDiv[colorTheme]);
      break;
    case 2:
      fill(       hue(dataCells[colorTheme]) * i / barDiv[colorTheme], 
           saturation(dataCells[colorTheme]),
           brightness(dataCells[colorTheme]) * i / barDiv[colorTheme]);
      break;
    case 3:
      fill(  red(dataCells[colorTheme]) * i / barDiv[colorTheme], 
           green(dataCells[colorTheme]),
            blue(dataCells[colorTheme]) * 4);
      break;
    case 4:
      fill(  red(dataCells[colorTheme]) * i / barDiv[colorTheme]);
      break;
    case 5:
      if(barColor == 0) //it's a book
      {
        fill(       hue(dataCells[colorTheme]) - 30, 
             saturation(dataCells[colorTheme]) + 70,
             brightness(dataCells[colorTheme]) * i / barDiv[colorTheme]);
      }
      else // it's a film
      {
        fill(       hue(dataCells[colorTheme]), 
             saturation(dataCells[colorTheme]) + 30,
             brightness(dataCells[colorTheme]) * i / barDiv[colorTheme]);
      }
      break;
    default:
      break;
  }
}

///////////////////////////////////////////////////////////////////////////////////////////
// MAT 259 Assignment 2: Reorderable Matrix
// Draw Function
// by Nataly Moreno
///////////////////////////////////////////////////////////////////////////////////////////

void draw()
{
  colorMode(RGB);
  background(255);
  
   //Background Over-Color
  fill(backgroundColor[colorTheme]);
  rect(0, 0, width, height);

  //Background for Cells
  fill(cellBackground[colorTheme]);
  rect(rowMargin, colMargin, cellWidth * numColumns, cellHeight * numRows);
  
  
  //Data Cells
  for(int i = 0, k = 0; i < numColumns; i++, k++)
  {
    for(int j = 0; j < numRows; j++)
    {
      colorMode(RGB);
      stroke(cellOutline[colorTheme]);
      strokeWeight(0.014);
      
      colorMode(colorMode[colorTheme]);
      cellColor(i,j);      
      colorMode(RGB);
      rect(rowMargin + k * cellWidth, colMargin + j * cellHeight, cellWidth, cellHeight);
    }
  }

  //Line Annual Separators
  if(removeColumnLabels == 0)
  {
    stroke(lineSeparator[colorTheme]);
    fill(colorLabel[colorTheme]);
    for(int i = 0, k = 0; i < numColumns; i++, k++)
    {
      strokeWeight(1);
    
      if(k == 0)
        line(rowMargin + (k * cellWidth), 
        colMargin + numRows * cellHeight, 
        rowMargin + (k * cellWidth), 
        colMargin + numRows * cellHeight + 15);
      
      if((k + 1) % 12 == 0)
        line(rowMargin + ( (k + 1) * cellWidth), 
        colMargin + numRows * cellHeight, 
        rowMargin + ( (k + 1) * cellWidth), 
        colMargin + numRows * cellHeight + 15);
    }
    
    //Column Labels
    textAlign(RIGHT, CENTER);
                    
    for(int i = 1; i <= numColumns; i++)
    {
      if(i % 12 == 0 ) //12 months
      {
        text(yearL[i / 12 - 1],
        rowMargin - (cellWidth / 2) + (i * cellWidth) - (cellWidth * 3.5),
        height - 1.8 * colMargin);
      }
    }
  }

  //Row Labels
  fill(colorLabel[colorTheme]);  
  textAlign(CENTER, CENTER);
  textFont(font1);  

  for(int i = 0; i < 1500; i += 100)
    text(labels[i/100], 
    rowMargin * 0.7, 
    colMargin + cellHeight / 2 + i / 100 * cellHeight);
 

  //Title
  fill(colorLabel[colorTheme]);
  textAlign(CENTER, CENTER);
  textFont(font2);
  text("Harry Potter Book and Movie Checkouts", width / 2, height * 0.14);
  
  //Outline Border for Cells
  stroke(outlineBorder[colorTheme]);
  strokeWeight(0.5);
  noFill();
  rect(rowMargin, colMargin, cellWidth * numColumns, cellHeight * numRows);
  
  //Color Bar Filling
  if(colorTheme < 5)
  {
    noStroke();
    for(int i = 0; i < barDiv[colorTheme]; i+=1)
    {
      colorMode(colorMode[colorTheme]);
      colorBarFill(i);
      rect(barPosX + (i * (barLength / barDiv[colorTheme])), barPosY, 
           barLength / barDiv[colorTheme], barHeight);
    }
  }
  else //Fill the two color bars
  {
    noStroke();
    for(int i = 0; i < barDiv[colorTheme]; i+=1)
    {
      colorMode(colorMode[colorTheme]);
      
      barColor = 0;
      colorBarFill(i);      
      rect(barPosX + (i * (barLength / barDiv[colorTheme])), barPosY, 
           barLength / barDiv[colorTheme], barHeight / 2);
           
      barColor = 1;
      colorBarFill(i);
      rect(barPosX + (i * (barLength / barDiv[colorTheme])), barPosY + 30, 
           barLength / barDiv[colorTheme], barHeight / 2);
    }
  }
  
  //Color Bar Outline
  if(colorTheme < 5)
  {
    noFill();
    colorMode(RGB);
    stroke(colorBarOutline[colorTheme]);
    strokeWeight(0.4);
    rect(barPosX, barPosY, barLength, barHeight);
  }
  else //This is for the double bar
  {
    noFill();
    colorMode(RGB);
    stroke(colorBarOutline[colorTheme]);
    strokeWeight(0.4);
    rect(barPosX, barPosY, barLength, barHeight / 2);
    rect(barPosX, barPosY + 30, barLength, barHeight / 2);
  }
  
  //Color Bar Label
  if(colorTheme < 5)
  {
    fill(colorLabel[colorTheme]);
    textAlign(CENTER, CENTER);
    textFont(font1);
    text("Least checkouts", barPosX, barPosY + 45);
    text("Most checkouts", barPosX + barLength, barPosY + 45);
  }
  else //This is for the double bar
  {
    fill(colorLabel[colorTheme]);
    textAlign(CENTER, CENTER);
    textFont(font1);
    text("Least checkouts", barPosX + 45, barPosY + 65);
    text("Most checkouts", barPosX + barLength - 40, barPosY + 65);
    
    text("Books", barPosX - 25, barPosY + 5);
    text("Films", barPosX - 25, barPosY + 35);
  }
}

///////////////////////////////////////////////////////////////////////////////////////////
// MAT 259 Assignment 2: Reorderable Matrix
// Key Pressed Function 
// by Nataly Moreno
///////////////////////////////////////////////////////////////////////////////////////////

void keyPressed()
{
  if(key == ' ')
    colorTheme = (colorTheme + 1) % 6;

  //original ordering
  if(key == 'o')
  {
    removeColumnLabels = 0;
    for(int i = 0; i < YEARS; i++)
      yearL[i] = origYearL[i];

    for(int i = 0; i < numRows; i++)
    {
      labels[i] = origLabels[i];
      
      for(int j = 0; j < numColumns; j++)
        drawMatrix[i][j] = dataMatrix[i][j];
      
    }
  }
  
  //order by row
  if(key == 'r')
  {
    removeColumnLabels = 0;
    for(int i = 0; i < YEARS; i++)
      yearL[i] = origYearL[i];
    
    for(int i = 0; i < numRows; i++)
    {
      labels[i] = origLabels[trackRowChanges[i]];
      
      for(int j = 0; j < numColumns; j++)
        drawMatrix[i][j] = dataMatrix[trackRowChanges[i]][j]; 
      
    }       
  }
  
  //order by column
  if(key == 'c')
  {
    removeColumnLabels = 1;
    
    for(int i = 0; i < numRows; i++)
    {
      labels[i] = origLabels[i];
      
      for(int j = 0; j < numColumns; j++)
        drawMatrix[i][j] = dataMatrix[i][trackColumnChanges[j]];
      
    }
  }
  
  //both: order by row and column
  if(key == 'b')
  {
    int [][] rowMatrix = null;
    rowMatrix = new int[numRows][numColumns];
    
    removeColumnLabels = 1;
    
    //order by row
    for(int i = 0; i < numRows; i++)
    {
      labels[i] = origLabels[trackRowChanges[i]];
      
      for(int j = 0; j < numColumns; j++)
        rowMatrix[i][j] = dataMatrix[trackRowChanges[i]][j]; //note difference here
      
    }
    
    //order by column
    for(int i = 0; i < numRows; i++)
      for(int j = 0; j < numColumns; j++)
        drawMatrix[i][j] = rowMatrix[i][trackColumnChanges[j]];
  }
  
  //grouped: columns grouped by year (order by column)
  if(key == 'g')
  {
    removeColumnLabels = 0;
    
    for(int i = 0; i < numRows; i++)
    {
      labels[i] = origLabels[i];

      for(int j = 0; j < YEARS; j++)
      {
        yearL[j] = origYearL[trackChunkChanges[j]];

        for(int v = 0; v < 12; v++)
          drawMatrix[i][(j * 12) + v] = dataMatrix[i][(trackChunkChanges[j] * 12) + v];
      }
    }   
  }
  
  //grouped: columns grouped by year (ordered by both rows and columns)
  if(key == 'G')
  {
    int [][] tempMatrix = null;
    tempMatrix = new int[numRows][numColumns];
    
    removeColumnLabels = 0;
    
    //order by chunky columns
    for(int i = 0; i < numRows; i++)
    {
      labels[i] = origLabels[i];

      for(int j = 0; j < YEARS; j++)
      {
        yearL[j] = origYearL[trackChunkChanges[j]];

        for(int v = 0; v < 12; v++)
          tempMatrix[i][(j * 12) + v] = dataMatrix[i][(trackChunkChanges[j] * 12) + v];
      }
    } 
    
    //order by rows
    for(int i = 0; i < numRows; i++)
    {
      labels[i] = origLabels[trackRowChanges[i]];
      
      for(int j = 0; j < numColumns; j++)
        drawMatrix[i][j] = tempMatrix[trackRowChanges[i]][j]; 
    }
    
  }

} //end key pressed

///////////////////////////////////////////////////////////////////////////////////////////
// MAT 259 Assignment 2: Reorderable Matrix
// Print Functions for Debugging 
// by Nataly Moreno
///////////////////////////////////////////////////////////////////////////////////////////

void printDataMatrix()
{
  for(int i = 0; i < numRows; i++)
  {
    for(int j = 0; j < numColumns; j++)
    {
      print(dataMatrix[i][j] + " ");
    }
    println("\n");
  }
}

void printChunkyMatrix()
{
  println("\nChunky Matrix:");
  for(int i = 0; i < numRows; i++)
  {
    for(int j = 0; j < YEARS; j++)
    {
      print(chunkyMatrix[i][j] + " ");
    }
    print("\n");
  }
}

void printChunkyColumns()
{
  for(int i = 0; i < YEARS; i++)
    print(sumChunkColumns[i] + " ");
  print("\n");
}

void printChunkyOrderedColumns()
{
  for(int i = 0; i < YEARS; i++)
    print(sumChunkColumns[trackChunkChanges[i]] + " ");
  print("\n");
}

void printRowSumOriginalOrder()
{
  for(int i = 0; i < numRows; i++)
    println("sum: " + sumRows[i] + " ");
}

void printOrderedByRow()
{
  for(int i = 0; i < numRows; i++)
    println("sum: " + sumRows[trackRowChanges[i]] + " ");
}

void printColumnSumOriginalOrder()
{
  for(int i = 0; i < numColumns; i++)
    println("sum: " + sumColumns[i] + " ");
}

void printOrderedByColumn()
{
  for(int i = 0; i < numColumns; i++)
    println("sum: " + sumColumns[trackColumnChanges[i]] + " ");
}  

Since it is not as visually obvious to see which book or movie was checked out the most from 2004 - 2014, I made a different visualization. The radius of the circle represents the number of checkouts, bigger circles mean more checkouts.
Circles.png

Code: Select all


int [][] dataMatrix = null;

PFont font1    = createFont("Arial", 12, true);     
PFont font2    = createFont("Helvetica", 18, true); 
PFont font3    = createFont("Helvetica", 28, true); 


int[] xPosition = {80, 530, 80, 450, 350, 720, 
                   520, 230, 680, 470, 234, 113, 
                   330, 774, 314};
                  
int[] yPosition = {90, 380, 700, 550, 720, 360, 
                   100, 560, 190, 150, 170, 350, 
                   350, 74, 47};
                  
int[] radius = {4255, 5448, 3862, 5241, 3671, 5839, 3851, 
                7442, 4367, 8258, 5938, 6740, 6351, 4314, 2817 };

String[] labels = {"book1", "movie1", "book2", "movie2", "book3", "movie3", 
                   "book4", "movie4", "book5", "movie5", "book6", "movie6", 
                   "book7", "movie7", "movie8" };
                   
int[] red   = {255, 255, 0, 255, 255, 153,  //0-5
               0, 255, 0, 255, 101, 0,      //6-11
               231, 0, 0};                  //12-14
int[] green = {85, 102, 153, 102, 213, 0,
               0, 128, 204, 223, 55, 255,
               0, 128, 204};
int[] blue  = {0, 255, 153, 102, 0, 153,
               0, 0, 204, 6, 253, 162,
               100, 255, 0};

void setup()
{
  size(850, 800);
  background(255);
  smooth();
  println("SetUp Done!");
}

void draw()
{
  background(255);
  stroke(100, 0, 0, 100);
  strokeWeight(0.2);
  colorMode(RGB);

  fill(68, 167, 255, 150);  
  rect(0, 0, width, height);

  for(int i = 0; i < 15; i++)
  {
    fill(red[i], green[i], blue[i], ((float)radius[i] / 8258.0) * 255.0);
    ellipse(xPosition[i], yPosition[i], (float)radius[i]/30.0, radius[i]/30.0); 
    textFont(font1);
    textAlign(CENTER, CENTER);
    fill(0,0,0);
    text(labels[i], xPosition[i], yPosition[i]);
  }
  
  textFont(font3);
  text("Harry Potter Checkouts\nSeattle Public\nLibrary\n2004 - 2014", 680, 690);
}
Attachments
ReorderableMatrix.zip
All Files Used
(12.15 KiB) Downloaded 292 times
XcelCombined.csv
CSV File
(5.4 KiB) Downloaded 313 times
Last edited by nataly_moreno on Tue Feb 03, 2015 10:23 am, edited 2 times in total.

a.lazareva
Posts: 5
Joined: Sat Jan 10, 2015 11:29 am

Re: Proj 3: 2D Reorderable Matrix

Post by a.lazareva » Mon Feb 02, 2015 10:31 am

I used an aggregated version of my 'co-occurrence' dataset from the previous project to create an interactive visualization that presents the data in a different way. The data was selected with the following query.

Code: Select all

select 
    floor(t1.deweyClass/100)*100 as dewey1,
    floor(t2.deweyClass/100)*100 as dewey2
from
    spl2.inraw as t1,
    spl2.inraw as t2
where
    t1.cout = t2.cout and t1.cin = t2.cin
        and t1.itemNumber != t2.itemNumber
        and t1.deweyClass != ''
        and t2.deweyClass != ''
	    and floor(t1.deweyClass) != 741
        and floor(t2.deweyClass) != 741
		and t1.itemtype = 'acbk'
        and t2.itemtype = 'acbk'
        and year(t1.cout) > 2010;
The visualization is a 'spider diagram' that shows how frequently books were checked out with books within other subject areas. The legend also shows the total number of books that were checked out within each category as well as what percentage were checked out together with books from the same category vs. other categories.

Interactivity: the spider diagram series can be toggled on and off using the legend circles. The series can be also sorted by category by using the circles outside the diagram grid.
mockup_1.jpg
Initial Screen
mockup_2.jpg
Some categories turned off
mockup_3.jpg
Sorted on computer science
A_Lazareva_HW3.zip
Processing files
(1.01 MiB) Downloaded 309 times

intae
Posts: 19
Joined: Tue Oct 14, 2014 10:56 am

Re: Proj 3: 2D Reorderable Matrix

Post by intae » Mon Feb 02, 2015 4:54 pm

Based on last CSV file, I rearranged the checkout number of each categories "Comic book entire", "American comic book", "Japanese comic book", and "Harry Potter"related books. The goal of this assignment was manipulate the arrangement to find out some kinds of relationship between number of book check out to weather in Seattle. There are three buttons in the rendering. I put the average high temperature and average precipitation in Seattle of the last severals decades. I was able to find it there was increasing when the temperature was high and precipitation was low.
The color is matching with each month's temperature and precipitation. You can see that during winter period, there were decreasing of check outs. I would said that this indicate that people like to go to library when the weather is nice.
I also need to do more invention the button and slide to show the exact connection between different integers.

Code: Select all

//MAT 259 Visualizing Information homework3  1 Feb 2015 Intae Hwang
//
//http://www.perbang.dk/rgbgradient//            color code
//http://www.sojamo.de/libraries/controlP5/      button control library    

import controlP5.*;
ControlP5 cp5;

int myColor = color(255);
int c1,c2;
float n,n1;

import processing.data.StringList;
import org.apache.tools.ant.types.resources.comparators.Date;

PFont myFont;
PFont myFont1;

int [][] dataMatrix = null;
String [][] dataMatrix1 = null;

int ballR = 400;

int maxCount;
int numRows, numColumns;
int xPosition = 20;
int yearcut = 12;
int ycut = 5;

int cellwidth = 8;
int cellheight = 13;

PFont font= createFont("Helvetica",16,true);
PFont font_1;
Table myTable;

int numMonth = 11;

boolean averHighOver = false;
boolean averPrecipOver = false;
boolean Number1 = true;

float angle = 0.03;   //rotation value
float Angle = 0.00;

float transX = 0.01;   //tranlsate value
float transY = 0.01;
float trans1 = 0.00;
float trans2 = 0.00;
int numRows1 = 0;

int year2 = 2006;

//////average high temperature from Jan to Dec in Seattle
float[] aveHigh = {46,50,53,58,64,70,75,76,70,60,51,46};
float maxHigh = max(aveHigh);
float minHigh = min(aveHigh);
int numcolormode1 = 11;

int[] colormode = {
#DBDB8F,#DBC783,#DBB377,#DB9F6B,#DC8C60,#DC7854,#DC6448
,#DC503C,#DD3D31,#DD2925,#DD1519,#DE020E};

//////average precipitation from Jan to Dec in Seattle
float[] avePrecip = {5.13,4.18,3.75,2.59,1.78,1.49,0.79,1.02,1.63,3.19,5.90,5.62};
float maxPrecip = max(avePrecip);
float minPrecip = min(avePrecip);

int[] colormode1 = {
#ADFFFF,#9DE8F2,#8DD2E5,#7DBBD9,#6EA5CC,#5E8EC0,#4E78B3
,#3E61A7,#2F4B9A,#1F348E,#0F1E81,#000875
};

void setup()
{
size(1340,1260);
smooth();
noStroke();

myFont =createFont("Helvetica", 38);
textFont(myFont);

myTable = new Table();
myTable = loadTable( "data06-13-3.csv", "header"); 
numRows = myTable.getRowCount();
numColumns = myTable.getColumnCount();

dataMatrix = new int[numRows][numColumns];

for (int i = 0; i < numRows; i ++)
{
  for ( int j = 0; j < numColumns; j ++)
  {
    dataMatrix[i][j] =  myTable.getInt(i,j);
  }
}

maxCount = dataMatrix[0][0];

for (int i = 0; i < numRows; i ++)
{
  for ( int j = 1; j < numColumns; j ++)
  {
    if (dataMatrix[i][j] > maxCount)
     maxCount = dataMatrix[i][j];
  }
 }
 
//////////////////button and slide/////////////////


cp5 = new ControlP5(this);
  translate(width/2,400);{
 
 
  cp5.addSlider("Month")
     .setPosition(80,45)
     .setSize(800,20)
     .setRange(1,96)
     .setValue(1)  
     ; 
     
  cp5.addSlider("ANGLE")
     .setPosition(80,70)
     .setSize(200,20)
     .setRange(0,200)
     .setValue(0)
     ;
     
  cp5.addSlider("transX")
     .setPosition(80,95)
     .setSize(200,20)
     .setRange(0,200)
     .setValue(0)
     ;
     
  cp5.addSlider("transY")
     .setPosition(80,120)
     .setSize(200,20)
     .setRange(0,200)
     .setValue(0)
     ; 
     
  cp5.addButton("Ave_Temp_High")
     .setValue(0)
     .setPosition(80,160)
     .setSize(200,19)
     ;
     
  cp5.addButton("Ave_Precip")
     .setValue(100)
     .setPosition(80,185)
     .setSize(200,19)
     ;
     
  cp5.addButton("Number")
     .setPosition(80,210)
     .setSize(200,19)
     .setValue(0)
     ;
  }
}


public void controlEvent(ControlEvent theEvent) {  
  n = 0;
}

public void Ave_Temp_High() {
  averHighOver = true;
  averPrecipOver = false;
}

public void Ave_Precip() {
  averPrecipOver = true;
  averHighOver = false;
}

public void Number() { 
 Number1 = !Number1;
}
void draw()
{  
  background(104);

  pushMatrix(); 
  translate(width/2,400); 
       
       for(int q = 0; q < 12; q++){
        
        color x = colormode[q];
        fill(x);
        rect(400+q*20,-300,20,20);

        color z = colormode1[q];
        fill(z);
        rect(400+q*20,-350,20,20);       
        }
        
        
        
        
        
        
        textSize(15);
        textAlign(CENTER);
        fill(colormode[0]);
        text(minHigh,400,-307);
        fill(colormode[11]);
        text(maxHigh,640,-307);
        fill(colormode[0]);
        textAlign(LEFT);
        text("Temperature",310,-285);
        
        
        textSize(15);
        textAlign(CENTER);
        fill(colormode1[0]);
        text(minPrecip,400,-357);
        fill(colormode1[11]);
        text(maxPrecip,640,-357);
        fill(colormode1[0]);
        textAlign(LEFT);
        text("Precipitation",310,-335);
        
        textSize(35);
        text("Comicbook\nCheckout\n+\nWeather\n2006-\n2013",-600,000);
        
         //ellipse(dataMatrix[i][j]/80,dataMatrix[i][j]/280,dataMatrix[i][j]/ballR,dataMatrix[i][j]/ballR);
         //ellipse(dataMatrix[i][j]/80,dataMatrix[i][j]/280,dataMatrix[i][j]/ballR,dataMatrix[i][j]/ballR);
         ellipse(600,-200,41029/ballR,41029/ballR);
         fill(0);
         textAlign(CENTER,CENTER);
         textSize(15);
         text("41259",600,-130);
         
         fill(#000875);
         ellipse(420,-200,2825/ballR,2825/ballR);
         fill(0);
         textAlign(CENTER,CENTER);
         textSize(15);
         text("2825",420,-130);
         
         fill(#4E78B3);
         ellipse(495,-200,20093/ballR,20093/ballR);
         fill(0);
         textAlign(CENTER,CENTER);
         textSize(15);
         text("20093",495,-130);
         
         for(int z = 0; z < 9; z++){
         textSize(12);
         fill(#FFFFFF);
         text(year2+z,-590+z*100,-370);
         }     
        
        
        
for(int i = 0; i <numRows1; i++)
  {
    for(int j = 1; j <numColumns; j++)
    {       
      for(int p = 0; p <numMonth; p ++)
      { 
        
        
        colorMode(HSB,360,100,100);
        
        if(dataMatrix[i][0] == 1 && averHighOver == true){
          float High = map(aveHigh[0],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);
         } 
         
         else if(dataMatrix[i][0] == 2 && averHighOver == true){
          float High = map(aveHigh[1],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
        
       
         else if(dataMatrix[i][0] == 3 && averHighOver == true){
          float High = map(aveHigh[2],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
           
         else if(dataMatrix[i][0] == 4 && averHighOver == true){
          float High = map(aveHigh[3],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 5 && averHighOver == true){
          float High = map(aveHigh[4],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 6 && averHighOver == true){
          float High = map(aveHigh[5],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 7 && averHighOver == true){
          float High = map(aveHigh[6],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 8 && averHighOver == true){
          float High = map(aveHigh[7],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 9 && averHighOver == true){
          float High = map(aveHigh[8],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 10 && averHighOver == true){
          float High = map(aveHigh[9],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 11 && averHighOver == true){
          float High = map(aveHigh[10],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 12 && averHighOver == true){
          float High = map(aveHigh[11],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 1 && averPrecipOver == true){
          float High = map(avePrecip[0],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 2 && averPrecipOver == true){
          float High = map(avePrecip[1],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
          else if(dataMatrix[i][0] == 3 && averPrecipOver == true){
          float High = map(avePrecip[2],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 4 && averPrecipOver == true){
          float High = map(avePrecip[3],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 5 && averPrecipOver == true){
          float High = map(avePrecip[4],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 6 && averPrecipOver == true){
          float High = map(avePrecip[5],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
           else if(dataMatrix[i][0] == 7 && averPrecipOver == true){
          float High = map(avePrecip[6],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
          else if(dataMatrix[i][0] == 8 && averPrecipOver == true){
          float High = map(avePrecip[7],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 9 && averPrecipOver == true){
          float High = map(avePrecip[8],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 10 && averPrecipOver == true){
          float High = map(avePrecip[9],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 11 && averPrecipOver == true){
          float High = map(avePrecip[10],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 12 && averPrecipOver == true){
          float High = map(avePrecip[11],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
        
         //textSize(14);
         //textAlign(BOTTOM);
         //text(dataMatrix[i][j],dataMatrix[i][j]/80,dataMatrix[i][j]/280);
        
        ellipse(dataMatrix[i][j]/80,dataMatrix[i][j]/280,dataMatrix[i][j]/ballR,dataMatrix[i][j]/ballR);        
      } 
      translate(transX*trans1,transY*trans2);
      rotate(angle*Angle); 
      
      if(Number1 == true){
      textSize(14);
      textAlign(CENTER);
      fill(88);
      text(dataMatrix[i][j],dataMatrix[i][j]/80,dataMatrix[i][j]/280);
      }
    } 
  } 
  
  popMatrix();
  //save("hw3-7.jpg");
 
}

void ANGLE(float theColor) {
  Angle = theColor/200;
}

void transX(float theColor) { 
  trans1 = theColor*2;
}


void transY(float theColor) {
  trans2 = theColor*1;
}

void Month(int theColor){
 numRows1 = theColor;
}


hw3-6.jpg
Screen Shot 2015-02-01 at 12.42.27 AM.png
Screen Shot 2015-02-02 at 4.50.59 PM.png
datahomework1_3.zip
(720.37 KiB) Downloaded 312 times
I did more work after I got feedback from the class. I moved the legends to left and give more space for rotating bubbles, then minimize the span and size of the balls to make them fit into the chart, but it lost the variety at the same time.

I got the temperature information form the Seattle official website.
http://www.seattle.gov/living-in-seattl ... nd-records

Also , for the color pick, I visit this website.

http://www.perbang.dk/rgbgradient/

Code: Select all

/MAT 259 Visualizing Information homework3  1 Feb 2015 Intae Hwang
//
//http://www.perbang.dk/rgbgradient//            color code
//http://www.sojamo.de/libraries/controlP5/      button control library    

import controlP5.*;
ControlP5 cp5;

int myColor = color(255);
int c1,c2;
float n,n1;

import processing.data.StringList;
import org.apache.tools.ant.types.resources.comparators.Date;

PFont myFont;
PFont myFont1;

int [][] dataMatrix = null;
String [][] dataMatrix1 = null;

int ballR = 500;

int maxCount;
int numRows, numColumns;
int xPosition = 20;
int yearcut = 12;
int ycut = 5;

int cellwidth = 8;
int cellheight = 13;

PFont font= createFont("Helvetica",16,true);
PFont font_1;
Table myTable;

int numMonth = 11;

boolean averHighOver = false;
boolean averPrecipOver = false;
boolean Number1 = true;

float angle = 0.03;   //rotation value
float Angle = 0.00;

float transX = 0.01;   //tranlsate value
float transY = 0.01;
float trans1 = 0.00;
float trans2 = 0.00;
int numRows1 = 0;

int year2 = 2006;

void setup()
{
size(1440,1000);
smooth();
noStroke();

myFont =createFont("Helvetica", 38);
textFont(myFont);

myTable = new Table();
myTable = loadTable( "data06-13-3.csv", "header"); 
numRows = myTable.getRowCount();
numColumns = myTable.getColumnCount();

dataMatrix = new int[numRows][numColumns];

for (int i = 0; i < numRows; i ++)
{
  for ( int j = 0; j < numColumns; j ++)
  {
    dataMatrix[i][j] =  myTable.getInt(i,j);
  }
}

maxCount = dataMatrix[0][0];

for (int i = 0; i < numRows; i ++)
{
  for ( int j = 1; j < numColumns; j ++)
  {
    if (dataMatrix[i][j] > maxCount)
     maxCount = dataMatrix[i][j];
  }
 }
 
//////////////////button and slide/////////////////


cp5 = new ControlP5(this);
  translate(width/2,400);{
  
  cp5.addButton("Ave_Temp_High")
     .setValue(0)
     .setPosition(30,610)
     .setSize(200,19)
     ;
     
  cp5.addButton("Ave_Precip")
     .setValue(100)
     .setPosition(30,640)
     .setSize(200,19)
     ;
     
  cp5.addButton("Number")
     .setPosition(30,670)
     .setSize(200,19)
     .setValue(0)
     ;
     
  cp5.addSlider("ANGLE")
     .setPosition(30,700)
     .setSize(200,20)
     .setRange(0,200)
     .setValue(0)
     ;
     
  cp5.addSlider("transX")
     .setPosition(30,730)
     .setSize(200,20)
     .setRange(0,200)
     .setValue(0)
     ;
     
  cp5.addSlider("transY")
     .setPosition(30,760)
     .setSize(200,20)
     .setRange(0,200)
     .setValue(0)
     ; 
     
  cp5.addSlider("Month")
     .setPosition(30,790)
     .setSize(400,20)
     .setRange(1,96)
     .setValue(1)  
     ; 
     
  }
}


//////average high temperature from Jan to Dec in Seattle
float[] aveHigh = {46,50,53,58,64,70,75,76,70,60,51,46};
float maxHigh = max(aveHigh);
float minHigh = min(aveHigh);
int numcolormode1 = 11;

int[] colormode = {
#DBDB8F,#DBC783,#DBB377,#DB9F6B,#DC8C60,#DC7854,#DC6448
,#DC503C,#DD3D31,#DD2925,#DD1519,#DE020E};

//////average precipitation from Jan to Dec in Seattle
float[] avePrecip = {5.13,4.18,3.75,2.59,1.78,1.49,0.79,1.02,1.63,3.19,5.90,5.62};
float maxPrecip = max(avePrecip);
float minPrecip = min(avePrecip);

int[] colormode1 = {
#ADFFFF,#9DE8F2,#8DD2E5,#7DBBD9,#6EA5CC,#5E8EC0,#4E78B3
,#3E61A7,#2F4B9A,#1F348E,#0F1E81,#000875
};



public void controlEvent(ControlEvent theEvent) {  
  n = 0;
}

public void Ave_Temp_High() {
  averHighOver = true;
  averPrecipOver = false;
}

public void Ave_Precip() {
  averPrecipOver = true;
  averHighOver = false;
}

public void Number() { 
 Number1 = !Number1;
}

void draw()
{  
  background(232);
  pushMatrix(); 
  translate(width/2,400); 
  
       for(int q = 0; q < 12; q++){      
        color x = colormode[q];
        fill(x);
        rect(-690+q*17,-300,19,19);

        color z = colormode1[q];
        fill(z);
        rect(-690+q*17,-350,19,19);       
        }
        
        textSize(13);
        textAlign(CENTER);
        fill(colormode[0]);
        text(minHigh,-690,-307);
        fill(colormode[11]);
        text(maxHigh,-480,-307);
        fill(colormode[0]);
        textAlign(CENTER);
        text("Temperature",-585,-307);
               
        textSize(13);
        textAlign(CENTER);
        fill(colormode1[0]);
        text(minPrecip,-690,-357);
        fill(colormode1[11]);
        text(maxPrecip,-480,-357);
        fill(colormode1[0]);
        textAlign(CENTER);
        text("Precipitation",-585,-357);
        
        textSize(20);
        textAlign(LEFT);
        text("Comicbook\nCheckout\n+\nWeather\n2006-\n2013",
             -680,-20);
        
         ellipse(-650,-200,41029/ballR,41029/ballR);
         fill(0);
         textAlign(CENTER,CENTER);
         textSize(13);
         text("41029",-655,-130);
         
         fill(#4E78B3);
         ellipse(-560,-200,20093/ballR,20093/ballR);
         fill(0);
         textAlign(CENTER,CENTER);
         textSize(13);
         text("20093",-565,-130);
         
         fill(#000875);
         ellipse(-500,-200,2825/ballR,2825/ballR);
         fill(0);
         textAlign(CENTER,CENTER);
         textSize(13);
         text("2825",-500,-130);
               
         for(int z = 0; z < 9; z++){
         textSize(10);
         fill(#FFFFFF);
         text(year2+z,-690+z*50,420);
         }     
    pushMatrix();
    translate(200,0);
for(int i = 0; i <numRows1; i++)
  {
    for(int j = 1; j <numColumns; j++)
    {       
      for(int p = 0; p <numMonth; p ++)
      { 
         
        colorMode(HSB,360,100,100);
        
        if(dataMatrix[i][0] == 1 && averHighOver == true){
          float High = map(aveHigh[0],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);
         } 
         
         else if(dataMatrix[i][0] == 2 && averHighOver == true){
          float High = map(aveHigh[1],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
        
       
         else if(dataMatrix[i][0] == 3 && averHighOver == true){
          float High = map(aveHigh[2],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
           
         else if(dataMatrix[i][0] == 4 && averHighOver == true){
          float High = map(aveHigh[3],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 5 && averHighOver == true){
          float High = map(aveHigh[4],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 6 && averHighOver == true){
          float High = map(aveHigh[5],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 7 && averHighOver == true){
          float High = map(aveHigh[6],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 8 && averHighOver == true){
          float High = map(aveHigh[7],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 9 && averHighOver == true){
          float High = map(aveHigh[8],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 10 && averHighOver == true){
          float High = map(aveHigh[9],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 11 && averHighOver == true){
          float High = map(aveHigh[10],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 12 && averHighOver == true){
          float High = map(aveHigh[11],minHigh,maxHigh,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 1 && averPrecipOver == true){
          float High = map(avePrecip[0],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 2 && averPrecipOver == true){
          float High = map(avePrecip[1],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
          else if(dataMatrix[i][0] == 3 && averPrecipOver == true){
          float High = map(avePrecip[2],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 4 && averPrecipOver == true){
          float High = map(avePrecip[3],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 5 && averPrecipOver == true){
          float High = map(avePrecip[4],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 6 && averPrecipOver == true){
          float High = map(avePrecip[5],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
           else if(dataMatrix[i][0] == 7 && averPrecipOver == true){
          float High = map(avePrecip[6],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
          else if(dataMatrix[i][0] == 8 && averPrecipOver == true){
          float High = map(avePrecip[7],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 9 && averPrecipOver == true){
          float High = map(avePrecip[8],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 10 && averPrecipOver == true){
          float High = map(avePrecip[9],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 11 && averPrecipOver == true){
          float High = map(avePrecip[10],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
          
         else if(dataMatrix[i][0] == 12 && averPrecipOver == true){
          float High = map(avePrecip[11],minPrecip,maxPrecip,0,numcolormode1);
          float d = High;
          int c = round(d);
          color x = colormode1[c];       
          fill(x,33);}
        line(0,0,dataMatrix[i][j],dataMatrix[i][j]);
        ellipse(dataMatrix[i][j]/140+100,dataMatrix[i][j]/800,dataMatrix[i][j]/ballR,dataMatrix[i][j]/ballR);        
      } 
      translate(transX*trans1,transY*trans2);
      rotate(angle*Angle); 
      
      if(Number1 == true){
      textSize(14);
      textAlign(CENTER);
      fill(88);
      text(dataMatrix[i][j],dataMatrix[i][j]/140+100,dataMatrix[i][j]/800);
      }
    } 
  } 
  popMatrix();
  popMatrix();
  save("hw3-8.jpg");
  
}

void ANGLE(float theColor) {
  Angle = theColor/200;
}

void transX(float theColor) { 
  trans1 = theColor*2;
}


void transY(float theColor) {
  trans2 = theColor*1;
}

void Month(int theColor){
 numRows1 = theColor;
}
datahomework1_3.zip
(736.6 KiB) Downloaded 312 times
Attachments
Screen Shot 2015-02-04 at 10.28.27 PM.png
Last edited by intae on Wed Feb 04, 2015 10:41 pm, edited 2 times in total.

donghaoren
Posts: 5
Joined: Sat Jan 10, 2015 11:33 am

Re: Proj 3: 2D Reorderable Matrix

Post by donghaoren » Mon Feb 02, 2015 9:29 pm

Self-Organizing Map of Checkout Trends
screenshot.png
This project uses Self-Organizing Map and Restricted Boltzmann Machine to visualize temporal checkout trends of each 2nd-level Dewey class in the Seattle Library Dataset.

Explanation

The query extracts the number of checkouts for each Dewey category from 2010 to 2014 monthly. There are 100 Dewey classes and 60 months in total. Each category is represented by its number of checkouts for each month, which form a 60-dimensional vector. We have 100 such vectors, one for each category.

The visualization uses two methods: SOM and RBM+PCA to visualization the temporal trends among these categories. The main goal is to compare the two methods, and see if we can find something meaningful from the visualizations.

The SOM works by taking each Dewey category's trend as an training vector, and then run the SOM for each category to find the winning neuron where the category is drawn at.

The RBM+PCA takes a different approach, which it builds a model by concatenating a RBM and a PCA. Then uses the trends for the 100 categories as training vectors, and finally run the trained model to find the coordinates for each category.

The third view at the bottom is just the trends themselves. A simple hover-and-highlight interaction is implemented.

Note: data.csv is omitted, you can obtain it by running the query provided in "Reorderable Matrix.pdf"

Update

Added colors to the dewey classes, generated using a grid in the HCL colorspace, H = top-level, C = constant, L = second-level.
Attachments
Assignment_3.zip
(390.27 KiB) Downloaded 287 times
Reorderable Matrix.pdf
(45.15 KiB) Downloaded 309 times
Last edited by donghaoren on Wed Feb 04, 2015 11:11 am, edited 4 times in total.

kurtoon
Posts: 5
Joined: Sat Jan 10, 2015 11:28 am

Re: Proj 3: 2D Reorderable Matrix

Post by kurtoon » Tue Feb 03, 2015 2:07 am

Urban Agriculture in Seattle with Polar Area Diagram

For this assignment I used the same CSV data as my 2d matrix to create a polar area diagram of each month, with controls to change the date and turn on or off Dewey categories. Hovering over a section of the diagram reveals the number of items checked out that month at the center and also highlights the corresponding Dewey number. There is an option to toggle sorting the diagram clockwise by number of checkouts (on by default) or by Dewey number. Colors relate to the number of checkouts- brighter is more and darker is less. There is a secondary color scheme acting on the graph which tints the entire month according to how active it was compared to that year- more active months are tinted with bright, saturated blue/green while less activity is indicated by darker reds and oranges.

There are several things that I wish were finished, but due to time constraints they could not be fixed or included. The coloration is not correct when sorting is turned off- it brightens the lowest Dewey number instead of the highest checkout value. Some mouse detection errors are also present which affect the text highlighting. Finally, I wish I could do a secondary query of the top 5 or 10 most popular items of each category, revealing the list on the right side when the user hovers over that section.

Update:
I made some changes and updated the screenshots and .zip of the new code.

Changes include: adjusted highlight color, added a box around the Dewey class when hovering over section in graph, turned the "Sort" button into a toggle switch and added appropriate labels, and fixed the coloration issue when sorting the graph by Dewey number.

Screenshots:
rev2_pic01.jpg
The default view on launch: sorting by number of checkouts, all items selected, January 2006.
rev2_pic02.jpg
Date changed and various Dewey categories deselected
rev2_pic03.jpg
Sorting by dewey number and various Dewey categories deselected
rev2_pic04.jpg
Date selected to show color tint from relatively low activity for that month

Processing files:
Attachments
kaminski_hw2_reorderable_v2.zip
(932.42 KiB) Downloaded 234 times
Last edited by kurtoon on Thu Feb 05, 2015 8:54 pm, edited 1 time in total.

rodgerljl
Posts: 5
Joined: Sat Jan 10, 2015 11:29 am

Re: Proj 3: 2D Reorderable Matrix

Post by rodgerljl » Wed Feb 04, 2015 10:42 pm

Book 1970

Project Description:
I'm still very interested of the books being "checked out" at 1970-01-01. Since it was a kind of system error, then I'm curious about the reasons of the error. After exploring the database, I found some books in the "1970" category had been checked out several times, which means the system error occurred to these books every time they were checked out, but didn't occur to the book being checked out before or after. Apparently, it doesn't look like coincidence. Therefore, this data visualization is trying to dig out more information of those books.
screen-00016.png
Overview
The arc diagram is applied at this time, and each circle on the lower area represents a book. The bigger the circle, the more checked out times it has. If two circles share the same Dewey class, then they are connected with an arc. And different colors represent different Dewey classes. The visual elements below the circles are the titles of the books. They are not very readable, but I think they are visually interesting and balance the layout.

Interactivity
Move the mouse on each circle to see details of that book.
Left click the mouse to see the overview.
screen-00258.png
screen-00812.png
screen-01240.png
Book1970.zip
(1.19 MiB) Downloaded 232 times
--------------------------------------------------------------------
Revision

The revised version applied the color regarding to the dewey class to the selected circles as well, and also changed part of color scheme. Please see the attachment for the details.
screen-00889.png
screen-00770.png
screen-00629.png
Book1970_Revised.zip
(1.59 MiB) Downloaded 241 times
Last edited by rodgerljl on Thu Feb 12, 2015 3:53 pm, edited 1 time in total.

younkeehong
Posts: 4
Joined: Sat Jan 10, 2015 11:36 am

Re: Proj 3: 2D Reorderable Matrix

Post by younkeehong » Thu Feb 05, 2015 12:27 am

The topic is same as before: Loan Period vs. Pages and Dewey Class. However, the data was extracted from the loans occurred after year 2013. Also, the number of pages were limited to 1200 to present all-filled cell grid. Then two tasks were tested:
1. Integrate new color gradient scheme that automatically fits input data.
2. Reorder the columns and rows to show some unseen aspect.

Adaptive color gradient starts from idea that it would be better to have more resolution where most of the data is concentrated and those concentration could be calculated with integral. As seen in figure below one can use integral function as customized mapping of relative position in data axis.
integral.png
simple overview of adaptive gradient generation
And the same difference in original data is converted to different scale according to data density. This will allow more resolution in dense range. below is the quick experiment on small data.
adaptive_gradient.png
sample result of adaptive gradient
adaptive_gradient.png (9.49 KiB) Viewed 7343 times
It is observed that with two different data different gradient scheme is acquired and this will enable different result of mapping with basic (1st order) linear mapping. This was considered successful and adopted.

Reordering the previous 2D grid cells were done with implementing Java Array.sort function. Sorting was done both row-wise and column-wise. In addition cursor interaction of highlighting the cell below cursor and showing the value of it was implemented. Following are the original visualization and task-applied results.
loantime20152423385.png
reordered, linear color gradient
loantime201524233824.png
reordered, adaptive color gradient
Attachments
loantime_reordered.zip
(248.49 KiB) Downloaded 222 times
mat259a_hw3.pdf
(190.81 KiB) Downloaded 278 times
Last edited by younkeehong on Wed Feb 18, 2015 10:40 pm, edited 4 times in total.

fabian.offert
Posts: 5
Joined: Sat Jan 10, 2015 11:32 am

Re: Proj 3: 2D Reorderable Matrix

Post by fabian.offert » Thu Feb 05, 2015 2:42 am

It's The Economy, Stupid! - Relative Visualization

For this assignment, I updated the query to work with spl3 and thus include the years 2013 and 2014. The added data lets the results from previous versions stand out even clearer. To make the resulting matrix reorderable, I first revised the code to be more object-oriented and then added some keyboard shortcuts (1-7) to sort the data column-wise. The sorting is visualized by a simple animation for both the change in color and size, which also makes a comparison between the different arrangements possible. Please run the attached code for an interactive demo.

Screenshots
1.png
2.png
Zipped Project
sketch.zip
(21.24 KiB) Downloaded 236 times

jmd
Posts: 5
Joined: Sat Jan 10, 2015 11:26 am

Re: Proj 3: 2D Reorderable Matrix

Post by jmd » Thu Feb 05, 2015 3:14 am

*
When the chips are down

>> THE PIECE

The following dataviz explores the checked out items from the Seattle Public Library around two important recent events in US history: the Boston marathon bombings (2013) and the capture of Osama Bin Laden(2011).

>> RE-ORDER

After further revision of the project’s previous state, I went throughout all of the dewey decimal numbers. 31 very specific categories were picked (as seen in the query). The timeframe also changed. I placed the main event/attack at the middle and asked for data 7 days before and after.

>> THE QUERIES AND DATABASES

Main query:

Code: Select all

SELECT 
    day(cout) ,
    
    SUM(CASE
        WHEN deweyClass = 355.02 THEN 1
        ELSE 0
    END) AS war,
    SUM(CASE
        WHEN deweyClass = 327.127 THEN 1
        ELSE 0
    END) AS cia,
   SUM(CASE
        WHEN deweyClass = 179.8 THEN 1
        ELSE 0
    END) AS hate,
    SUM(CASE
        WHEN deweyClass = 364 THEN 1
        ELSE 0
    END) AS crime,
    SUM(CASE
        WHEN deweyClass = 178 AND deweyClass < 179 THEN 1
        ELSE 0
    END) AS greed,
    SUM(CASE
        WHEN deweyClass >= 297 AND deweyClass < 298  THEN 1
        ELSE 0
    END) AS islam,
    SUM(CASE
        WHEN deweyClass >= 399 AND deweyClass < 400 THEN 1
        ELSE 0
    END) AS torture,
    SUM(CASE
        WHEN deweyClass = 355 AND deweyClass < 356 THEN 1
        ELSE 0
    END) AS military,
    SUM(CASE
        WHEN deweyClass = 303.625 THEN 1
        ELSE 0
    END) AS terrorism,
    SUM(CASE
        WHEN deweyClass = 335.6 THEN 1
        ELSE 0
    END) AS fascism,
    SUM(CASE
        WHEN deweyClass = 321.8 THEN 1
        ELSE 0
    END) AS democracy,
    SUM(CASE
        WHEN deweyClass = 364.138 THEN 1
        ELSE 0
    END) AS war_crimes,
	SUM(CASE
        WHEN deweyClass = 302.54 THEN 1
        ELSE 0
    END) AS aggression,
	
	SUM(CASE
        WHEN deweyClass = 363.31 THEN 1
        ELSE 0
    END) AS censorship,
       SUM(CASE
        WHEN deweyClass = 327.2 THEN 1
        ELSE 0
    END) AS diplomacy,
    SUM(CASE
        WHEN deweyClass = 129 AND deweyClass < 130 THEN 1
        ELSE 0
    END) AS immortality,
      SUM(CASE
        WHEN deweyClass = 325.3 THEN 1
        ELSE 0
    END) AS colonization,
    SUM(CASE
        WHEN deweyClass = 155.93 THEN 1
        ELSE 0
    END) AS loss_psychology,
    SUM(CASE
        WHEN deweyClass = 220.95 THEN 1
        ELSE 0
    END) AS biblical_events,
    SUM(CASE
        WHEN deweyClass = 212.1 THEN 1
        ELSE 0
    END) AS existence_of_god,
    SUM(CASE
        WHEN deweyClass = 172.2 THEN 1
        ELSE 0
    END) AS government_ethics,
      SUM(CASE
        WHEN deweyClass = 323.442 THEN 1
        ELSE 0
    END) AS freedom_of_religion,
    SUM(CASE
        WHEN deweyClass = 323.44 THEN 1
        ELSE 0
    END) AS freedom_of_expression,

    SUM(CASE
        WHEN deweyClass = 323.445 THEN 1
        ELSE 0
    END) AS freedom_of_the_press,
    SUM(CASE
        WHEN deweyClass = 358.3 THEN 1
        ELSE 0
    END) AS weapons_of_mass_destruction,
    SUM(CASE
        WHEN deweyClass >= 956 AND deweyClass < 957  THEN 1
        ELSE 0
    END) AS middle_east_history,
    SUM(CASE
        WHEN deweyClass = 001.944 THEN 1
        ELSE 0
    END) AS big_foot
 
FROM
    spl2.inraw
    
WHERE    
       DATE (cout) >= '2013-04-08' AND DATE(cout) <= '2013-04-22' /* Boston */
      /* DATE (cout) >= '2011-04-24' AND DATE(cout) <= '2011-05-8'  /* OSAMA */
/* We group items only by year (since these events have occured in different years) */
GROUP BY DAY(cout)
ORDER BY DATE(cout)
Specific query:

Code: Select all

SELECT 
    title, cout, bibNumber, deweyClass
FROM
    spl2.inraw
WHERE

    /*deweyClass >= 297 AND deweyClass < 298  /* ISLAM 297*/
    /* deweyClass >= 956 AND deweyClass < 957  /* MIDDLE EAST HISTORY 956*/
    /* deweyClass >= 303.625 AND deweyClass < 303.626  /* TERRORISM 303.625*/
    /* deweyClass >= 399 AND deweyClass < 400  /* TORTURE 399*/
    /* deweyClass >= 355.02 AND deweyClass < 355.03 /* WAR 355.02 */
    /* deweyClass >= 364.138 AND deweyClass < 364.139 /* WAR CRIMES 364.138*/
    /* deweyClass >= 358.3 AND deweyClass < 358.4 /*  WEAPONS OF MASS DESTRUCTION 358.3*/
    /* deweyClass >= 355 AND deweyClass < 356  /* MILITARY 355*/
    /* deweyClass >= 302.54 AND deweyClass < 302.55 /* AGGRESSION  302.54*/
    /* deweyClass >= 220.95 AND deweyClass < 220.96  /* BIBLICAL EVENTS 220.95 */
    /* deweyClass >= 363.31 AND deweyClass < 363.32  /* CENSORSHIP 363.31 */
    /* deweyClass >= 327.127 AND deweyClass < 327.128 /* CIA 327.127 */
    /* deweyClass >= 325.3 AND deweyClass < 325.4 /* COLONIZATION 325.3 */
    /* deweyClass >= 364 AND deweyClass < 365 /* CRIME 364*/
    /* deweyClass >= 364.66 AND deweyClass < 364.67 /* DEATH PENALTY 364.66*/
    /* deweyClass >= 321.8 AND deweyClass < 321.9 /* DEMOCRACY 321.8*/
    /* deweyClass >= 178 AND deweyClass < 179 /* GREED 178*/
    /* deweyClass >= 179.8 AND deweyClass < 179.9 /* HATE 179.8 */
    /* deweyClass >= 129 AND deweyClass < 130 /* IMMORTALITY 129 */
    /* deweyClass >= 327.2 AND deweyClass < 327.3 /* DIPLOMACY 327.2 */
    /* deweyClass >= 212.1 AND deweyClass < 212.2 /* EXISTENCE OF GOD 212.1 */
    /* deweyClass >= 121.7 AND deweyClass < 121.8 /* FAITH 121.7*/
    /* deweyClass >= 335.6 AND deweyClass < 335.7 /*  FASCISM 335.6 */
	/* deweyClass >= 323.44 AND deweyClass < 323.45 /* FREEDOM OF EXPRESSION 323.44*/
    /* deweyClass >= 323.445 AND deweyClass < 323.446 /* FREEDOM OF INFORMATION 323.445*/
    /* deweyClass >= 323.442 AND deweyClass < 323.443 /* FREEDOM OF RELIGION 323.442 */
    /* deweyClass >= 323.443 AND deweyClass < 323.444 /* FREEDOM OF SPEECH 323.443 */
	/* deweyClass >= 323.445 AND deweyClass < 323.446 /* FREEDOM OF THE PRESS 323.445 */
    /* deweyClass >= 172.2 AND deweyClass < 172.3 /* GOVERNMENT ETHICS 1	72.2 */
    /* deweyClass >= 155.93 AND deweyClass < 155.94 /* LOSS PSYCHOLOGY 155.93 */
     deweyClass >= 001.944 AND deweyClass < 001.945  /* BIG FOOT 001.944 */
    
    /* AND DATE(cout) >= '2013-04-02' AND DATE(cout) <= '2013-04-29' */  /* Boston */
     AND DATE (cout) >= '2011-04-15' AND DATE(cout) <= '2011-05-8' /* OSAMA */
    /* AND spl2.popularity.bib = spl2.inraw.bibNumber */
GROUP BY (bibNumber)
LIMIT 30
Two main databases sets were used (one for each event). Additionally 62 databases with the titles of each Dewey Class were also used. The approximate time for the title queries were: 220 sec. (when lucky).
Total time: 220s x 62 databases = 13640 sec = + 3 hours in queries!

>> THE PROCESS
Image
Image
Image

In order to make the machine speak the ‘ttslib’ library was tried at first, but it was just too slow for real-time execution. Instead, a message is being sent to SuperCollider with the book title, and then, SC speaks.

>> FINAL IMAGE AND THOUGHTS

Image

( > > https://vimeo.com/118796825 < <)

I want to tell a story. Even if some very specific categories returned zero results, the silence of emptiness means something. This is why the appearance of the graphic components is animated. The user/viewer must make a journey (even if it’s a small one) before arriving to the data.

The video helps telling the story and helps archiving the project as well, since in the future -most likely- it won’t run in future versions of Processing (if P. survives).

I prefer to see data as a living thing and not as a photograph -even when it is-. That is why the items move within limited borders. Still the small movement allows to read the data. As Kurt K. would say, it is “the microscope view”.

While the interest in some topics remained the same in the 15 gathered days, we can see -for example- how the interest in military topics is notably raised after an event while diplomacy is almost forgotten.

I imagine this video in a medium/large scale installation where the viewer can analyze the data and at the same time, having the computer naming the book titles one by one using its own cold impartial voice.


>> CONCLUSION

At the end, the interest in ‘fictional’ BigFoot (deweyClass=001.944) was larger than war, hate, crime, greed, fascism, diplomacy, censorship altogether.

>> P.S.

Interaction with keys:
  • [ mouse ] - move mouse to focus an specific topic and read easily one circular row contents.
    [ b ] - on/off Boston event items
    [ a ] - on/off Osama Bin Laden event items
    [ s ] - on/off speak mode (not available in provided sketch)
    [ z ] - on/off topic auto-change
    [ 1 ] - move up one topic
    [ 2 ] - move down one topic
Attachments
databases.zip
Databases used.
(47.61 KiB) Downloaded 220 times
chipsAreDown_04_vocoder.zip
Processing Code
(519.06 KiB) Downloaded 216 times
Last edited by jmd on Thu Feb 05, 2015 6:03 pm, edited 4 times in total.

Post Reply