aram’s blog

To work continuously in related subject from midterm project - Tree Map, I did several graph visualization on Processing.

First, I attempt to create a simple graph with few nodes. My personal interest of movies has become the content of this graph, either movie title or name of the actor, director are shown in each node. Again, most important thing was not to show a beauty of floating text boxes, but to depict the ‘relationship’ between each word. In this example, people can see how James Cameron and his movies hatch actors who can be related to different movies.

Second images shows a ‘mess’ when dealing with a large number of data, later on these nodes+text combinations will become small sized ellipses.

Before taking a further step to utilize xml data parsing, I attempted pulling up data from my local hard drive. As a result, it shows segments of words in one of my .doc file ( I specified this file to show ‘text’ data into nodes rather than only specifying a folder. That would show a meaningless data.)

Finally, after several polishing on the visual part of the code, it shows following visualization with a kind of ‘halloween’ color scheme. It might look ‘pretty’ in a way, however, I am not fully satisfied with this result which could be meaning ‘all substance but no meaning’. This is, also, the main thing that I learn from this project. Creating data-visualizing isn’t that difficult, especially with all dynamic sources around. However, taking further step in order to make your visual more meaningful could be totally different thing. In code-wise, I know what I am lacking of- utilizing more dynamic data type. Parsing xml data would be a good example.

More refined version is the image shown below. It took me some time to figure out how to command ‘count’ to size the ellipse, and for the interaction, removing rollover and let some relatively large ellipses with more word frequency stay as they are when applet running.

A graph is a collection of elements, usually called nodes, linked together by edges(sometimes called brances). It is a common structure for mapping connections of many related elements. This is partly because the visual representation of a network shows the sort of connectedness that makes sense to someone familiar with the data, whether as a free-form map of associations written out on paper (sometimes called a mind map). - From Visualizing Data by Ben Fry

I decided to show a collection of words by using of “Mind Map” type of graph layout. What I will propose is not a big leap from the quote from the book above, but I believe it’d be a good ‘review’ of this semester doing next steps of data visualization that I have done this midterm - Tree Map.

Contents that I am going to use are up in the air for now, mainly because I want to focus more on the structure of how each element relate each other(e.g. nodes) on either Eclipse or Processing. However, after I presented overall concept, plan and thoughts for my final, Dan gave me a good ‘tip’ and examples of what could be the good ‘contents’ that fill the mind map - participatory platform of collective thoughts(or soul) from audiences. Similar to many mind-mapping software, mine could have blank area that user can fill whatever word that strikes his mind, keep gathering them, and finally shows them in networked map with minimal graphic touch on

Thanks to Maria, my classmate of A2Z, now I have a little sense of analyzing codes samples that I will need.

Inspiration and related links are below.

simple graph demo

Maria’s midterm

blah

My ‘plan’ was to concentrate more on finding ways to acquire text data from URL by using of XML. But I found it more difficult that I thought it would be, decided that I would pursuit that later on my final, not midterm.

The main idea is to subdivide 2D space to show the relative frequency of each word(from .txt file)in mapping of tree structures.

The code was built mainly from Visualizing Data (Ben Fry, O’reilly) Ch. 7 -Trees, Hierarchies, and Recursion, then I modified it to ‘my version’ of it.

After several trials of modifying the last code for midterm, I came up with some results with slightly different visuals.

Each sample shows different stroke and ellipse size. First three examples are from the same text file from the book-Mark Twain’s Following the Equator, depicting word usage in the book, and forth one’s visuals created from Korean-English dictionary from The Project Gutenberg. The fifth one shows the word usage in The War of the Worlds by H.G.Wells.

Since the text is only drawn if the size of the text is smaller than that of ellipse, for many times it shows ‘blank’ ellipses.

Follow-ups : After in-class presentation, I got lots of helpful feedback both from Dannie and classmates. Among those, I sorted out some very important opinions.

• The sequence of how those ellipses form in visual - For now, it is procedural, my processing code doesn’t contain ‘random’ value. Next time, I should think about how I ‘intentionally’ form whole fragments in visual more successfully.
• Using more dynamic data - Absolutely. This should be my goal for final project. Parsing data from XML should be studied. In fact, one of my classmates showed us the perfect example that I can refer to. Stored text data makes the visual very static.
• Make the visual less ‘arbitrary - Current code is done not by means of any underlying principle or logic, but by whim or some decidedly illogical formula. Using ‘baysean filter’ to build more logic first, then come up with better solution.

Source code here

For A2Z midterm project, I want to develop a short program to familiarize myself with how treemaps work. I’ve already exercised one simple code last week for class assignment, this could be developed further by putting more trial on it. - For example, simply changing String data from .txt to URL source data.

Some sample existing visuals from web are shown below:

http://jcmc.indiana.edu/vol10/issue4/turner.html

http://radar.oreilly.com/archives/2006/07/treemap-on-rails.html

http://www.cse.ohio-state.edu/~kerwin/treemap-survey.html

This week, I made a simple treemap, referring mainly from the book Visualizing Data. All done is Processing, not Java.

Code sample available here.

Yeah… I have absolutely no idea how I am going to figure this out:regular expression. So, I decided to read the e-book first, but reading the book also turns out to be a long road to go!

The first code below is just about Pattern and Matcher, not even goes further to regex details (meta-characters, character class, quantifiers and etc.).

//wk2 assignment
//my name matching + regex
//aram chang 2008 02 05

import java.util.regex.*;

public class RegexAssignName {
public static void main(String[] args) {
String inputtext = “aram chang is aramcee in Korean.”; // Step #1
String regex = “aramcee”; // Step #2
Pattern p = Pattern.compile(regex); // Step #3
Matcher m = p.matcher(inputtext); // Step #4
if (m.find()) {
System.out.println(m.group()); // Step #5
} else {
System.out.println(”No match!”); // Step #6
}
}
}

output: aramcee

Pattern p = Pattern.compile(regex); // Compile Regex
Matcher m = p.matcher(content); // Create Matcher
while (m.find()) {
System.out.println(m.group()); —> try to memorize this pattern and matcher code….

Next step is getting email address by regex-ing. I’ve had trouble compiling it, eclipse kept showing red underline on my regex. Dannie helped me out just putting one more slash per each and making a2z case insensitive.

//wk2 assignment
//email matching + regex
//aram chang 2008 02 05
import java.util.regex.*;

public class RegexEmailMatching {
public static void main(String[] args) {
String inputtext = “aramcee@gmail.com abc@hanmail.com ddd@hexmail.com”; // Step #1
String regex = “\\b[A-Z0-9._%-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}\\b“; // important to put one more “/”

Pattern p = Pattern.compile(regex,Pattern.CASE_INSENSITIVE); // a -z has to be lowercase

Matcher m = p.matcher(inputtext); //

if (m.find()) {
System.out.println(m.group()); //

} else {
System.out.println(”No match!”); //

}
}
}

output: aramcee@gmail.com

First, I had(and am still) a hard time figuring out basic know-how to use Eclipse, however, struggling back and forth with Terminal and plain text editor combo also taught me some sense of doing Java, thank god….

For wk1 assignment, I decide to start with really simple code: reversing characters and here’ the result and code.

beyond processing and into java
the string class
file io
simple analysis
info about class cvs for downloading example and uploading assignments
characters and strings tutorial
sun string tutorial
what is electronic writing?

Result:

?gnitirw cinortcele si tahw
lairotut gnirts nus
lairotut sgnirts dna sretcarahc
stnemngissa gnidaolpu dna elpmaxe gnidaolnwod rof svc ssalc tuoba ofni
sisylana elpmis
oi elif
ssalc gnirts eht
avaj otni dna gnissecorp dnoyeb
Code

import java.io.*;
import java.nio.*;
import java.nio.channels.*;

public class ReverseCharacters {
public static void main (String[] args) throws IOException {

// Create an input stream and file channel
// Using first arguemnt as file name to read in
FileInputStream fis = new FileInputStream(”mytext.txt”);
FileChannel fc = fis.getChannel();

// Read the contents of a file into a ByteBuffer
ByteBuffer bb = ByteBuffer.allocate((int)fc.size());
fc.read(bb);
fc.close();

// Convert ByteBuffer to one long String
String content = new String(bb.array());

System.out.println(”Read ” + content.length() + ” characters from ” + “mytext.txt”);
StringBuffer reverse = new StringBuffer();
for (int i = content.length()-1; i >= 0; i–) {
char c = content.charAt(i);
reverse.append(c);
}

String output = reverse.toString();

// Create an output stream and file channel to write out a report
// (Also print out report to screen)
FileOutputStream fos = new FileOutputStream(”mytext.txt”);
FileChannel outfc = fos.getChannel();

// Convert content String into ByteBuffer and write out to file
bb = ByteBuffer.wrap(output.getBytes());
outfc.write(bb);
outfc.close();

System.out.println(”Reversed text written to ” + “output.txt”);

}
}