Ask HN: A treemap WebGL 3D visualizer for software deps?
Motivating example: "Visualization of the Static aspects of Software: a survey, p. 12 Fig. 23 (left), p. 16 Fig. 30"
Clearly, this had been done before, but I want to modernize it a bit and make a standalone script that would create such diagrams and render them with WebGL. This tool could be used on any project on github. I think, it's a useless, but cool idea.
Here is my plan:
1. Generate a json file with AST of the sources. For this reason, it's easier to start with typescript because it provides this parser out of the box. The end result will be a command line script: `ts2ast src/foo > /tmp/foo/ast.json`.
2. Convert AST into a json file with the logical treemap representation of chosen granularity. For example, we care about dirs, classes and methods, so only they will appear in the treemap. The end result is a command line script: `ast2treemap /tmp/foo/ast.json > /tmp/foo/treemap.json`.
3. Generate a specific layout with 3D coordinates for the treemap. This layout describes a set of colored cubes and their coordinates: `treemap2layout /tmp/foo/treemap.json > /tmp/foo/layout.json`.
4. The layout is still too abstract, so convert it to a specific renderer format, namely the Three.js JSON Object Format. The output will precisely describe the scene in three.js terms: `layout2three /tmp/foo/layout.json > /tmp/foo/three.json`.
5. Generate an actual html+js page that uses three.js to load the scene from the json file and render it with WebGL: `three2html /tmp/foo/three.json > /tmp/foo/index.html`.
To summarize: `src/foo//*.ts` -> AST -> treemap -> layout3d -> threeobj -> index.html -> WebGL.
Step 1 can be replaced with a C++ or Java parser, as long as there is a lib to parse sources and generate AST in the same format.
Thoughts?
0 comments
[ 303 ms ] story [ 794 ms ] threadNo comments yet.