Show HN: Instrumenting and visualizing JavaScript with d3.js | Hacker News Reader

Show HN: Instrumenting and visualizing JavaScript with d3.js

latentflip.github.com

105 pointsphilip_roberts22 comments

Very cool.

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!

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 think I agree! :) and thanks.

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.

That looks pretty amazing!

Recent similar project https://github.com/hughsk/colony

Posted here but with no comments http://news.ycombinator.com/item?id=4676314

Isn't that static analysis though? That would make it a bit different then.

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.

That's a good idea, I will give it a try. Could get awkward with the async nature of JS but I will see what I can come up with.

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.

I have the same experience with Backbone apps... Even something that graphed model/collection/view connections would probably be super useful.

This looks really cool! Not sure what I'd use it for, but it looks awesome.

Have any use cases in mind?

Not sure exactly! It just seemed like a fun thing to try.

I guess I am just interested in how to make code more visual.

I haven't tried it on a "real" code base yet but I will.

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

This is really cool for sure. I can see how it's useful for teaching JavaScript concepts or doing analysis on code. Good job!

This would cool as a bookmarklet that can launch the graph in a modal window when viewing any JS app.

This is pretty awesome, great job.

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 !

I have made a start on graphing the instantiated objects, but my brain started to hurt :)

Reply on news.ycombinator.com