| @ -0,0 +1,72 @@ | |||
| Shortly after working on my [Steam Friends Graph](https://jrtechs.net/projects/steam-friends-graph) | |||
| ,I had the idea of extending the project to include the GitHub network. | |||
| I used [BrickHack V](https://brickhack.io/) as the opportunity to work on this project with my friends. | |||
| Rather than simply use the code that was used in the Steam friends graph, the architecture was completely | |||
| revamped to reflect both the differences between the Steam and GitHub networks and my improved web development skills. | |||
| # Project Overview | |||
| We created an interactive website which allows you to make graphs based on the Github network. | |||
| Currently the site generates three types of graphs-- the most popular and entertaining of which is the friends graph. | |||
| The friends graph helps you visualize clusters of friends/collaborators on GitHub. | |||
| Similar to the Steam Friends Project, I hope that this project will make people more interested in learning about big data. | |||
| The visual aspect of this website makes learning about topics such as clustering and graph databases more intuitive. | |||
| ## Friends View | |||
|  | |||
| The friends view displays all of the people which you following and your followers. | |||
| This also connects connects everyone in the graph which are following each other. | |||
| ## Repository View | |||
|  | |||
| ## Organization View | |||
|  | |||
|  | |||
| ## Technologies Used | |||
| - [BootStrap](https://getbootstrap.com/) | |||
| - [jQuery](https://jquery.com/) | |||
| - [Vis JS](http://visjs.org/) | |||
| - [Github v3 API](https://developer.github.com/v3/) | |||
| - [Node.js](https://nodejs.org/en/) | |||
| # Changes From the Steam Graph Project | |||
| The one stark difference between the Steam network and GitHub is the amount of friends that people have. | |||
| Most developers on GitHub typically only follows around 20 people where it is not uncommon for people on Steam to have well over 100 friends. | |||
| Due to the smaller graphs, I was able to use VisJS which has nicer animations and supports custom HTML for each node. | |||
|  | |||
| Another big change to the architecture was the way in which graphs are sent to the client. | |||
| The server generated the graph and then sent the nodes and edges to the client over a web socket for the steam graph. | |||
| In this project, the client builds the graph and queries the server using ajax for the necessary information. | |||
| This gives the client a more dynamic loading progress and makes hosting the application much easier. | |||
| # Future Work | |||
| Since this project was initially created during a hackathon, there is a **lot** of work to be done. | |||
| I will outline a few ideas which I have. | |||
| - Improved Caching and Performance | |||
| - Friends of Friends -- similar to Steam's graph | |||
| - Graphs Linking Users and Repositories Based on Activity | |||
| - Code Metrics | |||
| # Contributing | |||
| If you want to contribute to this project and don't know where to start, look at the open issues on [GitHub](https://github.com/jrtechs/github-graphs). | |||
| Once you know what you want to work on, just discuss it in the issues and file a pull request. | |||
| I are very open to new contributes. | |||
| <youtube src="rz7KD_d-uQg" /> | |||