Visualization for Comparative Genomics
Role: Designer
Team: 2 Designers, 3 developers
Project Duration: 1.5 Months (April 2018)
Client: Genomics Professor from Purdue University
Project Overview
In this sponsored university project, my team and I developed an analytics tool using genomic data provided by our sponsor. I was one of two designers and was involved in all of the early ideation and brainstorming of concepts. I also worked on the interaction and animation prototypes that were later developed. The study describes the needs of bioengineers with Comparative Genomic Analysis of 60 Mycobacteriophage Genomes: Genome Clustering, Gene Acquisition, and Gene Size. We ultimately developed three concepts that could be used to analyze future data.
Problem Statement
A primary question for this project was: How do visualization and information design affect Comparative Genomic Analysis outcomes? We will draw on our research from computer graphic technology and visual design based on environmental psychology for data vis, accessible design, and green design to offer a unique perspective on maximizing the efficiency of Genomic Analysis. By improving bioengineer’s ability to be more active, staff time is freed up, giving them more opportunity to engage with more information and datasets.
Proposed Solution
Using the Heatmap
Interact with the live website
Interact with the live website
- Data processing to get the GC content comparisons among the sequencings
- Encode the differentials in each cell to downsize the long sequencings
- Use different colors saturations to represent the proportions
- Color the base sequencing in an identical way
- Animate the processing the indicate the orders
Using the Parallel Coordinate
Interact with the live website
- Data processing to get probabilities of the differentials.
- Encode the sequencings in different coordinate axis.
- Use different colors to represent the probabilities.
- Hover effect to visualize the corresponding amounts of the differentials.
