5 ms·

Show HN: GitHub project structure visualizer

141 points by veniversum 11y ago

xtacy 11y ago
Very nice visualisation! It would be good to gracefully handle large graphs. I typed in "torvalds/linux" and my tab froze!
- veniversum 11y ago
  Yeah, I should've probably put up a warning not to try huge repos. Here's what torvalds/linux looks like on the visualizer (pretty cool!): https://imgur.com/a/AHNcn https://imgur.com/a/AHNcn
  - brbsix 11y ago
    That's incredible. I feel like I'm looking at a cell slide of a living organism.
    - veniversum 11y ago
      Yup, that was what came to mind at first too!
    - tehbeard 11y ago
      You might be interested in Gource then, it visualizes a repo in a very similar manner, but animates along the commit timeline. Here's a recording of the linux repo being parsed by gource. https://www.youtube.com/watch?v=5iFnzr73XXk https://www.youtube.com/watch?v=5iFnzr73XXk
tlipcon 11y ago
Suggestion: add an option to look at file contents and analyze cross-file dependencies (eg c/c++ #includes or java imports)
- veniversum 11y ago
  That's a cool idea! However as of right now this is a completely client-side JS app, it might take too much processing power and API requests to analyze individual files.
leeoniya 11y ago
neato, but would be much more neato if I didn't need to hover for labels [1] - at least at the first few levels also would be cool to color/heatmap them by recent modification dates, filesize, LOC, etc. [1] https://en.m.wikipedia.org/wiki/Mystery_meat_navigation https://en.m.wikipedia.org/wiki/Mystery_meat_navigation
- veniversum 11y ago
  Great suggestions! Might make it so that root level directories have their label always shown.
  - gravity13 11y ago
    I did something like this for Neo4j, if you're curious: image: http://www.gravitypersists.com/assets/neo3.gif http://www.gravitypersists.com/assets/neo3.gif https://github.com/neo4j-contrib/versal-cypher-gadget/blob/master/views/visualization.coffee https://github.com/neo4j-contrib/versal-cypher-gadget/blob/m...
curiousGambler 11y ago
In the same vein, gource is pretty cool. It shows the same sort of graph, but animated as it changes over time. So you can watch the project develop, and even see who was working on which files at which time. It's great to put up on a screen during launch celebrations or whatever. http://gource.io/ http://gource.io/
michaelmior 11y ago
I'm impressed with how fast this loads. Nice work!
mystickphoenix 11y ago
python/cpython (takes a long time...) clojure/clojure Are interesting visualizations as well.
leemac 11y ago
I tried dotnet/corefx but quickly realized my mistake. Very cool once you get a repo that is a bit smaller.
- OJFord 11y ago
  Sneaky. You knew we wouldn't be able to resist! Worth it to see the pseudo-organic growth though, if you zoom out enough (but not too far).
nkrisc 11y ago
Why does it move and wiggle? It makes it unnecessarily hard to click on nodes. Also, it took me at least 30 seconds to figure out how to start at all as I didn't notice the small inputs in the upper lefthand corner.
- david-given 11y ago
  Because it's using a graph layout algorithm called Force Directed Graph Drawing, where you basically connect the nodes together with springs and then run a simulation. The algorithm's really simple and works pretty well, but unfortunately it doesn't really have the concept of 'finished' --- you just keep simulating until it looks right. Some implementations watch for small deltas and when the change rate gets low they stop the simulation, but it can take a while and people frequently don't bother.
- artursapek 11y ago
  I agree, it shouldn't have to be moving immediately. It makes the page much laggier than it has to be.
daveloyall 11y ago
There is no error message when you target a repo that is (now, unexpectedly) 404.
nephyrin 11y ago
https://nemu.pointysoftware.net/sink/nephscreen-1456332101.png https://nemu.pointysoftware.net/sink/nephscreen-1456332101.p... At one frame per minute, I'm looking forward to where this goes Edit: Progress report (~1h): https://nemu.pointysoftware.net/sink/nephscreen-1456335941.png https://nemu.pointysoftware.net/sink/nephscreen-1456335941.p... Up to about 1fps. The DOM tree continues to gather its factions together under one banner. Meanwhile, the smaller but more easily organized devtools and webidl factions are making an early power play.
riquito 11y ago
To the author and any other with the same problem: I had to disable ublock origin to view the form at top left
swanson 11y ago
You should make the example text ("Try atom/atom") a link so I don't have to type in the boxes myself :)
Wintamute 11y ago
I'm looking forward to one day being shown a "visualizer" that actually gives me sane insight into the structure, instead of some wibbly-wobbly animated node graph that I have to click around and zoom in/out. These things can sometimes look pretty, but usually I'm left none the wiser about the actual structure.
- markburns 11y ago
  What would that look/behave like? I ask because I'm starting out on making some tooling for gaining insights into coupling and coherence in ruby, and I'm at a brainstorming phase. E.g. automatic domain concept detection and suggested refactorings around domain concepts. Re-organizing file systems into virtual filesystems based on multiple views/perspectives on the project, etc. Any ideas you have would be really good timing to hear about
  - akavel 11y ago
    Not really regarding what, but on the how front, I remember that one guy invented what he called "hive plots", and he seems to be claiming they're some kind of a panaceum to so called "hairball" plots: http://www.hiveplot.net/ http://www.hiveplot.net/ (His (?) earlier invention of a "circular graph" seems also to have gained some traction in sciency publications - see http://circos.ca/intro/circular_approach/ http://circos.ca/intro/circular_approach/)
  - aledalgrande 11y ago
    How about an Oculus Rift app with a 3D circuit?
    - skewart 11y ago
      I honestly think "writing" code in 3d with VR could be incredibly effective. I'm starting to work on a project to test it out.
- adenadel 11y ago
  Would rooting the tree help?
munificent 11y ago
Neat! Here's an annotated version of the repo for my programming language Wren: http://i.imgur.com/x3yztG8.png http://i.imgur.com/x3yztG8.png I think it says good things about Wren that the largest section, by far, is tests. Then a big blob for docs. The actual language interpreter itself is quite small.
- veniversum 11y ago
  Glad to see it being put to good use!
mkoryak 11y ago
awesome tool! One feature request: Being able to search/filter by name. I often find some file being included in the build and its a pain to track down exactly who uses it (ok, not a huge pain, but it would be so much easier to do it in this)
hyperchase 11y ago
torvalds/linux is utter chaos, brings chrome to a crawl :P
aledalgrande 11y ago
Aaaah! That thing is moving! It's alive!
ryanSrich 11y ago
Seems not to work for this site I made http://veniversum.me/git-visualizer/?owner=rr1000&repo=placeholder http://veniversum.me/git-visualizer/?owner=rr1000&repo=place... , but works for everything else. I guess node_modules are the issue?
timqian 11y ago
I have build a similar project showing the code structure. https://github.com/timqian/js-code-structure https://github.com/timqian/js-code-structure The idea to make it a website is great, I might build a similar website for js-code-structure

141 points by veniversum 11y ago

xtacy 11y ago

Very nice visualisation! It would be good to gracefully handle large graphs. I typed in "torvalds/linux" and my tab froze!

veniversum 11y ago
Yeah, I should've probably put up a warning not to try huge repos. Here's what torvalds/linux looks like on the visualizer (pretty cool!): https://imgur.com/a/AHNcn https://imgur.com/a/AHNcn
- brbsix 11y ago
  That's incredible. I feel like I'm looking at a cell slide of a living organism.
  - veniversum 11y ago
    Yup, that was what came to mind at first too!
  - tehbeard 11y ago
    You might be interested in Gource then, it visualizes a repo in a very similar manner, but animates along the commit timeline. Here's a recording of the linux repo being parsed by gource. https://www.youtube.com/watch?v=5iFnzr73XXk https://www.youtube.com/watch?v=5iFnzr73XXk

tlipcon 11y ago

Suggestion: add an option to look at file contents and analyze cross-file dependencies (eg c/c++ #includes or java imports)

veniversum 11y ago
That's a cool idea! However as of right now this is a completely client-side JS app, it might take too much processing power and API requests to analyze individual files.

leeoniya 11y ago

neato, but would be much more neato if I didn't need to hover for labels [1] - at least at the first few levels also would be cool to color/heatmap them by recent modification dates, filesize, LOC, etc. [1] https://en.m.wikipedia.org/wiki/Mystery_meat_navigation https://en.m.wikipedia.org/wiki/Mystery_meat_navigation

veniversum 11y ago
Great suggestions! Might make it so that root level directories have their label always shown.
- gravity13 11y ago
  I did something like this for Neo4j, if you're curious: image: http://www.gravitypersists.com/assets/neo3.gif http://www.gravitypersists.com/assets/neo3.gif https://github.com/neo4j-contrib/versal-cypher-gadget/blob/master/views/visualization.coffee https://github.com/neo4j-contrib/versal-cypher-gadget/blob/m...

curiousGambler 11y ago

In the same vein, gource is pretty cool. It shows the same sort of graph, but animated as it changes over time. So you can watch the project develop, and even see who was working on which files at which time. It's great to put up on a screen during launch celebrations or whatever. http://gource.io/ http://gource.io/

michaelmior 11y ago

I'm impressed with how fast this loads. Nice work!

mystickphoenix 11y ago

python/cpython (takes a long time...) clojure/clojure Are interesting visualizations as well.

leemac 11y ago

I tried dotnet/corefx but quickly realized my mistake. Very cool once you get a repo that is a bit smaller.

OJFord 11y ago
Sneaky. You knew we wouldn't be able to resist! Worth it to see the pseudo-organic growth though, if you zoom out enough (but not too far).

nkrisc 11y ago

Why does it move and wiggle? It makes it unnecessarily hard to click on nodes. Also, it took me at least 30 seconds to figure out how to start at all as I didn't notice the small inputs in the upper lefthand corner.

david-given 11y ago
Because it's using a graph layout algorithm called Force Directed Graph Drawing, where you basically connect the nodes together with springs and then run a simulation. The algorithm's really simple and works pretty well, but unfortunately it doesn't really have the concept of 'finished' --- you just keep simulating until it looks right. Some implementations watch for small deltas and when the change rate gets low they stop the simulation, but it can take a while and people frequently don't bother.
artursapek 11y ago
I agree, it shouldn't have to be moving immediately. It makes the page much laggier than it has to be.

daveloyall 11y ago

There is no error message when you target a repo that is (now, unexpectedly) 404.

nephyrin 11y ago

https://nemu.pointysoftware.net/sink/nephscreen-1456332101.png https://nemu.pointysoftware.net/sink/nephscreen-1456332101.p... At one frame per minute, I'm looking forward to where this goes Edit: Progress report (~1h): https://nemu.pointysoftware.net/sink/nephscreen-1456335941.png https://nemu.pointysoftware.net/sink/nephscreen-1456335941.p... Up to about 1fps. The DOM tree continues to gather its factions together under one banner. Meanwhile, the smaller but more easily organized devtools and webidl factions are making an early power play.

riquito 11y ago

To the author and any other with the same problem: I had to disable ublock origin to view the form at top left

swanson 11y ago

You should make the example text ("Try atom/atom") a link so I don't have to type in the boxes myself :)

Wintamute 11y ago

I'm looking forward to one day being shown a "visualizer" that actually gives me sane insight into the structure, instead of some wibbly-wobbly animated node graph that I have to click around and zoom in/out. These things can sometimes look pretty, but usually I'm left none the wiser about the actual structure.

markburns 11y ago
What would that look/behave like? I ask because I'm starting out on making some tooling for gaining insights into coupling and coherence in ruby, and I'm at a brainstorming phase. E.g. automatic domain concept detection and suggested refactorings around domain concepts. Re-organizing file systems into virtual filesystems based on multiple views/perspectives on the project, etc. Any ideas you have would be really good timing to hear about
- akavel 11y ago
  Not really regarding what, but on the how front, I remember that one guy invented what he called "hive plots", and he seems to be claiming they're some kind of a panaceum to so called "hairball" plots: http://www.hiveplot.net/ http://www.hiveplot.net/ (His (?) earlier invention of a "circular graph" seems also to have gained some traction in sciency publications - see http://circos.ca/intro/circular_approach/ http://circos.ca/intro/circular_approach/)
- aledalgrande 11y ago
  How about an Oculus Rift app with a 3D circuit?
  - skewart 11y ago
    I honestly think "writing" code in 3d with VR could be incredibly effective. I'm starting to work on a project to test it out.
adenadel 11y ago
Would rooting the tree help?

munificent 11y ago

Neat! Here's an annotated version of the repo for my programming language Wren: http://i.imgur.com/x3yztG8.png http://i.imgur.com/x3yztG8.png I think it says good things about Wren that the largest section, by far, is tests. Then a big blob for docs. The actual language interpreter itself is quite small.

veniversum 11y ago
Glad to see it being put to good use!

mkoryak 11y ago

awesome tool! One feature request: Being able to search/filter by name. I often find some file being included in the build and its a pain to track down exactly who uses it (ok, not a huge pain, but it would be so much easier to do it in this)

hyperchase 11y ago

torvalds/linux is utter chaos, brings chrome to a crawl :P

aledalgrande 11y ago

Aaaah! That thing is moving! It's alive!

ryanSrich 11y ago

Seems not to work for this site I made http://veniversum.me/git-visualizer/?owner=rr1000&repo=placeholder http://veniversum.me/git-visualizer/?owner=rr1000&repo=place... , but works for everything else. I guess node_modules are the issue?

timqian 11y ago

I have build a similar project showing the code structure. https://github.com/timqian/js-code-structure https://github.com/timqian/js-code-structure The idea to make it a website is great, I might build a similar website for js-code-structure