Abhinit Parelkar - UX/Interaction Designer
ABHINIT PARELKAR

Interactive Visualization

Home    >     Projects     >      Interactive Visualization (Web-based)

 

Interactive Visualization (Web-based)

Duration: First two weeks of March 2018

Intro GIF 640px.gif

Storytelling through interactive media.

MOTIVATION

Interactive Visualization establishes a dialogue between the user and the system as the user explores the data-set to uncover insights.
— Unkown

OBJECTIVE(S)

The project had following objectives:

  • Utilize a real world data-set to visualize meaningful information.
  • To come up with a proposal document.
  • The visualizations must be aesthetic and adhere to Kosslyn's graph design principles.
  • Must utilize Few's taxonomy for plotting graph relationships.
  • Must incorporate Yi et al's taxonomy for visual interaction techniques.
  • The output can be built using Tableau or D3.js.
  • A final design report.
     

CHALLENGE

A need to build an interactive visualization to reveal the meteorites that have fallen to Earth from outer space. The data-set was taken from "The Meteoritical Society". It can be found here

I was in search of the answers to the following research questions:

  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 (not observed falling)? 
  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?

 My challenge was to design & build an interactive visualization of 8,509 records in the data-set.
 

LIMITATIONS

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

DESIGN SOLUTION

My interactive visualization proposal consisted of the following digital sketches:

research

I proposed to incorporate Few's taxonomy for plotting graphs:

  • Classification of multiple distribution - The graph represents a distribution relationship between the four variables: Meteorite name, mass, year, and fall type. The visualization (bubble chart) informs the user about the weight distribution of the meteorites discovered in the year 2000 - 2010. The larger the bubbles the higher the weight of the meteorite.
  • Nominal comparison - The graph represents a nominal comparison between two variables: Fell count and Found count. The visualization (side-by-side bar chart) reveals the statistical information about the total number of meteorites discovered from the year 2000 - 2010 categorized by fall type (fell/found). 
  • Geospatial - The visualization (geospatial map) depicts the geographical distribution of the meteorites based on its fall type (if it was observed falling on the Earth or not). The meteorites are visualized by the dot/bubble plots on the map and are color encoded with the “orange” and “grey” respectively to indicate it’s fall type (fell or found).


design

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

  • Connecting with the audience - The interactive graph provides the comprehensive information about the dataset with meaningful interactions.
  • Direct and hold attention - The "Read Me" section utilizes an accordion user interface which encloses and discloses the information when needed. This in return removes the visual clutter from the page and helps user to focus on the current information. The typeface utilized is sans-serif because according to the research sans-serif suits best for the reading on the displays.
  • Promote understanding and memory - The functionality of the design could be observed through encodes: color & size and dynamic (not static - changes based on interaction) labels. The dynamic labels are being used under graph 1 and 3. The labels on the graph reveals the information of the current hovered meteorite on the graph.

    The colors consistently serve the meaning in all the graphs (total three) where the orange stands for meteorite fell, grey for the meteorite found. The bubble chart’s (graph 3) size encoding indicates the user that larger the size the heavier the meteorite and vice versa.
     

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.


development

Based on solid research & design, I executed my interaction visualization project through D3.js and deployed it on GitHub repository.


output (Iteration 1)

output (iteration 2)

To view the live version: click here

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


TECHNOLOGY & TOOLS 

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

LESSONS LEARNED

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.

The metrics I registered: 

  • Learned deployment techniques on GitHub repository. Troubleshoot JS cross-browser compatibility.
  • The visualization could've been better - If given more time, I'd have made it more aesthetically pleasing and incorporated zooming functionality in geospatial map (Explore/Elaborate in Yi et al's taxonomy).
  • Consolidating all the graphs in to a single page could've been efficient, thus reducing the number of clicks on the web-page.

 

 

  < Prev.   |   Next >