An Assignment graphing Github API data through the use of d3.js
If you want to quickly test the visuailser visit: Frank's Visualiser
To run the project, you will need Docker installed.
-
Clone the code in this repo
-
Copy this code into your terminal
docker build -t frank_visualiser . -
Copy this code into your terminal
docker run -d -p 80:80 frank_visualiser -
open your localhost port 8080 eg
localhost:8080
Upen finishing the assignment, a user should be able to input a the name of a github user/company (eg. Me or facebook) and see some data about that user visualised in the carousel
The first slide is a social graph. The graph contains blue nodes which represent the repos belonging to the selected user. It also contains orange nodes which are the top 30 contributers in each of the repos. These orange nodes are then linked to all the repos that they have contributed to. The social graph is built as a force directed graph as shown below in the apendix.
The second slide is a pie chart. The pie chart visualises the number of repos a users has and how many commits were made in each repo. The purpose of this is to easily identify the big and small projeects as different repos have a different number of commits depending on its size or complexity.
The last slide is a tree map. The tree map visualises the number of bytes of each language in a users repos. The purpose of this is to identify the main languages used by a user. The languages are mapped such that no language can be less than 1/500th the size of another, this was done to improve visualisation at the cost of a tiny amount of proportional accuracy in some edge cases such as my repos where javascript is exponentially bigger than some other languages such as dockerfile.
