A data visualization of drug usage in the US
The goal of this project is to create a visualization for the purpose of persuasion: the visualization must 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. TThe result of our work is the Design for Persuasion visualization, a 4-minute story-based video.
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
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
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!
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.
EVALUATION
Our work 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.
Our work 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 is “I Like” was that the data set chosen lend itself well to the problem at hand.
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.
Originally published at medium.com on September 28, 2017.
