Data Visualization
COLLECTION
A collection of static and interactive visualizations that show relationships and connections between data.
The Race to Treat Global Diseases
DATA VISUALIZATION
Designed for a scientifically-literate audience, this graphic visualizes trends in global health development in the 21st century.
TOOLS
Rawgraphs; Adobe Illustrator
I compiled data on the R&D status of recent health products, global burden of disease, and global health expenditure from the World Health Organization (WHO) and Institute of Health Metrics and Evaluation (IHME). It was a challenge connecting the three segments; I became inspired by patterns in nature and shaped the data so it resembled the way raindrops fell and collected in pools. This design made conditions with a greater burden of disease more salient.
DISCLAIMER
Data for injuries and conditions listed outside of the categories Non-communicable Diseases, Infectious & Parasitic Diseases, Nutritional Deficiencies and Reproductive Health are excluded. Products with an unknown R&D phase are excluded.
REFERENCES
World Health Organization Global Observatory on Health R&D & Springer AdisInsight, Health products in the pipeline from discovery to market launch (Nov 2020) https://www.who.int/research-observatory/monitoring/processes/health_products/en/
Institute of Health Metrics and Evaluation, Global Burden of Disease (1990 & 2017) http://ghdx.healthdata.org/gbd-results-tool ; World Health Organization, Global Health Expenditure Database (2017) https://apps.who.int/nha/database/Select/Indicators/en
Visualizing Research Clusters
INTERACTIVE DATA DESIGN AND DEVELOPMENT
This interactive data visualization allows undergraduate students and other website visitors to discover, explore, and compare research faculty at a glance.
Department of Biology, University of Toronto Mississauga
CLIENT
Figma; HTML, CSS, D3.js
TOOLS
As the primary designer, I collected data from faculty and refined the concept design created by Abeeshan Selvabaskaran. I supported the primary developer, Jerrie Feng, by learning D3.js and developing the Network, List, and Card views. You can view the interactive visualization here or using this link.
RESEARCH
Surveys were used to identify areas of research. Faculty members provided 49 research keywords in total, which I grouped and narrowed down into 14 areas. I consulted four faculty members to ensure they represented the department overall and were comprehensible to our end-users.
These 14 areas fell naturally into 3 clusters as I developed a force-directed graph for the Network View using D3.
DESIGN
I used colours associated with the departments (e.g., blue for Cell Biology, green for Evolutionary Biology) so that clusters would be recognizable to users. Accessible colour schemes were generated with ColorBrewer and checked against a color-blindness simulator.
Barcode View: Research identity
Each bar represents a research area. Users can see a faculty member’s research clusters through the distribution of colour in the barcode. Users can also hover over a bar to view all faculty who share that bar. These features allow users to compare and contrast faculty at a glance.
Network View: Research connectedness
Users can hover over nodes to view the research areas associated with a faculty member (and vice versa). Users can also drag nodes to shift clusters around the screen. This interactivity encourages users to explore research connections and groupings.
Card and List View: Research profile
Users can click on a node and learn about each faculty member in more detail. The list view was created to display information from the card view more accessibly.
DEVELOPMENT
We built the visualization using D3.js. Prior to development, we created a high-fidelity Figma prototype with refined UI elements and interactions— we used this as our roadmap and as a tool for soliciting feedback from our client.
CONCEPT DESIGN
PROTOTYPE
FINAL PRODUCT