Introduction to Visual Analytics (IAT355) - Fall 2024Archived

Welcome to Visual Analytics! We are so excited that you are here. This page serves as a place for you to learn about the course structure and you will have access to the resources you need to be successful and happy!

Final Projects

The course is completed. Check out the amazing final projects from year 2024 showcasing interactive data visualizations and creative design solutions.

View Final Projects

Learning Outcomes

  • Understanding Visual Analytics Principles: Gain a foundational knowledge of visual analytics, including analytical reasoning techniques, data representation and transformation, and visual representation and interaction techniques.
  • Practical Application of Visualization Tools: Develop proficiency in using various visualization tools and coding assignments to analyze and interpret complex data sets.
  • Critical Analysis of Visualizations: Enhance skills in critically evaluating visualizations, identifying effective design elements, and recognizing potential misrepresentations.
  • Collaborative Project Development: Experience working in pairs to create a comprehensive visualization project, from conception to presentation, fostering teamwork and project management skills.
  • Effective Communication of Data Insights: Learn to present data-driven insights clearly and persuasively through written reports and oral presentations.

Through hands-on experience and project work, you will also gain more experience in:

  • HTML Fundamentals: Semantic HTML5 elements, document structure, SVG.
  • CSS & Styling: Learn modern CSS techniques including Flexbox, Grid, and responsive design principles to create visually appealing visualizations.
  • JavaScript Programming: Develop experience JavaScript fundamentals including DOM manipulation, event handling.
  • D3.js Data Visualization: Create custom interactive visualizations using D3.js, including data binding, scales, axes, transitions, and event handling.
  • Vega-Lite: Build declarative visualizations using Vega-Lite's grammar of graphics, including data transformations and interactive specifications.
  • Web Development Workflow: Create a final live web-based project to show off your interactive data visualization skills.

Teaching Team

Instructor

Dr. Alireza Karduni

Email: akarduni@sfu.ca

TA

Koosha Kabiri

Email: koosha_kabiri@sfu.ca

Course Policies

Contacting us

There will be a Discord channel through which we can all stay connected, ask questions and help each other.

In case you'd like to email us, please allow up to 2 business days for responses though we will typically reply much sooner. We may be able to answer questions about software or code via email. Please arrange a meeting or attend office hours for complex software or code questions. Happy to respond to other questions, but some questions are better asked in person.

To make our responses faster, please include the following in your email:

  • Your full name.
  • The course number (IAT-355).
  • A clear question

Conduct

Please treat our online interactions the same way you would in-person interactions. As a teaching team we are dedicated to providing a harassment-free experience for everyone in this class, regardless of gender, sexual orientation, disability, physical appearance, body size, race, or religion. Harassment of any form is not tolerated. Sexual language and imagery is not appropriate in this class.

If you have concerns with anyone's conduct either in-person or online, email your instructor. If you do not feel comfortable reaching out to your instructor, please contact SIAT's advisors.

SFU's complete student conduct policy is available online.

Illness

If you are feeling ill, you should stay home and get better. Let your instructor or TA know that this is the case, and make sure to catch up with course materials to stay up-to-date.

Late assignments

Late penalties (10% a day for 2 days, 20% after). If you have issues and can't submit on time, please let us know in advance, we are happy to work figure out a way to get you up to speed.

Use of AI for coding

For coding assignments, it is fine if you use AI (ChatGPT or others) to work through your course. But the aim is for you to learn. If you use AI, we ask that you submit your chat as part of your assignment. We will evaluate the prompt and how you dealt with AI's responses to ensure that take the most out of this class.

For presentations and writing assignments. Do not use AI for writing content. Do not copy and paste from AI directly. Feel free to use AI for ideation, and help with writing, but the end result, should be your output, not AI's.

Grading

ComponentWeight
Assignment40%
Midterm Quiz15%
Final Project Submission30%
Final Presentation15%

The course is part lecture, and part lab. You will need access to a computer, and install some coding tools. We will work with you to figure out coding assignments, and teach you the basics in the labs.

There are several assignments that you will submit through Canvas. Some assignments require coding, some are design based, and most (hopefully) are fun. You will receive information about each assignment as the course moves on.

There will be one midterm exam (quiz) that will be held in class, and will involve critically analyzing a set of visualizations (more details will be discussed in class).

There will be a final project where you will work in pairs to create a visualization, present it to the class, and write something interesting about it. (more details will be shared)

Acknowledgements

This course and the content was heavily inspired by slides from Professor Lyn Bartram (SIAT), and Professor Emily Wall (Emory University). There were also content used from work by Steven Franconeri and Jessica Hullman from (Northwestern University).

Course Syllabus

W1
Lab · Sep 12
Topic:
Introduction
Lecture Topics:
Introduction to visualization, Tabelau + start html css
Lab Activities:
Get to know each other, Install Tableau
Video:
Slides:
Readings & Prep:
2 readings (show more)collapse
W2
Lecture · Sep 17
Topic:
Data and encodings
Lecture Topics:
What is data + encodings
Video:
Slides:
Readings & Prep:
1 readings (show more)collapse
W2
Lab · Sep 19
Topic:
Data and encodings
Lecture Topics:
HTML, CSS, JS + Intro to SVG
Video:
Slides:
W3
Lecture · Sep 24
Topic:
Perception + Cognition
Lecture Topics:
Perception + Thinking with data + cognitive bias
Video:
Slides:
W3
Lab · Sep 26
Topic:
Perception + Cognition
Lecture Topics:
HTML, CSS, JS, Vegalite + Observable
Lab Activities:
Create charts with vegalite in observable
Video:
Slides:
Readings & Prep:
1 readings (show more)collapse
W4
Lecture · Oct 1
Topic:
Narrative visualization and Persuasion
Lecture Topics:
Persuasion, Communication and Storytelling, misinformation
Video:
Slides:
W4
Lab · Oct 3
Topic:
Narrative visualization and Persuasion
Lecture Topics:
Introduction to D3
Video:
Slides:
W5
Lecture · Oct 8
Topic:
Evaluation + Thinking about humans
Lecture Topics:
Evaluation + Critique + The human side of vis
Video:
Slides:
W5
Lab · Oct 10
Topic:
Evaluation + Thinking about humans
Lecture Topics:
More D3
Video:
Slides:
Break
Lecture · Oct 15
Topic:
Break
Lecture Topics:
No class
Video:
Slides:
W5.1
Lab · Oct 17
Week 5.1
Topic:
Programming Troublshooting (Karduni in Conference)
Lecture Topics:
Troublshooting
Lab Activities:
Talk about projects
Video:
Slides:
Exam
Exam · Oct 22
Topic:
Exam
Lecture Topics:
In class exam
Video:
Slides:
W6
Lecture · Oct 24
Topic:
Visualization Tasks
Lecture Topics:
Thinking about analytical tasks
Lab Activities:
Final project proposal
Video:
Slides:
Readings & Prep:
1 readings (show more)collapse
W7
Lecture · Oct 29
Topic:
Interaction and animation
Lecture Topics:
Interaction + Animation + uncertainty
Video:
Slides:
W7
Lab · Oct 31
Topic:
Interaction and animation
Lecture Topics:
Vegalite itneraction , D3 interaction + project troubleshooting (data)
Lab Activities:
Mandatory describe what dataset you are going to use
Video:
Slides:
W8
Lecture · Nov 5
Topic:
Visual Analytics
Lecture Topics:
Visual Analytics
Video:
Slides:
W8
Lab · Nov 7
Topic:
Visual Analytics
Lecture Topics:
Project troubleshooting, tool choice, questions, ideas
Video:
Slides:
W9
Lecture · Nov 12
Topic:
Geographic visualization
Lecture Topics:
Maps + Text
Video:
Slides:
W9
Lab · Nov 14
Topic:
Geographic visualization
Lecture Topics:
Leaflet visualization
Video:
Slides:
Assignments Out:
W10
Lecture · Nov 19
Topic:
Responsive Vis
Lecture Topics:
Guest Lecture: responsive visualization (heyok kim)
Video:
Slides:
W10
Lab · Nov 21
Topic:
Responsive Vis
Lecture Topics:
Project troubleshooting + presentation practice
Video:
Slides:
Assignments Due:
W11
Lecture · Nov 26
Topic:
Going beyond
Lecture Topics:
Facets, multiple views, other fancy vis
Video:
Slides:
W11
Lab · Nov 28
Topic:
Going beyond
Lecture Topics:
Project troubleshooting + presentation practice
Video:
Slides:
W12
Lecture · Dec 3
Topic:
Farewell
Lecture Topics:
Conversation, why visualization, weird visualizations
Video:
Slides: