Course Description

As digital technologies permeate more and more aspects of our daily lives, data plays an increasingly large role in all kinds of academic disciplines. From the (digital) humanities to business analytics, and from engineering to the social sciences, we all try to create insights from ever larger, more complex datasets. Interactive data visualization is a powerful way of both generating and communicating such insights, yet it requires a unique combination of knowledge and skills not often included in conventional academic curricula.

This course teaches students the concepts, skills and techniques of online, interactive data visualization and map making. In doing so, it covers both the modern web development workflow and Javascript programming. These fundamental programming tools and techniques are mastered in an applied context of designing and building interactive visualizations. Apart from a foundational understanding of the building blocks of the modern web (HTML, CSS, Javascript), students learn to build visualizations using industry-standard Javascript libraries through a series of practical hands-on assignments and projects. The course keeps a focus on the entire iterative design workflow throughout the semester and culminates in a project in which a sequence of prototypes leads to a final online, interactive data visualization. This final project allows students to apply the skills and knowledge gained in this course to the context of their own academic discipline, research interests, or even another VIU course.

The course is focused on the iterative visualization design workflow and thus, as students gain an increasing understanding of concepts and proficiency with techniques, each week yields an increasingly complex and sophisticated visualization design product. In addition, relevant visualizations from different disciplines will be reviewed and discussed each week. This is an essential part of the design process that prepares students for their own iterative workflow of prototyping a data visualization product during the final project.

The first half of the semester will mainly focus on building a thorough understanding of fundamental programming concepts and techniques as they relate to data visualization. In doing so, students will learn and apply their knowledge in practical exercises built around exploring the visualizations and themes of the African-American sociologist Du Bois’ contribution to the 1900 Paris Exhibition – an example of the intricate linkages between data visualization and social or scientific topics. The second half of the course builds on these foundations to cover more advanced visualization techniques and methods. In this part of the course, students will work together on a real-world data visualization project that addresses a specific scientific, social or cultural topic or problem.

It should be noted that no special equipment or software is necessary for this course. Students will be able to complete the entire course by using a web browser.

Pre-start Virtual Component
Before the physical class starts, two synchronous online meetings will be organized. During the first meeting, the instructor will briefly outline the structure and goals of the course after which we will dive directly into a collaborative HTML coding exercise (supported by the online coding platform Stackblitz). The goal of this coding exercise is two-fold: (1) get students already familiar with some of the basic programming building blocks and each other; and (2) show students how programming can be fun and creative and overcome any potential pre-conceived anxiety they might have about this. The virtual component is designed to show students coding can be fun and useful in any academic discipline. They will finish the coding exercise in small groups offline before the second meeting. In the second meeting, we will (1) discuss and compare results of the exercise; and (2) students will be asked to bring a visualization from their field of study (or general interest) to the class and we will discuss why & how each of these visualizations is interesting/useful/pleasing/etc. This second exercise will help lay the groundwork of the idea that visualization has broad applicability across many domains.

Learning objectives
- Understand the theoretical foundation of information visualization and apply this foundation in a practical context
- Identify and explain the different technologies that make interactive data visualizations and maps possible
- Evaluate and use modern web standards and programming languages in order to build online maps and visualizations
- Compare and apply advanced visualization techniques based on their appropriateness for specific data types and research questions
- Design, assess and build an online, interactive visualization that allows the user to gain insight from a specific data set

Teaching and evaluation methods

This course is structured around two 4.5-hour classes per week that integrate lecture, (group) discussion and in-class activities and exercises in an interactive manner. Generally, the following recipe is used: the instructor will briefly outline the day’s agenda and provide a short 20-minute lecture on a key topic. After this short lecture, students discuss the topic together, apply it in an activity or do a computer exercise until a ‘natural’ (pre-designed by the instructor) challenging point is reached. At this point, this challenge will be discussed with the class as whole and potentially the next topic will be introduced, after which the students will interact and apply the concept hands-on again, and so on.

To facilitate learning outside of the classroom, a chat forum (such as Teams or Slack) will be used by the students and the instructor to ask questions, discuss challenges, and share results. In addition to this, students will engage with ChatGPT-like technologies. Engaging with these technologies critically is not only useful in the context of this specific course (e.g. students new to programming languages can greatly benefit from additional tutoring and explanations from different perspectives) but will also teach students techniques to engage with these technologies productively and critically in their learning after the Summer Session.

There will be a variety of assessments throughout the semester. Emphasis is on a student’s performance overall, with relatively low weight placed on individual items.

Assessment
Class Participation - 15% - Throughout term
Assignments (three) - 45% - Throughout term
Final Project - 40% - End of term

Assignments. Each week consists of a series of exercises (to be worked on both in-class and outside of class) that culminate in an assignment and small report that will be graded and feedback provided. The assignments together form a small showcase portfolio website created by the student. The final fourth week does not have an assignment so focus can be moved to the final project.

Final project. For the final project, students will work in small groups to develop a visualization project. At the end of week 2, students will hand in a project proposal, a working prototype will be due at the end of week 3, with the final project orally presented and due at the end of week 4.

Bibliography
The course will use a course text with exercises created by the instructor, made available as a website. In addition, the course will draw on the following book for the theory behind information visualization:

Munzner, Tamara. 2014. Visualization Analysis and Design. CRC Press.

Required preliminary knowledge
This course requires no preliminary knowledge and builds up any necessary programming language from the ground up. The instructor has extensive experience teaching a version of this course, and other courses like it, to students of varying disciplinary backgrounds and technical skill levels. Students that already have some programming experience can do more challenging versions of the exercises and, after the first 2 weeks, any large pre-existing differences in knowledge between students are generally leveled.

Last updated: April 5, 2024