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