Visualizing Literacy Rate Disparity
By: Yash Mittal
Tags: Accessibility, Data Visualization, Literacy, Human Centered Design, Sketching

Our first graph is one that shows gender disparity in literacy rates across the world, which we felt was the first thing we should display because it is broad and encompasses the general idea of gender disparity. Second, we show the gender disparity in different regions of the world, which allows our user to see gender literacy disparity with a little more regional specificity. On the third and final graph, we have a scatter plot that shows each country’s literacy rate disparity throughout time so our user can see how countries stack up against the rest of the world in terms of gender literacy disparity and how they have been progressing toward parity. We hope that through our Tableau dashboard, people will be able to interact with our data and draw clear conclusions about gender literacy disparity in the world and what it means.

— Using JQVMap for Animated Maps

Our team wanted to challenge ourselves by using a tool other than Tableau for the design for persuasion. Our goal was

To show that gender disparity in literacy is decreasing across the world and that less developed regions exhibit a relatively high disparity

In the brainstorming phase, we decided that a world map would be a perfect way to show this idea. Our World in Data has some mesmerizing world maps in their blog posts on literacy rates, so we started looking for tools to recreate those visualizations. We ended up using JQVMap, a JavaScript library with a less steep learning curve compared to D3, to create a world map as shown below. The darker shades represent a greater disparity in literacy rates of males and females. Initially, we were using the default blue color scheme but we later changed it to an orange-red scale. We made this choice because red is often associated with negativity whereas blue is associated with coldness, as supported here.

Evolution of our visualization for persuasion

All of us agreed that we wanted an animated map with the colors changing automatically as we traveled through time. We also added a button to let one pause and resume the animation whenever needed. After the first few iterations, we asked some of our friends for feedback. They suggested that we add zoom controls so one can closely observe a specific region or country. Some also told us that they would have liked to know the exact literacy rate disparity for a country. To better the user experience, we added functionality to show a tooltip when someone hovers over a country.

— Results and Feedback

We received a lot of feedback from our peers during an in-class demo day that allowed us to make some instrumental changes to our design. The changes requested were not drastic so there wasn’t any reason for us to overhaul the design. The suggestions targeted at tweaking our visualizations to be more intuitive and easier to draw conclusions from.

“I wish more context was provided. It’s an interesting subject.”

“What if they kept track of countries in the scatter plot?”

Most of the feedback had to do with either the color scheme and other visual changes or wanting to track specific countries throughout the visualization. Others requested a narrative to go along with the graphs in our dashboard. Although these changes took some work, they were not too intensive and allowed the same visualizations to look and feel better.

Second Sprint — Making amends

— Design

A layout sheet to guide our dashboard reorganization

After the demo day, we had another week to make changes to our visualizations. We started off by solidifying a narrative to tie all three graphs in our Tableau dashboard, which we took inspiration from one of the other groups during the demo day.

Similarly, one of the other comments we got was including an ability for a user to track individual countries on the scatter plot. We were unable to do this on our own, so we reached out for help from Ken Flerlage, who works as a Business Intelligence Architect at Bucknell University. He was able to help us with the problem. In addition, he gave us tips on improving other graphs we had.

Thereafter, we made a few UI tweaks to our world map visualization. The biggest modification was splitting the legend into a limited number of categories. Prior to this, the map had a gradient scale as its legend which made it difficult for our users to distinguish between the many shades of orange and red. To fix this issue, we made use of the color palette YlOrRd specifically recommended for cartography here.

A large number of splits has the same problem as a gradient. So we stuck with only four splits with an additional one to represent unavailable data.

— Style

We made some changes to the style of our visualization as well, in order to make it more appealing to the users. We wanted an aesthetically pleasing dashboard to scroll through, while avoiding going “over the top” with color and animation. We decided to use the sans-serif typeface Roboto because it is elegant and undistracting. As for color, we implemented the “Traffic Light” color scheme since these colors were easily distinguishable. We also decided on this color scheme because color blind individuals would be able to effortlessly differentiate between the colors. (We used this colorblind simulator to ensure that each graph is distinguishable for every type of color blindness.)