DE705: Interactive Data Visualization

16 Sep 2017

12 students from the M.Des in Interaction Design program and 2 PhD students took a 2-week long course in Interactive Visualization. Total duration of class was 7 full days (45 hours). The class did data collection, analysis and visualization as part of the coursework, and completed 3 assignments.

Indian Railways (Assignment 3)

Students were given the dataset “Indian Railways Time Table for trains available for reservation as on 03.08.2015” publicly available on the Open Data Government (ODG) Platform India and were asked to visualize any aspect of the data of their choice. The students were required to document and articulate their assignment process in the form of a Medium article​.

1. Indian Railways in 3D by Rohit Gupta
2. SEZs, Freights and Railways by Malay Dhamelia
3. Halt Times of Passenger Trains at Stations of Mumbai by Manasi Mankad
4. How safe is your travel? by Pallavi Ekka
5. Trains connecting mega-cities of India by Arka Majhi
6. TrainWiz — Interactive tool for finding trains to your next getaway! by Raagul Manoharan
7. Trains from/passing-through Coimbatore Junction by Manoj Kumar
8. Railway Connectivity Between India’s State Capitals by Amit Jena
9. Deaths by Railway Accidents in India by Vineet Kamboj
10. Passenger trains from Chennai Central to Palghat Junction by Silpa Murali
11. Trains at Wardha Junction by Ankit Bansod
12. Unseen Connections — Indian Railway Junctions by Rupesh Nath
13. Trains between Howrah Junction and Mumbai CST by Udayan Vidyanta

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 and the data added to the OSM.

IITB campus on the OSM with the new data

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 (Rupesh).
2. Chart.js — Simple, flexible JavaScript charts (Manoj).
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 (Ankit).
4. dygraphs — Another fast, flexible open source JavaScript charting library (Tuhin).
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 (Pallavi).
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. The Jayalalitha Disproportionate Assets Case by one of my students was done using Timeline.js (Manasi).
7. Tiki-Toki — Another web-based software to create interactive timelines (Silpa).
8. SIMILE Widgets — Open-source web widgets, mostly for data visualizations (Arka).
9. Mapbox — Great for building beautiful custom maps (Vineet).
10. Leaflet — Lightweight open-source JavaScript library for mobile-friendly interactive maps (Malay).
11. 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 (Amit).
12. 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 (Udayan).
13. Processing — Processing.js is a JavaScript library that sits on top of the Processing visual programming language. As everyJavaSript library is, Processing.js is web oriented and lets you bring the Processing power to your web pages (Rohit).
14. 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 (Raagul).

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

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