meet-the-fans

Network graph of GitHub repositories, followers, stars, and forks.

Usage no npm install needed!

<script type="module">
  import meetTheFans from 'https://cdn.skypack.dev/meet-the-fans';
</script>

README

Meet-the-Fans · GitHub license npm version

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

Evoluteur's graph

Getting the data

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

Get your Data

You will need a GitHub Access Token.

Visualizing the data

Visualize your data using D3 force layout.

Evoluteur's graph

You will have to 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 left pane) highlights it with its stargazers and forks.

Evoluteur's graph

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 = {
  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:

npm install
npm run mini

License

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

Copyright (c) 2022 Olivier Giulieri.