While I love the look of force-directed-graphs, they wind up representing lots of arbitrary/random values, in all the degrees of freedom of the exact location/angles/proximities they settle into.
I would suggest using a more traditional nested-outline view, either overall or within certain subgraphs. Then, the above/below axis could mean something consistent -- like ordering in source code -- and the left/right something else -- like nesting/composition. And there might be more room for projecting persistent time information -- like a piano roll -- off in a particular direction.
Wow. Kindly+thoughtfully toned, pertinent and constructive criticism that is rewarding and encouraging. And at the top. I wish this wasn't as refreshing in HN as it is, but it is damn refreshing.
I have a visualization tool for c# - https://www.codeperspective.com . I found that left to right rank graphs work really well when showing order of execution as most programs have very little high level recursion.
This is an initial concept/prototype I've been working on today. Pretty neat I think, but not exactly sure of the use case yet beyond making code more visual. All thoughts on that front gladly received!
It might be interesting to be able to slow down the visualization. Right now it all happens instantly, whereas you might be able to see the flow from one method to the next.
I think a timeline view probably makes more sense ultimately, but I have just modified the demo so that the events happen sequentially, and you can see a trail of events via expanding bubbles from the nodes.
This is something I've been thinking about myself. Sometimes when writing large Backbone apps you may find yourself binding the same event twice to a model, or creating memory leaks by not deleting objects efficiently. It would be great if this tool could pick up on code mistakes like that.
Personally I find the force-directed graph animations distracting. I would render the graph statically and have better animations for the propagation of information in your code.
Hey there, I'm the developer of a browser based IDE called pixelJET. I was researching visual JavaScript debugging concepts to integrate into pixelJET when your post came up on HN.
It's not really a real world applicatoin yet, but if it helps, your post inspired me gave me some ideas for integration into the product. If I publish anything I'll be sure to give you a shout out :)
A couple of thoughts for the demo, it would be cool to see the actual JavaScript source code too, so you could get a feel for what the visualisation is showing you. Also, noting which functions were event handlers would be useful, although a bit tricky.
It would be great to see a timeline, where each method invocation leaves a colored point behind it. So there would be colored trails as time progresses. Then it would be useful to spot methods that are called too often. Or to quickly see the call stack. ESP if you could zoom in and examine the recorded history. That would be so much better than stepping through a debugger.
Also if it was injectable via a bookmarklet into a running backbone application. That would make it a great debugging tool.
Bonus points : click on a method to see the source code
I would like to be able to click and go into the prototype definition of the object it is displaying , would be a great thing. And also be able to use that live while an application is running , so i can see the object graph, when instance are created ,etc ... anyway that idea is just awesome !
While I love the look of force-directed-graphs, they wind up representing lots of arbitrary/random values, in all the degrees of freedom of the exact location/angles/proximities they settle into.
I would suggest using a more traditional nested-outline view, either overall or within certain subgraphs. Then, the above/below axis could mean something consistent -- like ordering in source code -- and the left/right something else -- like nesting/composition. And there might be more room for projecting persistent time information -- like a piano roll -- off in a particular direction.
Still very pretty, interesting, and promising!