DE 705: Interactive Data Visualization

12 students from the M.Des in Interaction Design program took a 3-week long course in Interactive Data Visualization. Total duration of class was five and half days (Approx 30 hours) coupled up with a 3 day long (Approx 19 hours) Geo-Viz workshop conducted by Mr. Rasagy Sharma from Mapbox.

As the name suggests, the course emphasized on the interactive aspect of data visualization. Every student had to apply their knowledge and understanding of interface/interaction principles into creating meaningful interaction with information. The class did data collection, analysis and visualization as part of the coursework, and completed 3 assignments. Also certain additional assignments were done pertaining to Geo-Visualization.

Kerala Floods data visualization (Assignment 3)

Students were asked to look for suitable data sets related to the recent Kerala floods (2018). As a part of assignment every student was supposed to communicate an insight, observation, understanding, perspective or story through data.

Assignment was evaluated on basis of:
1. Individual’s ability to understand and handle the relevant data,
2. analysis of the said data,
3. correctly encoding it using the appropriate viz design principles, and
4. using the selected tool to best achieve a coherent communication.

Also students had to document and articulate their design process in the form of a Medium article.

Snapshots from few visualization created

1. Did poor dam management lead to Kerala Floods? by Kuldeep Singh Rathode
2. Kerala 2018: Rainfall, Dams and floods by Supriya Dutta
3. Creating a tool for the Indian Disaster resource network, Kerala by Jonathan Mathew
4. A brief comparison of Kerala floods by Thuli Chishi
5. Visualizing the 2018 Kerala Flood Donations by Shikha Verma
6. Visualizing Media responses to 2018 Kerala Floods using Twitter data by Vishnu K
7. A curiosity in 2018 Kerala floods by Enlin Quental
8. Interactive Data Visualization: Kerala Flood 2018 by Kiran
9. They came to the aid of Kerala — Data visualization of rescue operations in Kerala by Annu
10. Data viz on Kerala flood by Angela Riang Simon
11. Take on key events during Kerala floods (2018) by examining the state of reservoirs by Parth Kapadia
12. Interactive data visualization to compare the water release from dams during Kerala Flooding by Ridhima Tapia

Data Visualization Tools (Assignment 2)

In preparation for assignment 3, to get up to speed on the tools available to visualize, each student was assigned a visualization tool and was required to conduct a half-hour introductory tutorial-cum-demonstration of the tool for the rest of the class. This was done over 4 days.

Image courtesy Datavisualization.ch

1. Tableau Public — This is among the most popular, intuitive and user-friendly of today’s data visualization tools. Requires no coding (Kiran).
2. Chart.js — Simple, flexible JavaScript charts (Annu).
3. RAW Graphs — Copy/paste the relevant data directly from your spreadsheet program into RAW, choose a data visualization type, and set your parameters using a drag-and-drop interface. Each individual parameter or visual metric can be adjusted, and the interface is clean and intuitive, making it ideal for beginners (Thuli).
4. dygraphs — Another fast, flexible open source JavaScript charting library (Supriya).
5. Palladio — A good tool to visualize complex historical data which are often qualitative and incomplete in nature, and to build better understanding of the historical material through humanistic inquiry (Shikha).
6. Timeline.js — This is a powerful free tool developed by Northwestern University’s Knight Lab that helps you create engaging, timeline-based visuals to show off your data. Requires no coding. (Jonathan).
7. Tiki-Toki — Another web-based software to create interactive timelines (Jonathan).
8. Flourish — Simple yet powerful, good dataviz with minimum coding. (Ridhima).
9. Vega-lite — A high-level grammar of interactive graphics (Enlin).
10. D3.js — If you know Javascript, and you want to create highly custom and interactive interactive data visualizations, the D3.js library is the best tool around. Most visualization that you see on my website are done using d3.js (Kuldeep).
11. Tangle — Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Excellent for instruction design and process explanation projects (Parth).
12. Processing — Processing.js is a JavaScript library that sits on top of the Processing visual programming language. As every JavaSript library is, Processing.js is web oriented and lets you bring the Processing power to your web pages (Vishnu).
13. Springy.js — Springy is a force-directed graph layout algorithm. It means that springy uses some real-world physics to try and figure out how to show a network graph in a way that looks good (Angela).

Open Street Map (Assignment 1)

Students collected geographic data on the IIT Bombay campus and plotted them on the OSM (Open Street Map). This article by Rohit Gupta documents the process of adding data to the OSM.

Geo- Visualization Workshop

As a part of this 3 day long workshop, we mainly used two different approaches of learning. One is by critiquing an existing visualization and secondly by actually constructing a visualization.

Day 1
We learnt data visualization through the method of critiquing.
Geo-Viz critiques can be found here.

Day 2
We experimented with making schematic maps of our hometowns.

Day 3
Visualization on earthquakes were made.

This is the second run of the course. Feedback, suggestions most welcome!

Venkatesh Rajamanickam | http://info-design-lab.github.io/