Visualization GitHub repositories history.

• How to use:

  There are three main steps.
  Each step is logical stage contains of some setting.
  You can show/hide a layer or sub-layers from each stage.
  The new stage is opened after the previous stage is complete.

  • Step 1:

    • Enter a GitHub username.
    • Press "Show".
      This allows the application to receive a data about user and him repositories.

  • Step 2:

    • Select a repository on the graph or the list in the "Step 2" panel.
    • Press "Analyze".
      The application will now receive data about commits of
      the selected repository from "Default Branch" (Set in settings a repository on Github).
    • Contributors diagram
      • Click by a point at the "size" column for change a parameter to calculation the size pack.
      • Click by a name of parameter for change direction the sorting pack.
      • Mouseover on pack for show the tooltip by contributor.

  • Step 3:

    • The third stage panel allows you to customize the parameters for dynamic visualisation.
      You can also change these parameters once the visualization is running.
      These settings will be save in the localStorage or the browser cookies.
    • Press "Run" to begin visualization.
      You can use the "Pause", "Stop" and "Restart" buttons to control the visualization.

• What's it mean:

  • Step 1:

    • The size of node depends of date of create.
      Big nodes younger than small.
    • The opacity of node depends of date of last change.
      Transparent nodes have an earlier date of last change.
    • The color of node depends of main language.
    • Nodes surround the node that has a later date of last change.
    • Nodes repel each another if they have different language.
    • Languages diagram
      • Shows color of language.
      • Shows count of repositories per each language.

  • Step 2:

    • The X axis shows date commits.
    • Each red point is a commit.
    • Arcs to top and to bottom are count of added and deleted lines at a commit.
    • Areas show count of changed files
      Colors of areas: added files, modified files, deleted files
    • Contributors diagram
      • Shows activity contributors based on different parameters.

  • Step 3:

    • Each particle is a file. It moves from developer to developer.
    • The size of particle depends of the degree of changes.
    • Each user gathers files which he used.
    • If files leave a user orbit, it mean that they were deleted.
    • Every second is a day.
    • The histogram shows the number of files per commit, separated by a extension.
    • The legend shows the number of files for all time separated by a extension.

• What was used:

  UsesD3.js andGithub API.
  All rights to media contents formGitHub (fonts, some css selectors) belong to Github.

  
  HTML5:
  • Canvas — For dynamic visualization.
  • SVG — For interactive graphic.
  
  D3.js layouts:
  • Force — For calculate layer with repositories and dynamic visualization.
  • Pack — For calculate commiters diagram.