From CS294-10 Visualization Sp11

Jump to: navigation, search



Story Board.jpg

A few months ago my husband and I collaborated on a project to analyze and visualize the relationships between terms in peer reviewed neuroscience literature. My husband is a Post Doctoral Fellow in Neuroscience here at Berkeley, he was the scientific lead, and I was the technical lead. The result of this collaboration was a website for exploring this data with a static force-directed network graph of the association of terms. We assume that the more times two terms co-occurs in the peer reviewed literature, the higher the probability that those two terms are "associated." In practice this assumption works quite well, automatically clustering known relationships in structures in the brain ( the pre-print publication for more details on this method ).

For this assignment I thought it would be interesting to add some interaction to that original static network graph.

The sketch to the right shows the basic idea for the interaction. Using the exiting key, I wanted to add the ability to filter nodes by category by clicking the category in the key. Second I wanted to allow visitors to highlight the connections between nodes by hovering their mouse over a particular node, in this way they can selectively highlight certain areas of the data that are of interest. Third I wanted to display a histogram of the distribution of probable association between each term and the search term, to give the visitor an overview of the "connected-ness" of a particular search term, and fourth I wanted to show the relationship of terms in the network graph and the histogram by linking the highlighting of particular nodes to the corresponding bars in the histogram.

Final Interaction

The final differs slightly from the sketch in that it does not allow users to highlight all of a particular category by clicking on the category's name in the key. Similarly I had sketched a way to expand and contract the number of connections show on the graph using a slider in the bar graph, but this proved too challenging for this assignment. I also added the ability to "re-center" the graph on a particular search term by double clicking the label for that term (I had some difficulty attaching double-click event listeners to the nodes themselves because it was not supported by the library I was relying on)

Please view the final visualization here:

http://www.brainscanr.com/Search?term_a=top+down+processing (best viewed in Chrome, Firefox, or Safari)

Source Code

I can provide the source code if absolutely necessary, but it will be very difficult for you to run it locally. The visualization is part of a website run with Google App Engine, and the data used to drive the visualization includes over 200,000 connections (it takes about 6 hours to backup the data from the server, and I have yet to successfully restore the data, I don't know how long that would take). To generate the connections yourself takes a couple of hours when run on Google's servers, but you would first have to setup another app engine instance, enable billing, and pay about a $1.50 each time you wanted to update it. Here is a link to the github repository for the source if you're really interested: https://github.com/jvoytek/pubmedbrain

That being said, the part that you're probably most interested in is the JavaScript used to generate the visualization and not the back-end that is most of the difficulty in running this locally. You can see all of the JavaScript used to generate this visualization in the following files:

Other JavaScript Libraries Used


I spent approximately 15-20 hours developing the concept and implementing this piece of interaction. The most challenging part was to get the two types of graphs to link together since this type of interaction was not supported natively by the JavaScript InfoVis ToolKit. To accomplish the linking I had to explore the objects created by the library in detail to find methods for identifying individual nodes and modifying them after the visualizations had already been rendered.

Additionally, I have still to figure out how to layer the nodes on the graph appropriately. It would be better if the root search term node always rendered on top of the connecting lines.

[add comment]
Personal tools