The Trend of Checkout Numbers of Books During Corresponding Adaptation Film Released Time
Books and movies remain the most popular cultural represent forms.
Will they have mutual impact on each other?
For example: When a film adapted from a book released,
will the checkout number of this book in library increase?
I chose several adapted films respectively released on 2006, 2009, 2012 and 2014.
Compare the checkout number of specific book in the normal time and
the time after adaptation film released to find the trend over months and years.
Description:
The horizon axis represent the time(from 2006 to 2014).
And the number of rectangular represent the number of checkout per month.
Press "s" OR "S" on keyboard to show the whole trend of four books.
Click the specific movie item to see more details information about the adaptation movie
and its correspond book.
MySQL Example Code:
Code: Select all
SELECT
YEAR(checkOut) AS CheckoutYear,
MONTH(checkout) AS CheckoutMonth,
COUNT(checkOut) AS CheckoutCount
FROM
spl3._rawXmlDataCheckIns
WHERE
title LIKE '%Hunger Games%'
AND SUBSTRING(itemType, 3, 4) = 'bk'
GROUP BY CheckoutYear , CheckoutMonth
visualizationHWtwo
Code: Select all
//Margin
float constHoriMarg=120;
float constVertMarg=80;
int rows=20, columns=132;
//2D matrix
Table table1, table2, table3, table4;
float[][] dataMatrix1;
float[][] dataMatrix2;
float[][] dataMatrix3;
float[][] dataMatrix4;
float maxValue, minValue;
int numRows1, numRows2, numRows3, numRows4;
int numColumns1, numColumns2, numColumns3, numColumns4;
//width and height for cell
float cellWidth, cellHeight;
//year
int startYear=2006;
boolean colorApplied=false;
boolean labelApplied=false;
boolean rectOne=false;
boolean rectTwo=false;
boolean rectThree=false;
boolean rectFour=false;
void setup() {
size(1280, 720);
//Put data into Processing table from csv
table1 =loadTable("the da vinci code.csv", "header");
table2=loadTable("the time travelers wife.csv", "header");
table3=loadTable("the hunger games.csv", "header");
table4=loadTable("fault in our stars.csv", "header");
numRows1 = table1.getRowCount();
numRows2 = table2.getRowCount();
numRows3 = table3.getRowCount();
numRows4 = table4.getRowCount();
numColumns1 = table1.getColumnCount();
numColumns2 = table2.getColumnCount();
numColumns3 = table3.getColumnCount();
numColumns4 = table4.getColumnCount();
dataMatrix1=new float[numRows1][numColumns1-2];
dataMatrix2=new float[numRows2][numColumns2-2];
dataMatrix3=new float[numRows3][numColumns3-2];
dataMatrix4=new float[numRows4][numColumns4-2];
//println("Rows:"+numRows1+"Columns:"+numColumns1);
//set the background Matrix
for (int i=0; i<numRows1; i++) {
for (int j=0; j<numColumns1-2; j++) {
dataMatrix1[i][j] = table1.getFloat(i, j+2);
//println(dataMatrix1[i][j]);
}
}
for (int i=0; i<numRows2; i++) {
for (int j=0; j<numColumns2-2; j++) {
dataMatrix2[i][j] = table2.getFloat(i, j+2);
//println(dataMatrix2[i][j]);
}
}
for (int i=0; i<numRows3; i++) {
for (int j=0; j<numColumns3-2; j++) {
dataMatrix3[i][j] = table3.getFloat(i, j+2);
//println(dataMatrix3[i][j]);
}
}
for (int i=0; i<numRows4; i++) {
for (int j=0; j<numColumns4-2; j++) {
dataMatrix4[i][j] = table4.getFloat(i, j+2);
//println(dataMatrix4[i][j]);
}
}
}
void draw() {
background(#236e9c);
cellWidth = (width - constHoriMarg*2)/columns;
cellHeight = (height - constVertMarg*4)/rows;
//Draw second layer background
stroke(#1f6088);
strokeWeight(3);
fill(#1f6088);
rect(constHoriMarg, constVertMarg+50, cellWidth*columns, cellHeight*(rows-8));
//Draw Year
for (int i=0; i<12; i+=3) {
textAlign(CENTER, CENTER);
textSize(18);
fill(#e9f0f4);
text(startYear+i, constHoriMarg+(12+(12*i))*cellWidth,
constVertMarg+35);
}
//Draw TiTle
textAlign(LEFT, CENTER);
textSize(26);
fill(#e9f0f4);
text("FILM ADAPTATION INFLUENCE", constHoriMarg,
constVertMarg-40);
fill(#81e298);
text("ADAPTATION", constHoriMarg+66,
constVertMarg-40);
textSize(14);
fill(#e9f0f4);
text("From Seattle Public Library", constHoriMarg, constVertMarg-60);
text("The Trend of Checkout Numbers of Books During Corresponding Adaptation Film Released Time",
constHoriMarg, constVertMarg-15);
if (labelApplied==true)labelAppeared();
if (colorApplied==true)colorAppeared();
}
Code: Select all
void introduction1() {
stroke(#1f587b);
fill(#1f587b);
rect(800, 405, 360, 160);
textAlign(LEFT, BOTTOM);
textSize(19);
fill(#a0b9c9);
text("The Da Vinci Code", 810, 435);
textSize(15);
text("The Da Vinci Code is a mystery-detective", 810, 460);
text("novel written by Dan Brown written in 2003.", 810, 480);
text("The adaptation film was released", 810, 500 );
text("on May 19, 2006.", 810, 520 );
noStroke();
strokeWeight(3);
fill(0, 70);
rect(constHoriMarg+6*cellWidth, constVertMarg+50,
cellWidth*12, cellHeight*(rows-8));
stroke(255);
fill(255);
triangle(constHoriMarg+12*cellWidth, constVertMarg+38+cellHeight*(rows-8),
constHoriMarg+11*cellWidth, constVertMarg+48+cellHeight*(rows-8),
constHoriMarg+13*cellWidth, constVertMarg+48+cellHeight*(rows-8));
}
void introduction2() {
stroke(#1f587b);
fill(#1f587b);
rect(800, 405, 360, 160);
textAlign(LEFT, BOTTOM);
textSize(19);
fill(#a0b9c9);
text("The Time Traveler's Wife", 810, 435);
textSize(15);
text("The Time Traveler’s Wife is a novel", 810, 460);
text("by Audrey Niffenegger published in 2003. ", 810, 480);
text("The adaptation film was released", 810, 500 );
text("on 14 August 2009.", 810, 520 );
noStroke();
strokeWeight(3);
fill(0, 70);
rect(constHoriMarg+42*cellWidth, constVertMarg+50,
cellWidth*12, cellHeight*(rows-8));
stroke(255);
fill(255);
triangle(constHoriMarg+48*cellWidth, constVertMarg+38+cellHeight*(rows-8),
constHoriMarg+47*cellWidth, constVertMarg+48+cellHeight*(rows-8),
constHoriMarg+49*cellWidth, constVertMarg+48+cellHeight*(rows-8));
}
void introduction3() {
stroke(#1f587b);
fill(#1f587b);
rect(800, 405, 360, 225);
textAlign(LEFT, BOTTOM);
textSize(19);
fill(#a0b9c9);
text("Hunger Games", 810, 435);
textSize(15);
text("Hunger Games is a series of three adventure ", 810, 460);
text("novels written by Suzanne Collins,", 810, 480);
text("which respectively published ", 810, 500 );
text("in 2008, 2009 and 2010.", 810, 520 );
text("And the corresponding adaptation film was", 810, 540 );
text("respectively released on March 23, 2012", 810, 560 );
text("2013, 2014 and 2015 ", 810, 580 );
text("(Mockingjay has been divided into two parts)", 810, 600 );
noStroke();
strokeWeight(3);
fill(0, 70);
rect(constHoriMarg+78*cellWidth, constVertMarg+50,
cellWidth*12, cellHeight*(rows-8));
stroke(255);
fill(255);
triangle(constHoriMarg+84*cellWidth, constVertMarg+38+cellHeight*(rows-8),
constHoriMarg+83*cellWidth, constVertMarg+48+cellHeight*(rows-8),
constHoriMarg+85*cellWidth, constVertMarg+48+cellHeight*(rows-8));
}
void introduction4() {
stroke(#1f587b);
fill(#1f587b);
rect(800, 405, 360, 160);
textAlign(LEFT, BOTTOM);
textSize(19);
fill(#a0b9c9);
text("Fault in Our Stars", 810, 435);
textSize(15);
text("Fault in Our Stars is a novel by John Green ", 810, 460);
text("published in 2012.", 810, 480);
text("The adaptation film was released", 810, 500 );
text("June 6, 2014. ", 810, 520 );
noStroke();
strokeWeight(3);
fill(0, 70);
rect(constHoriMarg+102*cellWidth, constVertMarg+50,
cellWidth*12, cellHeight*(rows-8));
stroke(255);
fill(255);
triangle(constHoriMarg+108*cellWidth, constVertMarg+38+cellHeight*(rows-8),
constHoriMarg+107*cellWidth, constVertMarg+48+cellHeight*(rows-8),
constHoriMarg+109*cellWidth, constVertMarg+48+cellHeight*(rows-8));
}
colorApplied
Code: Select all
void colorAppeared() {
//color the hunger games
for (int i=0; i<numRows3; i++) {
for (int j=0; j<numColumns3-2; j++) {
dataMatrix3[i][j] = table3.getFloat(i, j+2);
//println(dataMatrix3[i][j]);
}
}
for (int m=0; m<numRows3; m++) {
for (int n=0; n<((int)(dataMatrix3[m][0]/40)); n++) {
stroke(#1f6088);
strokeWeight(3);
//fill(#2F5474);
fill(#DE5176);
rect(constHoriMarg + cellWidth*(m+38), constVertMarg
+ cellHeight*n + 50, cellWidth, cellHeight);
}
}
//color the time travelers wife
for (int i=0; i<numRows2; i++) {
for (int j=0; j<numColumns2-2; j++) {
dataMatrix2[i][j] = table2.getFloat(i, j+2);
//println(dataMatrix2[i][j]);
}
}
for (int m=0; m<numRows2; m++) {
for (int n=0; n<((int)(dataMatrix2[m][0]/2)); n++) {
stroke(#1f6088);
strokeWeight(3);
//fill(#2F5474);
fill(#10D5E5);
rect(constHoriMarg + cellWidth*(m+18), constVertMarg
+ cellHeight*n + 50, cellWidth, cellHeight);
}
}
//color the fault in our stars
for (int i=0; i<numRows4; i++) {
for (int j=0; j<numColumns4-2; j++) {
dataMatrix4[i][j] = table4.getFloat(i, j+2);
//println(dataMatrix4[i][j]);
}
}
for (int m=0; m<numRows4; m++) {
for (int n=0; n<((int)(dataMatrix4[m][0]/20)); n++) {
stroke(#1f6088);
strokeWeight(3);
//fill(#2F5474);
fill(#F2A744);
rect(constHoriMarg + cellWidth*(m+78), constVertMarg
+ cellHeight*n + 50, cellWidth, cellHeight);
}
}
//color the da vinci code
for (int i=0; i<numRows1; i++) {
for (int j=0; j<numColumns1-2; j++) {
dataMatrix1[i][j] = table1.getFloat(i, j+2);
//println(dataMatrix1[i][j]);
}
}
for (int m=0; m<numRows1; m++) {
for (int n=0; n<((int)(dataMatrix1[m][0]/10)); n++) {
stroke(#1f6088);
strokeWeight(3);
//fill(#2F5474);
fill(#9264AA);
rect(constHoriMarg + cellWidth*m, constVertMarg
+ cellHeight*n + 50, cellWidth, cellHeight);
}
}
if (rectOne)introduction1();
if (rectTwo)introduction2();
if (rectThree)introduction3();
if (rectFour)introduction4();
}
Code: Select all
void labelAppeared() {
// Draw the interpretation panel color
for (int i=0; i<4; i++) {
if ((mouseX>130)&&(mouseX<315)&&(mouseY>500+i*40)&&(mouseY<500+i*40+cellHeight)) {
stroke(#264d64);
fill(#264d64);
rect(130, 500+i*40, 185, cellHeight);
} else {
stroke(#295772);
fill(#295772);
rect(130, 500+i*40, 185, cellHeight);
rect(143, 450, 142, cellHeight);
}
}
stroke(#9264AA);
fill(#9264AA);
rect(123, 500, cellWidth-2, cellHeight);
stroke(#10D5E5);
fill(#10D5E5);
rect(123, 540, cellWidth-2, cellHeight);
stroke(#DE5176);
fill(#DE5176);
rect(123, 580, cellWidth-2, cellHeight);
stroke(#F2A744);
fill(#F2A744);
rect(123, 620, cellWidth-2, cellHeight);
// Draw the interpretation panel text
textAlign(LEFT, BOTTOM);
textSize(14);
fill(#a0b9c9);
text("The Da Vinci Code", 140, 520);
text("The Time Traveler's Wife", 140, 560);
text("Hunger Games", 140, 600);
text("Fault in Our Stars", 140, 640);
textSize(16);
text("Search Details", 160, 470);
}
Code: Select all
void keyPressed() {
if (key=='s' || key =='S') {
colorApplied=!colorApplied;
labelApplied=!labelApplied;
rectOne = false;
rectTwo = false;
rectThree = false;
rectFour = false;
}
}
void mousePressed() {
for (int i=0; i<4; i++) {
if ((mouseX>130)&&(mouseX<315)&&(mouseY>500+i*40)&&(mouseY<500+i*40+cellHeight)) {
stroke(#285c7c);
fill(#285c7c);
if (i==0) {
rectOne = true;
rectTwo = false;
rectThree = false;
rectFour = false;
} else if (i==1) {
rectTwo=true;
rectOne = false;
rectThree = false;
rectFour= false;
} else if (i==2) {
rectThree=true;
rectTwo = false;
rectOne = false;
rectFour= false;
} else {
rectFour=true;
rectTwo = false;
rectThree = false;
rectOne= false;
}
}
}
}