SI 649 Communicative Visualization Project
This post is built on the previous static report because my interactive version is based on my static design. To enhance the viewing experience, I bolded the most-related sessions in the following Table of Contents for the Interactive version.
Table of contents0. Deliverables
1. Learning Objectives
2. Design process
2.1 Research
2.2 Static Version
2.2.1 Brainstorming
2.2.2 Ideation
2.2.3 Iteration
2.2.4 Design Decision
2.3 Interactive Version
2.3.1 Brainstorming
2.3.2 Iteration
2.3.3 Design Decision
3. Evaluation
4. Appendix
Deliverables of the Interactive Version:
- Hosted website:
2. Code and how to run it
3. Video
Learning Objectives
With the help of visualobjectives.net, I developed two learning objectives regarding this visualization.
The first objective is that :
- The users will be able to explain the possible reasons for Norway’s success in the Winter Olympics.
The second objective, which I edited based on the feedback on my static visualization’s Learning Objective is that:
- The users will summarize important elements of Norway’s sustainable and successful sport culture.
I re-think about the second learning objective based on what kind of information and actions my visualization can provide users after they see my visualization. The previous version in the static visualization was users will learn to recognize important elements of sustainable and successful sport culture, which doesn’t that correctly describe the purpose of the interactive visualization.
Design Process
Research
At the beginning of the research phase, I spent lots of time finding different news reports on Norway’s success in the Winter Olympics. The purpose of browsing different news coverage is to avoid bias from one channel and also to find patterns among different news pieces (Appendix 1). In this phase, I also explored different datasets on Kaggle about the Olympics just to get myself familiar with the process of finding datasets myself and browse potential datasets to be used. At the end of the research phase, a clear path toward the project has emerged, which is about a story to tell the success of Norway’s sports culture and their stunning performance in the Winter Olympics.
Static Version
Brainstorming
Topic
In the phase, I jotted down multiple keywords from various sources of news that I have read to synthesize the critical information of Norway’s success. After I have gathered sufficient overlapping themes from different news articles, I went to visualobjectives.net to ideate different learning objectives that resonate to the keywords I have found. With the help of visualobjectives.net, I found two objectives that I feel inspired to and also correspond to the themes I collected: users will be able to explain the possible reasons for Norway’s success in the Winter Olympics; the users will learn to recognize important elements of sustainable and successful sport culture.
Visualization
I also explored a variety of websites that introduce different information visualization options (Appendix 2). The goal of the inspiration gathering process is to stimulate me for as many visualization techniques as possible because my past experiences of visualizing data are still more limited in simple bar charts or line charts.
Ideation
I decided to start from a high-level overview of how I want to tell the story. I first drew sketches about the scaffold of the story and I realized that I wanted to use the narrative model of Martini Glass because the model closely caters to the two learning objectives I have settled on so far: I want the viewers to walk away clearly knowing Norway’s secrets to success in the Winter Olympics. In the peer feedback, I showed my teammates a diagram of my storytelling plan, and their feedback helped me to reflect more about building the connection between each visualization. Finally, the last takeaway I got from this phase is the datasets (Appendix 3) I want to collect to prove Norway’s success in sports culture. I was originally thinking about datasets on income and happiness. However, I realized I may need to gather more well-rounded proves.
Iteration
My first few attempts are more direct but lack variations because they are mainly bar charts. I directly linked good performance to ranking, which naturally led me to the use of bar charts to communicate Norway’s outstanding achievement either in sports or in social stability.
I also experimented with a few visualizations with Altair first, just to explore. However, after the peer feedback session, I decided to use Tableau for the sake of “rapid prototyping” so that I get to generate multiple visualization variations as fast as possible. The following versions are my experiments throughout the process. For the iteration of each chart, I needed to place all of the charts together to see how each of them work as a whole visualization. All of the visualization can also be accessed in a Google drive for better viewing experience (Appendix 4).
Phase 1: visualization movement and layout
The three visualizations above were the very first designs when I was just trying to play with the datasets I collected. I didn’t think of the design as a whole when I was immersed in each chart. However, I decided to redesign the color scheme after I put all of the charts together for a more consistent experience. In this phase, I was also experimenting with the layout of the whole visualization. Questions I asked myself in the phase include how I can guide viewers to follow the visual cue, which placement is more effective than the other.
Phase 2: data visualization variations and data ink ratio
The three visualizations showed my path in experimenting with the color and different types of charts. I found out I used too many bar charts, which makes the whole visualization heavy. At the same time, those bar charts don’t have great data ink ratio, according to Tufte’s principle, while the important information is not salient enough to be discovered.
Phase 3: details and variations on the layout
In the final phase, I mainly focused on the details of each chart in order to make every chart as easy to process as possible. I also tried to use a more defined layout (version 8) with different background colors. However, I decided not to proceed with that idea because I haven’t figured out how to make the exported images from Tableau transparent.
Design Decision
I want my final visualization to display the following criteria: clarity, easy and efficient, and I came to the final design based on helpful feedback from Professor Eytan during office hour. After numerous rounds of iterations, I also designed this visualization with the use case of individual display in mind, which means instead of placed in an article among lots of paragraphs as explanations, I want this visualization to be easily understandable by itself.
The version I finalized shows the most clarity among the rest of the versions in terms of conveying the learning objectives. From the perspective of users or viewers, this version is easy to read and understand after I eliminated redundant data ink of each chart. Also, this version is comparatively efficient in helping users grasp the key information because I increased the saliency of the most important information — Norway’s performance, so that viewers can absorb the key messages from this visualization in an efficient way.
Some major design changes I made in the final visualization includes changing the sequence of the potential reasons by placing the most relevant reason in the beginning, explaining the reasons more explicitly with more carefully written descriptions. Finally, visually speaking, I added dividers to help to guide users’ reading sequence and exhibit more parts of other countries in the world map to increase the contrast between Norway’s relatively small size and its proud Olympian performance.
Interactive version
Link to the hosted website or click the following block
Brainstorming
I decided to build the interactive version based on the static visualization to turn the narrative more into a story through the interactive technique we have learned in the class.
Based on the narrative of my visualization, I decided to use Idyll as my interactive tool because I found the design options Idyll provides is more cohesive to the nature of the story I want to tell than other languages or tools. Especially when I adopted the Martini Glass narrative model, the one-page scrolling feature and Scroller components from Idyll can further facilitate the interactive storytelling of my visualization.
To start, I drew some sketches to explore how I can present an interactive story.
Inspiration from other works
The following are some inspirations I saw from other visualizations. One is from Dremio elaborating on interesting stats from Winter Olympics, the other one is from NYC Data Science Academy on Olympics visualization in general.
Other inspirations I admire but didn’t adopt include one from Visual Cinnamon, who used D3.js to represent medals of different countries. I didn’t apply the inspiration mostly because of technical constraints –– I don’t know how to replicate this visualization in Vega-Lite or Altair.
Iteration
Phase 1: Turn the Tableau table into Altair and Vega-Lite
In the first phase, I tried to turn the original Tableau charts into Vega-Lite charts through Altair. At this phase, some constraints I met include the infeasibility of some visualization techniques in Altair that was available in Tableau, my ability and insufficient time to explore all of the possible options in Altair. For example, in Tableau, I could easily make a chart that’s composed of numerous randomly-located circles, but in Altair or Vega-Lite, the locations of the circle will follow the x and y-axis, at least based on my understanding.
Phase 2: Structure of the narrative in Idyll
In this phase, I was getting myself familiar with Idyll language and its components. After a bit of exploration, I decided to use Scroller as the main components to display the narratives to make information about every chart and its connection digestible and engaging. The benefit of using Scroller from Idyll is its exclusive focus on the contents so that it’s easier for the author to guide the attention of viewers or users to the current point of the narrative, which also corresponds to the Martini Glass model of my narrative.
Phase 3: Adding Interactions to Vega-Lite chart
In this phase, I was trying to add meaningful interactions to the Vega-Lite chart to compensate for the leading tone of the single-way narrative that I made with Scroller. To achieve my learning objective, I tried to make the interaction fun to enhance users’ impression. For example, in the following chart, I ask users to click the buttons to check how many of the athletes are Norwegian, American and Canadian. However, users will find out there are actually zero Canadian in the top 15 medal-winning athletes.
The following are examples of some variations of the interactive charts. There are some charts that were originally just variations, but I kept them in the final design because these variations work great together, such as the V2 and V3 in Medals per athelete.
Design Decision
I settled on the final version after several rounds of self-review and a few feedback from friends who have information visualization-related backgrounds. With the final version, I want to achieve the following criteria: expressive, effective, enjoyable and understandable. The current interactive version has ample conversational narratives as a supplement to effectively help viewers and users to understand the learning objective of the whole visualization. At the same time, I provided several different charts to let users interact with and explore around the topic, which expressively helps users learn more about Norway’s performance and secrets to success.
With a large number of full-page images of Norway as a background and informative narration on the top, the whole viewing process is more understandable and immersive than only displaying the charts. Also, each section is composed of supporting charts and full-page scroller with explanatory narrative, so that the information is divided as a bite-size level with transitions, which I hope will make the whole viewing experience more enjoyable and interesting. Finally, as for the charts, the exploratory interactions I added are meant to help users to find out interesting facts about Norway so that the learning objective can be more memorable. For example, the slider is helping users to see where Norway is ranked among hundreds of countries, or the buttons are allowing users to quickly compare Norway’s performance with other top medal-winning countries.
Evaluation
The goal of the evaluation is to understand whether they successfully achieve the learning objectives. To evaluate the expressiveness and effectiveness of the final visualization, I am thinking to have viewers or users to view this visualization under the context of use such as on Medium, Twitter, or a case study. Then, I can conduct a usability testing on different devices such as desktop and mobiles, and ask their feedback on my design.
Appendix
News
- Time: Norway Crushed the Competition at the Winter Olympics. Here Is the Tiny Country’s Secret
- The Aspen Institute: How Norway Won the Winter Olympics
- Guardian: ‘Born with skis on’: Norway celebrates Winter Olympics medal record
- CNN: The secret behind Norway’s Winter Olympic success
- Reuters: Norway win 38th Pyeongchang medal to surpass U.S. record
- BBC: Winter Olympics stats: Norway’s record haul, Germany’s golden Games and more
Visualization inspiration
- Visme: 19 Innovative Ways to Use Information Visualization Across a Variety of Fields
- Harvard Business Review: Six Ways to Find Values in Twitter’s Noise
- Visual Cinnamon: https://www.visualcinnamon.com/portfolio/olympic-feathers
- NYC Data Science Academy: https://nycdatascience.com/blog/student-works/olympic-games-data-visualization/
- Dremio: https://www.dremio.com/the-winter-olympics/
Datasets
Visualization file
Idyll Code and instructions of how to run it
