## Proj 3: 2D Reorderable Matrix

Posts: 160
Joined: Wed Sep 22, 2010 12:26 pm

### Proj 3: 2D Reorderable Matrix

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.

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

### Re: Proj 3: 2D Reorderable Matrix

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: Ordered by Column: Ordered by Row and Columns Grouped by Year: Ordered by Columns that are Grouped by Year:

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!");

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.

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);
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
XcelCombined.csv
CSV File
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

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.
A_Lazareva_HW3.zip
Processing files

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

### Re: Proj 3: 2D Reorderable Matrix

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.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 = {
,#3E61A7,#2F4B9A,#1F348E,#0F1E81,#000875
};

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

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

myTable = new Table();
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;

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);{

.setPosition(80,45)
.setSize(800,20)
.setRange(1,96)
.setValue(1)
;

.setPosition(80,70)
.setSize(200,20)
.setRange(0,200)
.setValue(0)
;

.setPosition(80,95)
.setSize(200,20)
.setRange(0,200)
.setValue(0)
;

.setPosition(80,120)
.setSize(200,20)
.setRange(0,200)
.setValue(0)
;

.setValue(0)
.setPosition(80,160)
.setSize(200,19)
;

.setValue(100)
.setPosition(80,185)
.setSize(200,19)
;

.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);
text(minHigh,400,-307);
fill(colormode);
text(maxHigh,640,-307);
fill(colormode);
textAlign(LEFT);
text("Temperature",310,-285);

textSize(15);
textAlign(CENTER);
fill(colormode1);
text(minPrecip,400,-357);
fill(colormode1);
text(maxPrecip,640,-357);
fill(colormode1);
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] == 1 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);
}

else if(dataMatrix[i] == 2 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 3 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 4 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 5 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 6 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 7 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 8 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 9 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 10 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 11 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 12 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 1 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 2 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 3 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 4 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 5 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 6 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 7 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 8 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 9 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 10 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 11 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 12 && averPrecipOver == true){
float High = map(avePrecip,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;
}

``````
datahomework1_3.zip
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.

Code: Select all

``````/MAT 259 Visualizing Information homework3  1 Feb 2015 Intae Hwang
//
//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();
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;

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);{

.setValue(0)
.setPosition(30,610)
.setSize(200,19)
;

.setValue(100)
.setPosition(30,640)
.setSize(200,19)
;

.setPosition(30,670)
.setSize(200,19)
.setValue(0)
;

.setPosition(30,700)
.setSize(200,20)
.setRange(0,200)
.setValue(0)
;

.setPosition(30,730)
.setSize(200,20)
.setRange(0,200)
.setValue(0)
;

.setPosition(30,760)
.setSize(200,20)
.setRange(0,200)
.setValue(0)
;

.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 = {
,#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);
text(minHigh,-690,-307);
fill(colormode);
text(maxHigh,-480,-307);
fill(colormode);
textAlign(CENTER);
text("Temperature",-585,-307);

textSize(13);
textAlign(CENTER);
fill(colormode1);
text(minPrecip,-690,-357);
fill(colormode1);
text(maxPrecip,-480,-357);
fill(colormode1);
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] == 1 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);
}

else if(dataMatrix[i] == 2 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 3 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 4 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 5 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 6 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 7 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 8 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 9 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 10 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 11 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 12 && averHighOver == true){
float High = map(aveHigh,minHigh,maxHigh,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode[c];
fill(x,33);}

else if(dataMatrix[i] == 1 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 2 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 3 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 4 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 5 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 6 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 7 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 8 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 9 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 10 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 11 && averPrecipOver == true){
float High = map(avePrecip,minPrecip,maxPrecip,0,numcolormode1);
float d = High;
int c = round(d);
color x = colormode1[c];
fill(x,33);}

else if(dataMatrix[i] == 12 && averPrecipOver == true){
float High = map(avePrecip,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
Attachments 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

Self-Organizing Map of Checkout Trends
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
Reorderable Matrix.pdf
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

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: The default view on launch: sorting by number of checkouts, all items selected, January 2006.
Date changed and various Dewey categories deselected
Sorting by dewey number and various Dewey categories deselected
Date selected to show color tint from relatively low activity for that month

Processing files:
Attachments
kaminski_hw2_reorderable_v2.zip
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

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.
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.
Book1970.zip
--------------------------------------------------------------------
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.
Book1970_Revised.zip
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

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. 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. 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.
Attachments
loantime_reordered.zip
mat259a_hw3.pdf
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

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
Zipped Project
sketch.zip

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

### Re: Proj 3: 2D Reorderable Matrix

*
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   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 ( > > 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.