evoluteur/meet-the-fans: Query and visualize the network graph of your GitHub repositories, forks, followers, and stargazers (using GraphQL and D3).

!Meet-the-Fans ·

Installation

Download or clone from GitHub.

# To get the latest stable version, use git from the command line.
git clone https://github.com/evoluteur/meet-the-fans

or use the npm package:

# To get the latest stable version, use npm from the command line.
npm install meet-the-fans

Project structure

The two files you'll actually use are:

• index-data.html — fetches your GitHub data (see Getting the data).
• index.html — renders the graph (see Visualizing the data).

Getting the data

Get your data (user info, repositories, followers, stars, and forks) using GitHub GraphQL API.

Open index-data.html in your browser to fetch and download your data easily. Just enter your GitHub user name and your GitHub Access Token, then click the "Fetch data" button.

Your token stays in your browser: it is used only to call the GitHub GraphQL API directly from your machine and is never sent to any server.

Visualize your data using D3 force layout.

To switch to your data, change the path to "data/data-evoluteur.js" for the new file you just downloaded (in index.html).

Clicking a project dot (on the graph or in the side pane) highlights it with its stargazers and forks.

The graph supports zoom and pan. Colors, size and force layout can be configured in the config.js file. You may also want to modify the CSS.

const config = {
  // svg size
  height: 2000,
  width: 2000,
  // graph params
  strength: -30,
  distance: 50,
  // colors
  userColors: {
    follower: "#B9D7EB",
    star: "#86BDDC",
    fork: "#1966AC",
    both: "#4A96C9",
  },
  colorFaded: "#5f5f5f",
  circleBorder: "white",
  // misc.
  maxTopics: 5,
};

To rebuild the project (minimizing the JS), run the following commands:

npm install
npm run build

License

Meet-the-Fans is released under the MIT license.

Encourage this project by becoming a sponsor.

Related projects

You may also like these projects:

• GitHub-Projects-Cards (demo) for a cards view of your Github projects.
• npm-Pulse (demo) for a dashboard of the downloads, sparklines, and trends of your npm packages.