Personal blog written from scratch using Node.js, Bootstrap, and MySQL. https://jrtechs.net
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

72 lines
3.2 KiB

  1. Shortly after working on my [Steam Friends Graph](https://jrtechs.net/projects/steam-friends-graph)
  2. ,I had the idea of extending the project to include the GitHub network.
  3. I used [BrickHack V](https://brickhack.io/) as the opportunity to work on this project with my friends.
  4. Rather than simply use the code that was used in the Steam friends graph, the architecture was completely
  5. revamped to reflect both the differences between the Steam and GitHub networks and my improved web development skills.
  6. # Project Overview
  7. We created an interactive website which allows you to make graphs based on the Github network.
  8. Currently the site generates three types of graphs-- the most popular and entertaining of which is the friends graph.
  9. The friends graph helps you visualize clusters of friends/collaborators on GitHub.
  10. Similar to the Steam Friends Project, I hope that this project will make people more interested in learning about big data.
  11. The visual aspect of this website makes learning about topics such as clustering and graph databases more intuitive.
  12. ## Friends View
  13. ![Friends Graph of JrTechs](media/github/jrtechsGraph.png)
  14. The friends view displays all of the people which you following and your followers.
  15. This also connects connects everyone in the graph which are following each other.
  16. ## Repository View
  17. ![Repositories Timeline for JrTechs](media/github/RepositoriesView.png)
  18. ## Organization View
  19. ![Organization view for RITlug](media/github/ritlugOrg.png)
  20. ![Organization view for FOSS@MAGIC](media/github/fossRITOrg.png)
  21. ## Technologies Used
  22. - [BootStrap](https://getbootstrap.com/)
  23. - [jQuery](https://jquery.com/)
  24. - [Vis JS](http://visjs.org/)
  25. - [Github v3 API](https://developer.github.com/v3/)
  26. - [Node.js](https://nodejs.org/en/)
  27. # Changes From the Steam Graph Project
  28. The one stark difference between the Steam network and GitHub is the amount of friends that people have.
  29. 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.
  30. Due to the smaller graphs, I was able to use VisJS which has nicer animations and supports custom HTML for each node.
  31. ![Jrtechs Steam Friends Network](media/steam/jrtechs1.png)
  32. Another big change to the architecture was the way in which graphs are sent to the client.
  33. The server generated the graph and then sent the nodes and edges to the client over a web socket for the steam graph.
  34. In this project, the client builds the graph and queries the server using ajax for the necessary information.
  35. This gives the client a more dynamic loading progress and makes hosting the application much easier.
  36. # Future Work
  37. Since this project was initially created during a hackathon, there is a **lot** of work to be done.
  38. I will outline a few ideas which I have.
  39. - Improved Caching and Performance
  40. - Friends of Friends -- similar to Steam's graph
  41. - Graphs Linking Users and Repositories Based on Activity
  42. - Code Metrics
  43. # Contributing
  44. 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).
  45. Once you know what you want to work on, just discuss it in the issues and file a pull request.
  46. I are very open to new contributes.
  47. <youtube src="rz7KD_d-uQg" />