Processing

Final Project

Visualization of Bio Networks

For my final project I worked with real scientific experimental data to create a visualization of three data sets. I worked with a specific Cell metabolism reaction involving twenty six metabolytes. My data sets were 1) steady state concentration of each metabolyte 2) flux between metabolytes 3) connections between these metabolytes. Each metabolyte is represented as a circle of varying radius (directly proportional to the concentration), the flux between them is represented by means of lines of varying thickness (again, directly proportional to the rate of flux).

User Scenario-

This is meant purely as a visualization tool for scientists and people interested in such networks. The user can upload these data sets (pretty standard for experiments) and get a visual illustration of the experiment.

Additional Functions

1) The user can configure the visualization as she wants. In complex experiments, not all reactions are important. This tool enables the user to configure the visualization in a way that makes sense for her hypothesis while making sure that the bigger picture of the experiment is still present.

2) The user can retrieve data about the concentration of each metabolyte with a rollover button.

3) The user can save a particular configuration for future use. Once this configuration has been saved, the user may upload a new data set and with a simple key, go back to a saved configuration. The user may then build a series of identically configured visualizations for different data.

Here is the code-

Ball[] ball;
PFont f;

int tx, ty;
boolean ballselected;
Ball selected;

void setup() {
size(900,600);
smooth();

HashMap hm = new HashMap();
f= createFont(“Georgia”,24,true);
textAlign(CENTER);
String [] data = loadStrings(“proj.txt”);
String [] pair= loadStrings(“relationships1.txt”);

int []nbrlist = new int[100];
float [] thickness= new float[100];
int nbr1=0;
int nbr2=1;

float[] allrad=new float[data.length];
ball= new Ball[data.length];
float[] alledge=new float[pair.length];

for(int i = 0; i < data.length; i++) {
String label[] = split(data[i],”\t”);
hm.put(label[0],i);
}

for(int i = 0; i < pair.length; i++) {
String values[]= split(pair[i], “,”);
float [] edgethickness= float (split (pair[i], “,”));
float thick= map(edgethickness[2], 0,5,0,2);
Iterator j = hm.entrySet().iterator();
while (j.hasNext()) {
Map.Entry me = (Map.Entry)j.next();
if (me.getKey().equals(values[0])){
nbr1=int(me.getValue().toString());
}
if (me.getKey().equals(values[1])){
nbr2=int(me.getValue().toString());
}
}
//println(nbr1 + ” ” + nbr2);
nbrlist[nbr1]=nbr2;
// println(values[0] + ” ” + values[1]);
// println(nbr1 + ” ” + nbr2);
thickness[nbr1]= thick;
}

for(int i = 0; i < data.length; i++) {
float values[]= float (split(data[i], “\t”));
String label[] = split(data[i],”\t”);
float m= map (values[1],0,1000, 10, 100);
ball[i] = new Ball(m,label[0],nbrlist[i], thickness[i]);

// load location data from directory
String locdata[] = loadStrings(“locationdata.txt”);
float []locvalues = float (split (locdata[i], “,”));

registerMouseEvent(ball[i]);
allrad[i]= values[2];
float z= max(allrad);
}
}

void draw(){
background(255);
for(int i=0; i< ball.length; i++) {
ball[i].display();
ball[i].rollover();
}
}

// SAVE COORDINATES OF GENERATED BALLS
void keyPressed() {
if (keyCode==CONTROL){
saveData();
}
else if(keyCode==ENTER) {
updatearrangement();
}
}

void saveData() {
String [] locationdata = new String[ball.length];
for (int i=0; i < ball.length; i++) {
locationdata[i]= (ball[i].x + “,” + ball[i].y);
}
saveStrings (“locationdata.txt”, locationdata);
}

void updatearrangement() {
String locdata[] = loadStrings(“../locationdata.txt”);
for (int i=0; i < locdata.length; i++) {
float []locvalues = float (split (locdata[i], “,”));
ball[i].x=locvalues[0];
ball[i].y=locvalues[1];
}
}

// Balls
public class Ball{
float x,y, radius, diameter;
int neighbor;
float x1,y1;
int fillCol;
String title;
float thick1;
Ball(float rad, String label, int nidx, float thickness){
float r,g,b;

//r=tempR;
//g=tempG;
//b=150;
radius=rad;
thick1=thickness;
neighbor=nidx;
diameter=2*rad;
title=label;
//fillCol = color(r,g,b,255);

x=random(100,width);
y=random(100,height);
}

boolean isOver(int mx, int my){
return (mx-x)*(mx-x) + (my-y)*(my-y) < radius*radius;
}

// This method is called automatically every loop
// becausee we have registerDraw(this object)

void display(){
ellipseMode(CENTER);
fill(fillCol,75);
stroke(255);
ellipse(x,y,radius,radius);
text(title, x-20,y);
stroke(5);
text(“Drag mouse here for concentration”, 10, 20,100,50);
text(“Cell Metabolism Network”, 10,80,100,50);
x1=ball[neighbor].x;
y1=ball[neighbor].y;
if(neighbor!=0){
strokeWeight(thick1);
line(x,y,x1,y1);
}

}

void rollover() {
if(mouseX< radius && mouseY<radius) {
text(radius, x, y+10);
}
}

// This method is called automatically every loop
// because we have registerMouseEvent(this object)
void mouseEvent(MouseEvent event){
if((selected == null && isOver(mouseX, mouseY))
|| selected == this){
switch(event.getID()){
case MouseEvent.MOUSE_PRESSED:
selected = this;
break;
case MouseEvent.MOUSE_DRAGGED:
x = x + mouseX – pmouseX;
y = y + mouseY – pmouseY;
break;
case MouseEvent.MOUSE_RELEASED:
selected = null;
break;
}
}
}
}

Final Project Proposal

Visualization of Bio networks

For my final project, I intend to make a system that makes it possible to map experimental data sets onto a dynamic visualization that lends itself to user control and manipulation. The tool is mainly for scientists- computational biologists to be more precise. The existing systems in use are VANTED, Kegg Pathway,  Omix and Pathway Studio. These offer a variety of standard visualization solutions. I am trying to conceive of a way of doing this more aesthetically without losing out on the scientific feel of the data. Also, I need to figure out the right amount of user control desirable for this project- OMIX for example lets users manipulate the code to produce desired visualizations while another produces a static image.

Sketch sample-

I am also grappling with issues regarding representation. What is the best way? Is there a best way at all? For the past two weeks I have been spending more time reading than on the code to understand the ways in which one might think about data and the contexts in which they may be used. I have also been looking at other scientific data visualization projects online. Here’s a quick biblio.

1) Jer Thorpe – A new view of the galaxy - http://boingboing.net/2011/02/08/a-new-view-of-the-ga.html

2) Visualizing the structure of Science – Benjamin Vargas Quesada

3) Visualizing data – Ben Fry

MIDTERM- BioBreakdown

My midterm project is the first step towards my final project. The project idea is the result of a friend’s rant about biological computational data visualization. First, a lot of them tend to be ugly and use strange colors. Second, the user controls little of the visualization once it is produced.

My program enables the user to feed data out of a computational experiment and create a basic visualization that shows the relative production of different elements by way of size. The user may drag these around the way it makes most sense to them or their experiment.

The next step for my project is to simulate the mechanism of biological action. This means dealing with many more elements and figuring out complex relations between them. For now I have worked with fake data. A critical next step is to get familiar with the real data and the processes. My friend is excited about using it!

Multiply Numbers¬†http://www.openprocessing.org/visuals/iframe.php?visualID=40670&width=900&height=450&border=true“> – This doesn’t seem to be working on the web- please copy the code and run!

And another – http://www.openprocessing.org/visuals/iframe.php?visualID=39693&width=400&height=400&border=true“>Not so crazy balls made on Processing. Check it out here-

http://www.openprocessing.org/visuals/iframe.php?visualID=37851&width=400&height=400&border=true“>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: