Abhinit Parelkar - UX/Interaction Designer

Interactive Graphs

Home    >     Projects     >      Interactive Graphs (Web-based)


Interactive Graphs (Web-based)

Duration: First two weeks of March 2018

The problem:

A need to build an interactive visualization to reveal the meteorites that have fallen to Earth from outer space. Interactive Graphs establishes a dialogue between the user and the system as the user explores the data set to uncover insights. The data set is taken from "The Meteoritical Society" and can be found here
The research questions I tried to solve were:

  1. How does the geographical distribution of observed meteorites differ from that of found (not observed falling) meteorites?
  2. What’s the comparison of meteorite observed and found? 
  3. Are there any differences over time in the class/types of meteorites that have fallen to Earth?
  4. Where was the heaviest/lightest meteorite found or observed?


I had a time constraint of two weeks to perform a research & development (used HTML5/CSS3, D3.js), and write an analysis report.  


To view the live version: click here
To re-use the code from the Github repository: click here


Research & Development:
I followed Few's taxonomy for plotting graphs. They're as follows:

  • Geospatial, and
  • Classification of multiple distribution, nominal comparison, respectively.

I upheld Kosslyn's three goals for graph design as follows:

  • Connecting with audience,
  • Direct and hold attention, and
  • Promote understanding and memory.

I followed two out of seven Yi et al's taxonomy for interaction technique:

  • Encode: Represents the change in visual appearances, for example, change color coding, size, shape,etc.
  • Filter: Represents the subset of a data set conditionally.

Technology used: 

HTML 5/CSS 3, D3.js, and Microsoft Excel.

Learned Lesson(s):

It was a challenge to develop an interactive graph in D3.js within two weeks. Making it compatible with multiple browsing platforms was the highest priority which led to multiple iterations in the code. I wish I could've incorporated the following:

  • Make it appear more aesthetically pleasing.
  • Incorporate zooming functionality in geospatial map (Explore/Elaborate in Yi et al's taxonomy).
  • Consolidate all the graphs in to a single page, thus reducing the number of clicks - Dashboard.



  < Prev.   |   Next >