Two Approaches to Data Visualization —Understanding and Persuasion
Our task for this project was to find a data set and create two different types of visualization with two different end goals. The first type is visualization for understanding. This type of visualization is often a collection of basic charts and graphs. The goal is to present the data in an in-depth and unbiased way. The second type is visualization for persuasion. This type of visualization is less structured, with no obvious way to implement. The goal is to present the data in a way that can create powerful impacts on viewers.
Let’s start with some images of our final product. Our chosen data set is Drugs by Age by fivethirtyeight. The first image is our Design for Understanding visualization, and the second image is from the Design for Persuasion visualization.
DATA SELECTION
The first step that we took in this project was exploring the various data sets that we had at our disposal. After scouring many different sources of data sets, we settled upon the Drugs by Age data set by fivethirtyeight.
We settled upon the Drugs by Age data set by fivethirtyeight
The data in the dataset is very clean, thus saving us some time processing the data. Besides, the theme of the dataset is evoking and the data is intriguing, thus providing us a lot of freedom to create both informative graphs and impactful visualizations.
DATA ANALYSIS — STORY FINDING
Design for understanding. Keep it simple!
Working on the clear communication design, our first goal was to identify which information would be interesting enough so that our viewers want to explore our graphs when they looked at them. We decided that we would focus on making three separate graphs which would highlight the different features of the data set.
Design for persuasion. Make it emotional!
We paid special attention to two types of drugs — alcohol and marijuana. First of all, they are among the most popular ones. Moreover, the frequency and percentage of usage for these two drugs are very shocking. Besides, there are some recent concerns about the usage of alcohol and marijuana in college, which is a very familiar topic to us. We realized that we could exploit these statistics, since they are not only shocking, but also resonate with current social issues. Therefore, if we focus on this aspect of the data set, we can create very compelling visualizations.
We realized that we could exploit these statistics, since they are not only shocking, but also resonate with current social issues
Having been inspired by the visualization “Fallen of World War 2”, the first idea that hit us was to try to achieve a similar emotional effect. Even though we discussed a few other options, we were most enthusiastic about our very first idea, thus we decided to use it.
BRAINSTORMING AND SKETCHES
Design for understanding
First graph — Looking at the data, it was obvious that alcohol and marijuana were the most used across each age group. After seeing that trend we started to sketch the various ways that we could display this information. We thought of the classic grouped bar chart, as it allows viewers to both view and compare the percent use of alcohol vs marijuana.
Second graph — We then decided that we should also show the other drugs in another graph. Our first inclination was to use the same grouped bar chart as before. However, when we sketched it out, we realized there would be too many bars per age because there are 11 different drugs. We then switched to use a line graph as the lines allow viewers to both identify which drugs were prevalent and see what the percent use was. We sketched it up on the whiteboard and agreed that we liked the idea of highlighting the trends.
Third graph — At this point, we had every drug that was provided in the data set presented in a graph. Our next idea was about compiling the data and making some assumptions. We went through the drugs that were not alcohol or marijuana and sorted them into either prescribed and non-prescribed. We then summed up all of the percentages for each drug by age, even though this is inaccurate due to some respondents being users of more than one drug. We recognized that this is a problem with our data set, but felt it was irrelevant due to the fact that this issue would be consistent across age groups. Since we were comparing two sets of data again, we decided to try out the bar graph, and after sketching it out we decided that we would proceed with that design.
Design for persuasion
Due to the choice of our visualization method, the simple 5-design-sheet method is not suitable to our project. Therefore, we have to modify the 5-design-sheet method so that it is compatible with our project.
Story building — Our medium of choice is very similar to that of a movie. Therefore, it is necessary that we know precisely what we want to convey. As such, we need to come up with a thesis. Since we chose alcohol and marijuana because they are one of the most used substances in college, we decided that our thesis would focus on this issue. We want to show to our audience that both alcohol and marijuana are heavily used throughout school years and into college, reaching a number which can be very shocking to most people, even to ourselves as college students.
We want to show to our audience that both alcohol and marijuana are heavily used throughout school years and into college, reaching a number which can be very shocking to most people, even to ourselves as college students.
With this thesis in mind, we started building our story. We made a few sketches to explore various options.
Brainstorming — We started working on our first design sheet, which is brainstorming. For this process, we threw everything we can come up with into a single design sheet. Unfortunately, a single design sheet is not enough, so we made a few of them.
Initial sketches — Having the brainstorming sheet, we started develop our initial sketches. This process is different from the standard sketching process, since sketching a movie plot with all the scenes requires us to create an entire storyboard. However, we were not accustomed to creating an entire storyboard, thus we compromised and worked with the sketches we created. We refined a few elements from our brainstorming process and combined them with our plot sketch to create our initial sketches.
User feedback — Obtaining feedback from our friends and classmates is a critical step of our design. We received some very helpful feedback from our friends, which prompted us to modify a part of our design. While we did not heed all the critiques we received, they were certainly very helpful for our design process. These are some of the most critical feedback we received
- We should reduce the number of graphs in the visualization and replace them with simple bar charts so that the visualization has a feel of simplicity and unity.
- We should add in a section about heroin, as it is one of the more prominent social issue right now.
- We should add some images to our visualization to increase the emotional effect.
- We should make our visualization shorter. The original intention is 5 minutes.
- There should be a slider to jump to any specific time. There should also be pause and restart buttons.
Final design — It’s difficult to have a concrete prototype for a movie, as a movie is a sequence of images, not a collection of images and interactions. Therefore, at this step, Instead of a prototype, we created a storyboard: A series of images detailing the key scenes of the visualization.
VISUALIZE IT!
Design for understanding — Graph, graph and graph
After a couple iterations of sketching and developing the final sketches as seen above, we moved onto the platform we would use to create the visualizations. We decided to use Vega/Vega-Lite to create them. Right off the bat we had a large amount of trouble using Vega to import our .csv file of data and properly parse it. After many hours of trying and failing to convert the .csv files into the appropriate json array format, we wrote a python script to perform that task.
The output file was populated with arrays which we easily copied and pasted into Vega.
We created our graphs based on the examples provided on the Vega website. The group bar chart that was used in the example was a horizontal bar chart which we managed to use to present our two bar charts. We planned to make one of the bar charts as vertical for aesthetic appeal as a user looked at our page, but we were unable to figure it out.
We also based our other drugs chart off of the line graph example that was provided for Vega. We were happy with how it presented our data and there were clear trends that were being presented.
Design for persuasion — making a movie
The coding, as expected, is the most time consuming part of the project. In the end, we spent around 45 hours to build the complete visualization. We use Javascript as the base programming language, similar to most other visualizations. We used anime.js to implement the smooth animations and transitions because this library has excellent documentation and examples.
Two of the most important design decisions we have to make are the background music and the color scheme. They are critical elements which can decide the overall mood of the visualization. There are some excellent background musics available online. The one I used is When hope disappears. As for colors, I chose a dark color as the main color and use only grey-white as highlight color for texts, as this combination has a depressing mood.
Another key element which takes up a lot of time to implement is animations. Eye-pleasing and beautiful animations are what hooks viewers to a visualization, allowing us creators to convey our message to the fullest. Therefore, extra care must be put into making animations.
We also we made a few changes to our design. Some of the design elements just doesn’t feel right anymore; some others are too difficult to create in a short amount time. Eventually, our final visualization is slightly different from our original idea, but we are very happy with it nonetheless.
COMPARISON BETWEEN TWO APPROACHES
Looking at our static bar charts and then watching our video representation, you can see a pretty stark contrast. The first is clear-cut and to-the-point; it tells you what you need to know, and doesn’t beat around the bush. It wouldn’t be shocking to find something similar in a scientific paper or report on drug use.
The first is clear-cut and to-the-point; it tells you what you need to know, and doesn’t beat around the bush.
The latter obscures some of the finer nuances of the data, but really tries to pack an emotional punch. This one you could imagine being a flashy part of some kind of anti-drug campaign, trying to send a message about drugs’ effects on youth.
The latter obscures some of the finer nuances of the data, but really tries to pack an emotional punch
If you’re trying to argue a certain point, leaning on the persuasive visualization is going to be very tempting, and sometimes can even be the best choice. However, it is important for both the author/presenter and the viewer to understand that intensely persuasive or overly manipulated visualizations can be extremely misleading, and can actually hurt the argument being made.
USER FEEDBACK
The format in which we were able to get design feedback is Stanford Design School’s “I Like, I Wish, What if”, which can encapsulate all of the criticisms a person has about design in a simple and efficient manner.
The general consensus from our user feedback in the “I Like” section is that people seemed to really resonate with our persuasive visualization, and it was very professional. Another common response in “I Like” was that the data set chosen lend itself well to the problem at hand. Most people also expressed that they prefer the line graph to the double bar graphs in the design for understanding section.
In the “ I Wish” section, most people suggest small changes for the bar graphs, such as changing the colors, making the graphs vertical, or changing the layout of the website. Another wish is more interactivity in the understanding visualization, so the data can be more easily seen. For the persuasive side, the main “I wish” is that the animation took less time, or could be paused or fast forwarded. Currently the video simply plays through, which seems to have been its biggest criticism.
The final section, “What If”, was our section’s least populated of the three feedback sections. That being said, most of these feedback responses are brought up in the “I Wish” and “I Like” sections of the feedback form. The most critical feedback is that the visualization is a little slow to get to the point.
