Portfolio

Data Visualization

 

 

➡ FritWork

"FritWork" is a graphical representation of connections formed within a network of any given Facebook user. Various 2D, 3D representations help users navigate through their network and realize how people are connected within their network. A type of analysis possible only through a lot of browsing is presented in a user-friendly manner. This required understanding the concepts of graph API, FQL, Batch querying, User Authentication, PHP SDK, etc. specific to Facebook. The data visualization achieved is through front end js libraries listed below:

● FritWork-Sigma.js (2D)

Library: Sigma.js, Renderer: Canvas
Features Implemented

  • Use of ForceAtlas Plugin to form clusters based on connections
  • Customization of the canvas renderer to add images on the nodes.
  • Re-implementing mouse captors for providing navigation as per requirement
  • Capture the graph image feature implemented

    • Demo     |     Video

    ● FritWork-D3.js (2D)

    Library: D3.js, Renderer: SVG
    Features Implemented

  • Use of ForceLayout Plugin to provide clustering, Fish Eye Glass Plugin to provide magnifying of network on hover.
  • Extension of plugin to provide various navigation features such as drag/drop.
  • Binding behavior to mouse events such as click, double click.

    • Demo     |     Video

    ● FritWork-THREE.js (3D)

    Library: THREE.js, Renderer: WebGL
    Features Implemented

  • 3D implementation of Fritwork
  • Bind events to the behavior of graph
  • Provide Trackball mouse navigation

    • Demo     |     Video

    ➡ Find My Apartment

    "Find My Apartment" is an application that helps students find accommodation near their college campus. Various filters such as distance from various important places, rent/sublet, price and free form text are included. Also, information about transit and other key features are provided along with the listing of the apartments.

  • Extensive usage of Google Maps Places API and Google Maps Javascript libraries
  • Binding events based on the navigation on the map and navigation for the map
  • Listing Data Obtained via 3Taps API services

    • Demo     |     Video