Github Filetree Visualizer
The Github Filetree Visualizer combines the D3 library with Github's API to create powerful visualizations of JavaScript-based repositories.
Cloning the Repo
If you wish to run this repo locally by cloning it:
- get the angular cli package with
npm install -g @angular/cli
- run
ng serve
to bundle and serve on 4200 - to push to github pages, run
npm run build
andnpm run gh
after installing theangular-cli-ghpages
package
Features
The visualizer will parse out the contents of any given repository, sift through all files with a .js
, .jsx
, .ts
, or .tsx
extension, and calculate the interdependencies based on the contents of the files.
Users can input either the Github URL or the user, repo, and an optional subdirectory. The visualizer will retrieve and display the files in a graph.
Nodes denote files with a .js, .jsx, .ts, or .tsx extension. The size of the node corresponds to the size of the file. Nodes are colored by the subdirectory they are in.
Users can click on a node to highlight its links and display its contents. To remove highlighting, users can click on the same node or on the background. Users can also click and drag nodes around.
The visualizer is compatible with various major repositories, including Redux, Express, and React.
How it works
The visualizer sends XHRs via the Github API - one to retrieve the SHA of the most recent commit, one to retrieve the file tree, and a series of requests to retrieve the contents of every .ts
, .tsx
, .js
, or .jsx
file. It stores each file as a node and examines file dependencies to construct links between each file. Using a combination of data structures, memoization, and regex, the parser rapidly determines the tree structure and converts import
or require
statements into links. The resulting JSON is then rendered in D3.
Notes
- The visualizer ignores any file named
bundle.js
orbundle.js.map
, and any similarly named files likebundle.aoeu.js
- References to node modules or files outside of the specified subdirectory are ignored
- Nodes are grouped and colored by the subdirectory immediately following the specified directory, e.g. with a specified directory of
frontend/component
, all files infrontend/components/channel
will be one color and all files infrontend/components/workspace
will be a separate color. Providing a subdirectory (if applicable) will result in more colorful graphs - The subdirectory field can take in any number of folders, e.g.
src/app