
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>P.S. HN&#x27;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&#x27;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](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/](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.

