Autoimmune Hepatitis (AIH)

Autoimmune Hepatitis (AIH)

AUTOIMMUNE HEPATITIS

Visualizing the links between 280 people to a set of 50 most discussed topics about AIH

OVERVIEW

Autoimmune Hepatitis (AIH) is a rare and incurable non-viral disease which affects the liver. Due to its rarity, support for patients with this disease is often provided over social media platforms to patients who ask health and medical questions about their disease and how it affects them.

OUR GOAL

Our task was to visualize links between 280 people who actively spoke about AIH, to a set of 50 most frequently discussed topics. By understanding underlying patterns between the patients and the health topics they discuss, it is possible to gain insight about the issues AIH patients generally face. This tool can also extend to act as a platform to create awareness among those who are inexperienced with the disease and can contribute to improving the conditions faced by every patient who is affected by it.

THE SOLUTION

See the visualization live in action

THE DESIGN PROCESS

Since our visualization’s main objective was to effectively convey the links between users and the topics they talk the most about, we looked into different forms of graphs and node-link representations. Initially, we considered implementing a bipartite graph but decided against it as it would not be effective to use it to show links between 50 topics and 280 users. We then decided that the best way to represent this data will be with node-link clusters, topics, and users being different clusters with different shapes. Size and color were used to encode the popularity of the users and the topics. We implemented a similarity matrix to represent the similarity between the topics.

INITIAL SKETCHES

We came up with a few sketches for the visualization, we thought of making use of a bubble chart, a node-link diagram, and a bipartite graph.

VISUALIZATION VIDEO

The video provides an explanation of the visualization and how does it benefit the target user

RATIONALE BEHIND THE DESIGN CHOICES

Listed below are the reasons specifying why we did, what we did.

  1. To minimize scrolling as much as possible, we decided to place the cluster on the left and the information pertaining to the node(s) of interest will be displayed on the right.
  2. To have the maximum amount of screen space to display the information without cluttering the screen and causing a cognitive overload to the user, we used an overlay to have the description of our data and a link to the documentation.
  3. Information on the cards is displayed in a nested manner and not all at once for the same reason.
  4. Tooltips are used to get a quick preview of the node’s information without having to click on it.
  5. On the similarity matrix, hovering over a particular clustered cell will highlight the topics to give feedback to the user of their position on the matrix.

KEY INSIGHTS

Listed below are some of the insights we came across while working on the visualization.

  1. User – U240 is the biggest user bubble with the highest rank and most number of comments made and received so he must be the Physician

2. There were a few topics that were repeated:

  • Complementary-alternative medicine (2)
  • Diet interacting with medications (2)
  • Disease course-monitoring-testing(5)
  • Goals of treatment (4)
  • Hope and support – General (2)
  • Side effects due to steroid drugs (2)
  • Talking to the doctor (2)
  • Using last resort medications(2)

Despite the topic name being the same, they have entirely different users talking about them.

3. Because of the above reason, topics with the same name are in different clusters.

4. Topics with the same name have different keywords

TEAM MEMBERS

Anagha Varrier

Arvind Santhanam

Aziz Khilawala

Chandra Sekhar Sastry

MY CONTRIBUTIONS

Designer & Developer

Technologies used – HTML, CSS, JS, D3.js & PapaParse

DURATION

4 weeks

DO CHECKOUT MY OTHER PROJECTS

2015 American Community Survey

2015 American Community Survey

US CENSUS BUREAU

Visualizing the spatial distribution of different phenomena across the United States with a detailed look into each locality.

OVERVIEW

For this project, we had to analyze the 2015 American Community Survey (ACS) dataset. The ACS dataset is annually compiled by the US Census and designed to provide broad demographic and socio-economic characteristics of the US population. We looked at a comprehensive set of variables (approximately 66,000 variables) covering all US areas with at least 65K residents. We had to concern ourselves with a subset of those 66K+ variables representing basic demographics (age, sex, and race), income, housing, and other indicators.

OUR GOAL

Our goal was to visualize these variables using a combination of choropleth maps and other charts (e.g., histograms, bar charts, pie charts, and/or scatterplots). The overarching goal of our visualization was to show the spatial distribution of the phenomena (e.g. the percentage of people under the age of 18) throughout the US while enabling a detailed look into a locality (by showing the population age distribution for a particular state, for instance). Furthermore, the visualization should allow the user to investigate associations between variables (e.g., poverty-level and educational attainment), so as to enable cause-effect analyses.

THE SOLUTION

See the visualization live in action

THE DESIGN PROCESS

Exploring the dataset

Looking more closely at the 13 variables, we noticed that there was not a system in place for how the variables were organized. For example, some variables had a couple of first levels, but others went straight into a second level or third level. We carefully went through all data sets and variables and organized them according to how many levels were in each variable, as well as which subset variables were in each level.

breakdown of the 13 variables

How to visualize the data effectively?

We thought that an accordion style side menu (located on the left side of the screen) with all thirteen variables would be best for the user to navigate through all the 13 variables and its sub levels. Taking into consideration about which graphs and/or maps would best represent the data, we decided that the number of pie charts should equal the number of levels each variable would have. The main choropleth map would change per the pie chart selected (i.e., if ‘male’ is selected, the total male population displays on the main choropleth map, and a new pie chart will appear under the original pie chart to showcase its sub levels).

Deciding the color scheme

There are usually six to twelve main colors that are easily distinguishable with each other. However, there are many sub colors that are not completely saturated or different in luminance. We decided that we would use as many of the non-saturated colors for the first and second levels of each variable, and then if needed we will expand our color palette to different saturations of one color.

FINAL SKETCH

VISUALIZATION VIDEO

The video shows the working visualization and what is it about. It also describes how this visualization will benefit the user to learn more about the American demographics.

TEAM MEMBERS

Aziz Khilawala

Jessica Lee-Despard

Onkar Borgaonkar

Swapnil Chandra

MY CONTRIBUTIONS

Design & Development

Technologies used – HTML, CSS, JavaScript, Jquery, PapaParse & D3.JS

DURATION

4 weeks

DO CHECKOUT MY OTHER PROJECTS

US Energy Information Administration

US Energy Information Administration

RESOURCE UTILIZATION

Visualizing the production and consumption of energy resources around the world.

OVERVIEW

In this project, we looked at energy production and consumption data from around the world. We used a dataset compiled by the US Energy Information Administration. This dataset included data on the energy produced and consumed by most world countries between 1980 and 2012. The amount of energy was broken down by different energy types (petroleum, renewables, natural gas, coal, electricity). Additionally, the dataset included other environmental indicators and social indicators, including CO2 emissions and population sizes.

OUR GOAL

The goal of this project was to look at how the above variables have been changing over time and to try to look for relationships between energy consumption rates, population sizes, and carbon emissions for different countries and/or world regions.

VISUALIZATION VIDEO

The video explains the visualization and how to use it. The complete working project with additional design document can be viewed at www.azizk.design/d3

DO CHECKOUT MY OTHER PROJECTS

Code Space

Code Space

CODE SPACE

A glimpse over a few code snippets

QUOTES ON DESIGN

A random design quote generator. This snippet is part of FreeCodeCamp’s intermediate front-end projects. One can even tweet the quote by pressing the tweet icon. The code is available to use freely on codepen.

See the Pen Quotes on Design by Aziz Khilawala (@azizkhilawala) on CodePen.light

ANGULAR JS PHONE GALLERY

Macbook

A phone gallery concept created using angular js. The project can be viewed live at http://azizk.me/Angular-Project/app/

The code is available on the GitHub repository at https://github.com/azizkhilawala/Angular-Project

ANGULAR JS & FIREBASE CONTACT LIST MANAGER APPLICATION

Macbook

A personal contact list manager application created using AngularFire. The project can be viewed live at http://azizk.me/Contact-List-Manager/app/

The code is available on the GitHub repository at https://github.com/azizkhilawala/Contact-List-Manager

RCI ENVIRONNEMENT – WORDPRESS CHILD THEME DEVELOPMENT

iMac
iPad
iPhone 5

Responsible for development of a custom WordPress child theme for the client RCI Environnement. I coded the design mockups in WordPress using PHP, HTML, CSS & JS.

The code is available on the GitHub repository at https://github.com/azizkhilawala/RCI-Environnement

DO CHECKOUT MY OTHER WORK