https://github.com/evoluteur/meet-the-fans

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

d3-visualization d3js followers force-layout forks github github-api github-forks github-profile github-projects github-stargazers graph graphql history network repository social-network social-networks stars visualization

Last synced: 3 days ago
JSON representation

Query and visualize the network graph of your GitHub repositories, followers, stargazers, and forks (using GraphQL and D3).

• Host: GitHub
• URL: https://github.com/evoluteur/meet-the-fans
• Owner: evoluteur
• License: mit
• Created: 2020-09-28T00:18:30.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-07T08:34:46.000Z (19 days ago)
• Last Synced: 2025-01-16T01:13:21.593Z (10 days ago)
• Topics: d3-visualization, d3js, followers, force-layout, forks, github, github-api, github-forks, github-profile, github-projects, github-stargazers, graph, graphql, history, network, repository, social-network, social-networks, stars, visualization
• Language: JavaScript
• Homepage: https://evoluteur.github.io/meet-the-fans/
• Size: 1.45 MB
• Stars: 77
• Watchers: 6
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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

README

        
![Meet-the-Fans](screenshots/mtf.png) · [![GitHub license](https://img.shields.io/github/license/evoluteur/meet-the-fans)](https://github.com/evoluteur/meet-the-fans/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/meet-the-fans)](https://www.npmjs.com/package/meet-the-fans)

Network graph of repositories, followers, stargazers, and forks to meet your GitHub fans.

[![Evoluteur's graph](screenshots/mtf-data-viz.png)](https://evoluteur.github.io/meet-the-fans/)

## Getting the data

[Get your data](https://evoluteur.github.io/meet-the-fans/index-data.html) (user info, repositories, followers, stars, and forks) using [GitHub GraphQL API](https://docs.github.com/en/free-pro-team@latest/graphql).

[![Get your Data](screenshots/mtf-data-fetch.png)](https://evoluteur.github.io/meet-the-fans/index-data.html)

You will need a [GitHub Access Token](https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token).

## Visualizing the data

[Visualize your data](https://evoluteur.github.io/meet-the-fans/) using D3 force layout.

You will have to change the path to "data/data-evoluteur.js" for the new file you just downloaded (in [index.html](https://github.com/evoluteur/meet-the-fans/blob/master/index.html)).

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

[![Evoluteur's graph](screenshots/mtf-data-viz-2.png)](https://evoluteur.github.io/meet-the-fans/)

The graph supports zoom and pan. Colors, size and force layout can be configured in the [config.js](https://github.com/evoluteur/meet-the-fans/blob/master/config.js) file. You may also want to modify the [CSS](https://github.com/evoluteur/meet-the-fans/blob/master/css/meet-the-fans.css).

```javascript

const config = {

  height: 1600,

  width: 1200,

  strength: -30,

  distance: 50,

  userColors: {

    follower: "#B9D7EB",

    star: "#86BDDC",

    fork: "#1966AC",

    both: "#4A96C9",

  },

  colorFaded: "#e1e1e1",

  circleBorder: "white",

  maxTopics: 5,

};

```

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

```javascript

npm install

npm run mini

```

## License

Meet-the-Fans is released under the [MIT license](http://github.com/evoluteur/meet-the-fans/blob/master/LICENSE).

Encourage Meet-the-Fans by [becoming a sponsor](https://github.com/sponsors/evoluteur).

## More...

Check out my other project [GitHub-Projects-Cards](https://github.com/evoluteur/github-projects-cards) for a [Cards view](https://evoluteur.github.io/github-projects-cards/) of your Github projects.

Get the [Cool Code Ninja T-Shirt](https://www.redbubble.com/i/t-shirt/Cool-Code-Ninja-by-evoluteur/163497552.A5PYK).

[![Screenshot](screenshots/cool-code-ninja.jpg)](https://www.redbubble.com/i/t-shirt/Cool-Code-Ninja-by-evoluteur/163497552.A5PYK)

Copyright (c) 2025 [Olivier Giulieri](https://evoluteur.github.io/).