Course Syllabus

Data-Driven Information Visualization

 

Semester & Location:	Spring 2025 - DIS Stockholm
Type & Credits:	Elective Course - 3 credits
Major Disciplines:	Data Science, Computer Science, Engineering
Prerequisite(s):	One year of computer science, a course in algorithms and data structures. Knowledge of at least one programming language (e.g. Python/Javascript/Java/C++/Matlab).
Faculty Members:	Angie Hjort (current students please use the Canvas Inbox)
Program Contact:	academics@disstockholm.se
Program Contact:	Natalia Landázuri, Ph.D.
Time & Place:	TBA

 

If you feel like this course is too technical, be sure to check out the other course we have at DIS Stockholm on Data Visualization — a similar course that is offered with almost no pre-requisites and where coding is optional. Here, coding is mandatory.

Course Description

Visual information displays have epic significance for communicating knowledge in both science and business. The world is complex, diverse, and always changing, but our screens are mostly flat and paper prints are also static. When we succeed at displaying complexity of the world in a chart, graph or map so that readers can unpack it back in their brains, we call it "Escaping flatland", as in, escaping the flat nature of the medium. The best examples that achieve this are crafted with code, and code can be a tricky material to work with, but let's try! 

This course offers a deep dive into technologies and methodologies involved in the production of modern information graphics. Students will work in groups to build a complete information visualization system from data acquisition and processing, to visual representation and user interactivity.

 

Prerequisites

As a participant in this course you need to be not scared too much of technology. You can read computer numbers written like 6.9e-4. You need to have a good command of logic statements and control flow like for-loops and if-statements, as well as basic data structures like objects, arrays, maps and sets. Comparison by value vs. comparison by reference. That kind of stuff. Formally this is described as experience with any programming language plus a course in algorithms and data structures. We won't make stops on these basics. 

 

Technologies involved

Here is a list of technologies and languages involved in this course: JavaScript, a lot of d3.js, <svg>, <canvas>, observable notebooks and framework, possibly WebGL/OpenGL. For data acquisition and processing there is an alternative to use Python, pandas, Jupyter notebooks.

Below is a short description how each technology is relevant:

• JavaScript: A core web language for creating interactive, dynamic visualizations directly in the browser. The course has a heavy tilt to JavaScript because this is the interactive language of the web. Additions like Typescript, React or similar are allowed but not required. Alternatives can be negotiated.
• d3.js: A JavaScript library for producing sophisticated data visualizations, enabling direct low-level control over visual elements.
• <svg>: A web technology that allows making images consisting of geometric shapes, ideal for crisp data visualization on web pages and easy interactivity, but limited in terms of the number of simultaneous elements being visualized
• <canvas>: A web technology that allows making images out of pixels, ideal for huge datasets displayed on the web pages, but with limitations in animation and interactivity
• Observable Notebooks and Framework: A platform for exploratory data analysis and visualization, streamlining collaboration and prototyping of the projects.
• WebGL/OpenGL: Graphics libraries for rendering high-performance 3D and complex 2D visuals, enhancing interactivity in visualizations.
• Python: A flexible programming language used for data manipulation, transformation, and preparation.
• pandas: A Python library for efficient data analysis and manipulation, particularly useful for handling large datasets.
• Jupyter Notebooks: An environment for running Python code interactively, ideal for exploratory data analysis and documentation.

We also have a pen plotter Axidraw A3/V3 for a more physical output of the coding experiments.

Students using Axidraw machine to plot a generative art piece — Spring 2024

 

Learning Objectives

By the end of the course students should have a GOOD portfolio case for any potential employment in the fields like data visualization, data science and web development. Students should have experienced the process of data visualization production and be able to build a similar project for a different situation.

A deep understanding and fluent use of technologies covered in the course is not expected as an outcome, because that may take many years to master. But the ability to find information about the tools, identify which ones are useful for the job, and learn how to use them when the need arises is the outcome we will work towards.

In other words, by the end of the course, the students should be able to think link engineers: identify problems and search for solutions. If it's made by a human, then you, another human, can understand and apply/improve/fix it. Simplify complex systems using "model thinking". Reduce the scope of work to the bare minimum. Build prototypes and small proof-of-concepts. Then build a solution piece by piece.

International happiness — one of the Spring 2024 Projects (interactive version)

 

Expectations of the Students

Show up in class, arrive on time.

Make active contributions into the group projects.

Have a laptop that works, as in, can pull off a moderate amount of computation. An external mouse is often helpful.

Find a way to nicely resolve the conflicts in the group, balance each other's needs and support each other.

If you say you will do A by time T — hold yourself accountable and actually do A by time T.

Actively seek learning new things. Take initiative towards learning what is important for YOU.

Ask for help if stuck.

Co-create an environment for chill, playful and rewarding learning for yourself and others. Encourage experimentation, don't shoot down ideas too early, push each other towards a working solution, but don't make each other work overtime too much. The balance is tricky but you can strive towards it.

Instructor demonstrating a possible solution to one of the course assignments — Spring 2024

 

Evaluation and Grading

Grading is assessed individually through multiple criteria, including the overall quality of the group project, the amount and quality of personal contribution to it. Smaller but still significant parts of the grade are assessed through attendance of classes and field studies, completion of coding tutorials and a couple of smaller individual assignments.

Assignment	Percent
Group project (broken down in 4-5 milestones along the course)	50%
Individual assignments	28%
Attendance of classes and field studies, active participation	27%
Completion of coding tutorials	20%
Quizzes and extras	15%

The total is more than 100% in order to accommodate some personal variation. To pass the course and get a small D you need at least 60%.

Grade scale looks like this: 

F (complete failure): below 60%,

D-: 60%, D: 63%, D+: 67%,

C-: 70%, C: 73%, C+: 77%,

B-: 80%, B: 83%, B+: 87%,

A-: 90%, A: 93%

Unofficial pass with distinction hall of fame wooden medal level: A+: 100% or more

 

AI policy

A heavy use of AI tools is encouraged in this course, however make sure AI helps YOU to build the knowledge instead of just doing the work for you. In all parts of the course including quizzes and individual assignments — supply the comments if you succeed at using AI successfully. For example, what prompts worked better and how you verified the output or detected/resolved hallucinations.

 

Faculty

Angie Hjort is a d3.js data graphics developer and Head of Software at Gapminder Foundation in Stockholm, Sweden, where he is responsible for the various software efforts around project gapminder.org/tools and developing the interactive data pictures. Previously built data-intense visualizations for oil platform safety monitoring (ABB Research, Sweden), user interfaces for online payment aggregator (Robokassa, Russia), control systems and operator user interfaces for the ore processing factory (Realtime Software, Russia). Holds academic degrees of M.Sc. in Human computer interaction with a minor in Innovation and Entrepreneurship (graduated 2014 from KTH, Sweden and Aalto, Finland), M.Eng. Industrial Automation and Control Systems (graduated 2011 from URFU, Russia). With DIS since 2022.

 

Readings

To be discovered. Probably not much since we rely on learning by doing and project work in this course.

Field Studies (preliminary)

1. Visit to the Visualisation, Interaction and Computing laboratory of KTH — Sweden's largest tech school: we play with VR projects made by master students in Visualisation and Computer Graphics.

2. Geospatial data collection for your adventures: we walk in the forest and collect data for the later use in class through recording tracks and point of interest.

 

Guest Lecturers

To be discovered. I hope to get some speakers from the industry. 

Approach to Teaching

Congrats to anyone reading this far! Back when I went to schools and universities, I only liked the classes when the teacher was genuinely interested in the subject. That, I found, was the single most important aspect needed for me to get interested studying for the course, the difficulty of the subject or its relevance to my career were of minor importance really. I maintain that we, as teachers, should focus on creating a habit of life-long learning instead of preparing our students for test results. Even broadly, I would say we need to teach being stoked on life and taking responsibility. If we succeed doing that at least a little, the habit of learning would come as a consequence, and the test results would be the next-order consequence. I strive to achieve that through giving students a lot of decision-making space and having them own their mistakes. Plus some gamification. 

I also deliberately design a wicked learning environment, where problems are ill-defined, the solutions are divergent and the confusion in manageable amounts is invited. Usually in classes you have to follow the clear steps and get the expected result (a kind learning environment). Not so much in real work though. This course is intended to mimic the real work a bit more than what is usually offered.

 

DIS Accommodations Statement 

Your learning experience in this class is important to me.  If you have approved academic accommodations with DIS, please make sure I receive your DIS accommodations letter within two weeks from the start of classes. If you can think of other ways I can support your learning, please don't hesitate to talk to me. If you have any further questions about your academic accommodations, contact Academic Support acadsupp@dis.dk. 

Academic Regulations

Please make sure to read the Academic Regulations on the DIS website. There you will find regulations on:

• Course Enrollment and Grading
• Academic Expectations and Honor Code

 

 

DIS - Study Abroad in Scandinavia - www.DISabroad.org