Midterm Visualizations

For my A-Z Midterm (and in preparation for my thesis), I did four different visualizations based off the same process of entering a single URL into a page scraper, which in turn generates a text file with the result (a concordance list of the words and how many times they appeared on the page).  These four visualization were generated using the myspace.com homepage.

The four different visualizations make use of this information by reading in the text file and drawing the text in different ways, making use of the text itself, the frequency of the word in the text, the length of the word, and the physical width of the word itself as different variables.

Here are some screen shots:

Here’s some example code for this last one, just to give an idea:

package concordance.processing;

//import java.awt.Font;
//import java.awt.Graphics;
import java.io.*;
//import java.lang.reflect.Array;
import java.util.*;
import java.util.regex.*;

import a2z.*;
import concordance.processing.Word;
import processing.core.PApplet;
import processing.core.PFont;

public class DrawText4 extends PApplet {

ArrayList words;
PFont f;
float r;

public static void main(String[] args) {
PApplet.main(new String[] {“concordance.processing.DrawText4″});
}

public void setup() {
size(1000,720);
words = new ArrayList();
fillConcordance(“test.txt”);
f = createFont(“Georgia”,64,true);
//textFont(f);

}

public void draw() {
background(50);
//10 boxes along the curve
int totalBoxes = 10;
// We must keep track of our position along the curve
float arclength = 0;

translate(width/2,height/2);
// We’re done, print out contents of Tree!

//System.out.println(“Here are the contents of your tree:”);
//Iterator iterator = words.values().iterator();
Iterator iterator = words.iterator();
r = 160;//values + 1000;
while (iterator.hasNext()) {

Word word = (Word) iterator.next();
println(word.getCount());
r = word.getCount()*100;

String output = word.getWord();
int values = word.getCount();
float length = output.length();

textFont(f, (values*length)*values);
//for (int i = 0; i < output.length(); i++)
//{
// The character and its width
//char currentChar = output.charAt(i);
//float w = textWidth(currentChar);
float w = textWidth(output);

// Each box is centered so we move half the width
arclength += w/2;
// Angle in radians is the arclength divided by the radius
// Starting on the left side of the circle by adding PI
float theta = PI + arclength / r;

pushMatrix();
// Polar to cartesian coordinate conversion
translate(r*cos(theta), r*sin(theta));
// Rotate the box
rotate(theta+PI/2); // rotation is offset by 90 degrees
// Display the character (darker = lower count)
fill(values+w);

text(output,0,0);//random(10),random(180));
popMatrix();
// Move halfway again
arclength += w/2;
//}

r+= 1;

}

noLoop();
}
//}

public void fillConcordance(String path) {
String[] lines = loadStrings(path);
for (int i = 0; i < lines.length; i++) {
String line = lines[i];
String[] stuff = line.split(” “);
Word w = new Word(stuff[0]);
w.setCount(Integer.parseInt(stuff[1]));
words.add(w);
}
}

}