
Show HN: Instrumenting and visualizing JavaScript with d3.js - philip_roberts
http://latentflip.github.com/violin
======
gojomo
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!

~~~
stephth
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.

------
swax
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.

~~~
philip_roberts
That looks pretty amazing!

------
irickt
Recent similar project <https://github.com/hughsk/colony>

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

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

------
philip_roberts
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!

~~~
mnutt
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.

~~~
philip_roberts
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.

------
dmvaldman
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.

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

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

Have any use cases in mind?

~~~
philip_roberts
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.

~~~
jmitcheson
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.

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

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

------
VeejayRampay
This is pretty awesome, great job.

------
camus
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 !

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

