Variation Viewer: genomic and proteomic data visualization


*** After two years of development, a public version of this project has been released together with a publication in Oxford Bioinformatics. This portfolio entry is focused on the original idea and the design rationale of the project.

This project has also been featured on several local and international newspapers and research portals such as Amazings NCYTAmeliaRueda, CRHoy and VINV (Research Portal of the University of Costa Rica).***


For my graduation project, my teammate Verónica Alfaro and I worked with the bioinformatics company Indromics to redesign data visualization for proteomic and genomic data. We focused our work on breast cancer related proteins because it's one of the most deadly cancers and its research is alive and thriving. This project was mentored by Ph.D. Franklin Hernández-Castro and advised by Ph.D. Allan Orozco.

We worked for four months doing research on biochemistry, interviewing experts and potential users of the final application and analyzing possible ways to completely redesign the way researchers interact with this data. (For more information about the development of this tool, please visit my blog).


In the end we designed a scalable, flexible and intuitive visualization built on top of JavaScript, d3.js and 3VOT, (a framework for JavaScript applications based on Spine). The back-end implementation and data architecture was the result of collaborative work with Computer Scientist Carlos Cruz.

Final layout with one protein selected.

Final layout with one protein selected.

The design process involved interviewing several cancer and protein specialists from different institutions and companies in order to understand user needs and design requirements. We then drafted and created prototypes for three different conceptual proposals.

Selected concept

Selected concept

The tool fetches real data provided by the European Institute of Bioinformatics and in real time from the cloud. Thanks to CSS3 and d3.js, we were able to add beautiful SVGs, transitions and visual effects to the application, making the user experience enjoyable, intuitive and highly interactive.


Face to face comparisson of previous visualization tool using the same set of data. Click to enlarge.

The current application can be viewed here. Please be advised that the amount of data for some proteins is large and it might take some time to load. 


Shared credits for original project: Research, DataViz, UI & UX Design: Antonio Solano and Verónica Alfaro // Data architecture and dynamic JS application: Carlos Cruz. Special thanks to Luis Ruíz.