Repo Link: https://github.com/esinx/octograph
Social affiliation network from GitHub contributions
For Live Demo, please visit https://octograph.esinx.net
Octograph uses GitHub API to fetch user contributions and build a social affiliation network based on the repositories they have contributed to. The resulting graph is an undirected bipartite graph of users and repositories, where an edge between a user and a repository indicates that the user has contributed to the repository.
The graph effectively is a social affiliation network that demonstrates Membership closure / Focal closure, depending on how we interpret contributions as a form of membership or focal closure. The graph can be used to analyze the social structure of the GitHub community and identify communities of users who have contributed to similar repositories.
The graph is visualized using @nivo/network. Octograph uses octokit from GitHub to fetch user contributions and build the graph. Each fetch request takes a while to load, so the graph is built incrementally as the data is fetched by using an internal cache store (this could be improved using the GraphQL API, but in this project I've used the rest endpoints for simplicity). The octokit library makes HTTP REST requests to the GitHub API under the hood, and each fetch request is the equivalent of performing a 2-layer BFS on the starting node (first layer being the repositories the user has contributed to, and the second layer being the users who have contributed to those repositories). See the instructions section for more details on how to use the application.
- Social Networks
- Octograph is a visualization of a social affiliation network based on GitHub contributions.
- Information Networks
- Octograph uses GitHub API to fetch user contributions (through the HTTP REST API)
This website is deployed on octograph.esinx.net. You can also run it locally by following the steps below.
- Clone the repository
git clone htps://github.com/esinx/octograph.git- Install dependencies
cd octograph
yarn- Setup Environment Variables
You will need a GitHub API token to run the application. You can create one by following the instructions here.
Create a .env file in the root directory of the project and add the following line:
VITE_DEFAULT_GITHUB_TOKEN=(YOUR_GITHUB_TOKEN)
- Run the application
yarn dev- Enter a GitHub username in the text input in the bottom left corner of the screen and click the "Create Graph" button. This will fetch the user's contributions and build the graph.
- Hover on nodes to see the user or repository name.
- Click on a node to perform a 2-layer BFS on the node and fetch the contributions of the users or repositories in the second layer. (This will take a while to load)
- Pan through the graph view and explore the GitHub contribution graph! You can also use the sliders on the top right corner to adjust the graph layout. You can configure the node distances and the centering strength(the higher it is, the more the nodes will be centered around a node with high centrality) of the graph.
