Tree: Visualizing File Structures with JavaScript

Tree: Visualizing File Structures with JavaScript

Sometimes it is useful to be able to see the structure of a directory of files in an intuitive way, such as a tree visualization. Unfortunately, many of the available tools for doing to must be downloaded and installed, which takes time and is sometimes a more complicated and risky endeavor than one would hope for when performing a simple task as visualizing some files.

To help solve this problem, I created Tree, a web-based program for visualizing file directories as a type of tree or web map. Users can use a command line interface or other tool to create a list of file paths, which are then parsed by the program and organized into a visual structure. The source code for the program is available on GitHub, and you can try a live demo here. Usage instructions for the program are available here, so I won’t go into it too much, but the dir /s/b > dir.txt command can be used to create a list of files, which is then pasted into Tree. A file network visualization is generated from this information – I’ll get into how this is done below.

Directory of the Tree repository

I won’t include any of the source code here, since full, commented code is available on GitHub. I’ll give a more general overview of how the program works along with some pretty screenshots.

For the file visualization, Tree uses the vis.js library. Among many other types of visualizations, vis.js can create networks with nodes connected to one another, showing how one element relates to another. This library is also nice because it allows for physical simulation of the nodes – you can drag one with your cursor and connected nodes will be pulled along as well.

In Tree, each file and folder is represented as a node labeled with the name of that file or folder. Folders are connected to the files and other folders they contain. This creates a “tree”1 that branches out in all directions and contains all the files and folders within the source directory that is visualized. This is what an example visualization may look like, using the samples directory of the Chart.js repository2.

Example file visualization

Before the visualization can be created, a list of files must first be generated. The input is split into individual lines (file paths), which are then split into individual folders and the file name at the end of the path. All the paths are looped through and a node is added for each one and labeled with the correct file name.

To determine which files/folders belong to which folders (and therefore which connections to create), we loop through each file path, and then loop through every other file path, and check if the home path of the original file matches the full path of any folder. If they match, then the file is contained within the folder. There may be a more efficient way of doing this, but I haven’t discovered it yet. There’s a little more magic we have to do to determine the correct color for each node (more on that later), but it’s not too elaborate.

Anyway, that’s the gist of it. It’s actually a pretty simple system, but I think it works well.

There are some different options for how the file structures are visualized. For instance, you can choose to show or hide the root directory from which all other files branch out. When it is hidden, the graph will look more like this:

Show root node disabled

Additionally, there are different settings for how nodes are colored. One option is to use the “object type” – files, folders, and the root node will all be colored differently.

Color nodes by object type

If set to “file level“, each level of files/folders will be colored differently. The files in the deepest subfolders have the highest level, while the source node3Not to be confused with “source code.”[/node] has the lowest level.

Color nodes by file level

Finally, nodes can also be colored differently according to their file type:

Color nodes by file type

Check out the README for more information about the program and available settings.

Much larger sets of files can also be visualized, though you should note that very large sets of files may perform poorly and/or taking a while to organize themselves. . Here’s a map of my directory of artificial intelligence and machine learning projects, as of a couple of weeks ago.

I hope you enjoyed this post; I definitely enjoyed working on this project and I am quite happy with the results. Thanks for reading, and I’ll see you tomorrow with another post.

  1. Guess why the program is called Tree.
  2. Because I had it lying around.