Iswaac.dev – WebGL 3D software visualization

[rfhjt]

Here is my attempt to visualize software as a 3d treemap. As of now it visualizes what contains what: the foundation is the entire project, layers on top are folders, then files, classes and methods. All this is rendered with WebGL. You can choose any TypeScript project from GitHub.

P.S. HN's post submission process is outright hostile. Somehow I messed up my first attempt to submit a post and HN banned the domain name. Now I have to work around that ban. On top of that there are shadow bans that let you post, but others won't see that.

[sw3d]

The treemap json file is created on a cheap VPS droplet: it git-clones a github repo, extracts AST with the TypeScript Compiler API, applies d3.treemap and converts the treemap into a flat list of 3d boxes for WebGL.

The repo can be set in the URL: https://iswaac.dev?microsoft/vscode/src (careful with this one: it generates 40K boxes and WebGL may crash).

Disclaimer: I do not work for MS; the typescript/vscode are just good examples of sufficiently complex TS projects.

[billconan]

what I want to get from software visualization is being able to understand the code base better. But so far I haven't seen any visualization tool can do it.

The most famous code visualization tool is perhaps https://gource.io/

the only information I can get from looking at its results is "projects grow", which is something I can conclude without the visualization.

why is 3d treemap better than looking at folders (2d treemap)?

[rfhjt]

It's the aerial view vs the address book difference. The intent is to draw dependencies as underground pipes: you select a building and see what it's connected to.

This isn't a startup: it's just a side project that I've spent maybe 12 hours on.

[rfhjt]

Update: post hidden as it's clearly missed the "be seen" window.