KAIST Data Viz Class: Intro
Introduction of KAIST Data Visualization Class
Professor Uichin Lee’s lab from the School of Computing at KAIST led data visualization classes to help students to interact with data, extract insightful information, and build data-driven visualization systems. The classes opened twice in the spring of 2020 (IE481 in the Industrial Engineering department) and in the fall of 2021 (CS492 in the School of Computing department). I was a teaching assistant in both classes, developing practice materials and tutoring team projects.
The course covers basic concepts of data visualizations and provides in-depth tutorials and practices on the entire visualization process (i.e., ideation, prototyping, and usability testing). Students can design and build their own web-based interactive visualization systems with Python and Javascript during the process. The class is divided into three parts, (1) the lecture for learning the fundamental concepts of data visualization, (2) the following programming sessions, and (3) the design studio for building real-world data visualization systems.
Lectures & Programming sessions
The lectures cover various concepts of data visualization, such as design principles, representation, perception, color, and data storytelling. The lectures follow two well-known data visualization textbooks (Visualization Analysis and Design [1] and Fundamentals of Data Visualization [2]). Based on the textbook’s contents, students can learn how to visualize the data depending on the context and learn about the appropriate interactions for visualization.
Furthermore, there are programming sessions (e.g., web programming, Python data processing, and visualization) that help students to learn how to implement what they learned in the lectures. For the past two years, we have spent an enormous amount of time developing interactive course materials to teach students about data visualization programming. The programming materials were made with Plotly [3], the easy-to-use Python-based graphing library, and Dash [4], the Python framework built on top of React to build web applications. The contents of the materials are closely related to the lecture content; for example, if students learn how to deal with interaction for data visualization, in the next class, they can learn how to implement the interaction with Python language (Figure 1). While there are many flexible tools available like D3.js, we decided to use somewhat high-level programming libraries that can be used along with Python-based data processing.
Figure 1. Visualization lecture materials (left) and following programming sessions (right). Students in the class can learn basic concepts of data visualization in the lectures and programming skills in the programming sessions.
Data Viz Design Studio with a Mobile and Wearable Data
Students make teams and build web-based interactive visualization systems in the design studio sessions along with the lectures and programming sessions. These sessions follow a user-centered design process, as shown in Figure 2. Students select a specific domain and define research questions (target stage), translate the research questions into data visualization tasks (translate stage), design visual encodings and interactions (design stage), implement what they designed (implement stage), and validate their visualizations (validate stage). The processes can be iteratively performed in the design studio sessions over the semester.
Figure 2. The iterative user-centered design process (left figure by Prof. Pfister at Harvard University)
We think that having hands-on visualization experiences with a real dataset is important. As for design studios, we focus on exploring project topics related to visualizing smartphone/wearable datasets. Our lab conducted large-scale data collection campaigns with hundreds of participants to collect wearable sensor data and smartphone datasets, as illustrated in Figure 3. The datasets can be freely used in class with a non-disclosure agreement. Students can get hands-on experiences in data pre-processing and visualization programming to design and develop visualization systems.
Figure 3. Example of web-based data visualization dashboard using smartphone and wearable dataset
This YouTube video contains several interesting examples of design projects conducted in 2021!
Online Interactions using Various Channels
Both classes in 2020 and 2021 were conducted online due to COVID-19, and all lectures were held via Zoom (Figure 4). Interactions between students and instructors have been done using online channels such as Google classroom, which is the online classroom that can submit and manage class materials, and Piazza, which is the online gathering platform where students can discuss their questions and opinions. All the participants actively engaged in discussions and Q&A sessions through these online channels.
Figure 4. All classes and interactions have been actively done via online channels
Before the end
Our team has been steadily discussing how to deliver meaningful classes for data visualization. As one of the teaching assistants, I bet the class will give you a great opportunity to have a rich experience in data visualization. If you want to interact, understand, visualize data and build real-world applications, I strongly encourage you to enroll in the course whenever it’s open!
Writer
Yugyeong Jung, ICLab, KAIST School of Computing
References
[1] Visualization Analysis and Design, Tamara Munzner, CRC Press 2014
[2] Fundamentals of Data Visualization: A Primer on Making Informative and Compelling Figures, Claus O. Wilke, O’Reilly 2019
[3] Plotly: https://plotly.com/
[4] Dash: https://dash.plotly.com/
#Data Visualization #Class Introduction
