From f7d8072a41277acb17886ec49243e1c99b9ac7ed Mon Sep 17 00:00:00 2001 From: jrtechs Date: Wed, 20 Feb 2019 21:53:56 -0500 Subject: [PATCH] Wrote blog post on the github graphs project. --- .../posts/projects/github-graphs-project.md | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 blogContent/posts/projects/github-graphs-project.md diff --git a/blogContent/posts/projects/github-graphs-project.md b/blogContent/posts/projects/github-graphs-project.md new file mode 100644 index 0000000..70315e6 --- /dev/null +++ b/blogContent/posts/projects/github-graphs-project.md @@ -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 + +![Friends Graph of JrTechs](media/github/jrtechsGraph.png) + +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 + +![Repositories Timeline for JrTechs](media/github/RepositoriesView.png) + +## Organization View + +![Organization view for RITlug](media/github/ritlugOrg.png) + +![Organization view for FOSS@MAGIC](media/github/fossRITOrg.png) + + +## 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. + +![Jrtechs Steam Friends Network](media/steam/jrtechs1.png) + +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. + + +