D3 wiz - HealthHackAu2013/wiki GitHub Wiki

Team members

Problem Owner

Jarny Choi
Walter and Eliza Hall Institute
[email protected]

Product Development Team

The Problem

Jarny, a cancer researcher at the Walter and Eliza Hall Institute, is having a problem representing his data visually. The information he is trying to display is the relationship between genes in some context using graphs. The graph consists of genes represented as nodes and lines signifying an interaction relationship between the genes. Often the graphs are visually complex, containing too many nodes and connections to effectively convey relevant information, and Jarny can't read them very easily.

Figure 1. Visually Complex Gene Graph Image of Complex Gene Graph

Figure 2. Gene Relationships with Interesting Clusters Image of Genes Relationship within hematlas, celltype (95)

The Solution

Our Team is developing a Web application aimed at biologists that are currently generating a static graph to visualize the relationship between specific genes within a cell. The web application adds useful analysis features to the graph such as zooming in and out of critical sections, as well the ability to change the amount of gene data presented. Functionality is provided through software filters available to the user via standard web controls.

The implementation takes advantage of current web visualization technologies D3 and SVG. The two technologies operate on the presentation layer of the application and allow a data driven approach to visualize research data. The tool prototype follows a standard 3 tier software architecture design, HTML, SVG and D3 power the user interface, JavaScript drives the application logic and JSON comprises the data layer and integrates research data to the tool. The final product for the HealthHack event showcases one potential filter powered by D3.

To summarize the prototype can:

  • Load a data set into the web tool.
  • Generate a graph of genes and how they relate to each other.
  • Pan and Zoom around the graph
  • Filter out unneeded genes from the graph

Application/Relevance

The dynamic additions to the visualization of gene data, are hoped to improve biologists to better present their research work, and to have greater control over what information is displayed.

An additional feature to note is the standardization of data used for graph generation to allow an easy entry to the tool for researchers not familiar with the web application.

Datasets

The datasets have been generated by Jarny's internal process and are currently a part of the git repository.

Links

Tech stack

Tradeoffs/analysis

Things that the team loved:

  • Completing main features, like zoom, pan and filtering.
  • Working on a project stress free
  • Learning D3 :-)

Things we could have done better:

  • Known the D3 technology from a programmers perspective.
  • Had an experience web application developer.

Future functionality

Features of the tool that would have been a nice inclusion:

  • The ability to collapse and expand nodes with mouse clicks.
  • Testing of very large data sets, that produce unreadable graphs.
  • The ability to load data remotely through a web portal
  • Additional filters.
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️