/friend-circles

Visualization of social networks

Primary LanguageHTML

friend-circles

Description

We are building a graph-like visualization of the real-time friend circles. This app is implemented in MEAN stack and deployed with NGINX.

Live

http://friends.xinyangzhang.com

Demo

Demo on YouTube(Chinese Version)
English Version comming soon...

Feature

  • Force-graph: Data is rendered in a force-graph which can be dragged to reshape and relocate.
  • Real-time drawing: Drawing function is triggered by any change of user without page refresh.
  • Highlight: Direct conncections of a user are highlighted once the node is double-clicked.
  • Tooltip: The name of the user is shown when the node is hovered.
  • Search: The node can be quickly found by searching the user name.
  • Find me: User's own node can be quickly found by just clicking the search button.
  • Ranking: The rank of real-time top users are shown on the right panel.
  • Admin: A hidden admin page is used to manage all user data.
  • Degree of Separation: The shortest path between user and target is calculated and present with animation.

Time Schedule

Stage Start End Goals
1 06/07/16 06/13/16 Week 1 - Project Selection, Plan Discussion, and Proposal Draft Writing
2 06/14/16 06/20/16 Week 2 - Resource Discovery, Project Implementation, Document Writing
3 06/21/16 06/27/16 Week 3 - Database design and implementation
4 06/28/16 07/04/16 Week 4 - Front-end design and implementation
5 07/05/16 07/11/16 Week 5 - Features implementation, functional testing
6 07/12/16 07/18/16 Week 6 - Code Polishing, Presentation, Documents writing

Resource

License

See the LICENSE file for license rights and limitations (MIT).

Project Information

  • category: full stack
  • team: Mongoose
  • contributor: Xinyang Zhang(阳哥)(xinyzhang9@gmail.com)
  • description: real-time visualization of the friend-circles.
  • stack: Angular, Express, NodeJS, d3.js, MongoDB, nginx

Note: The data we are using may be fake. For now we are not recommending users to input real data. All images and names are only for the purpose of demonstration.

category options: full stack, big data, visualization, front-end

Screenshots

alt tag alt tag alt tag