Tracing Visualizations

I’ve been playing with javascript function tracing. There’s a lot of interesting ways function trace data can be presented. First, one must choose whether to to present a linear trace through the code or a call graph. Once you’ve made a choice of data type, how you present the data becomes key to how easily insights are gained.

I originally started by simply logging linear traces to the console. For test data, I’m using the open source Pocket Island HTML5 game. This provided some interesting data about the flow of functions as they occurred, but it’s too much data even after I filter out fast functions and traces.


At New Relic, we’ve been playing around with D3.js for visualizations. I decided to try to implement a call graph instead, and came up with a somewhat useful tree diagram.


However, the diagram gets rather unwieldy the more functions and depth your tree has. And though I highlight slow and/or hot paths through the code, it still doesn’t provide an easy way to gauge the relative time spent by each function. My next goal is to switch to a sunburst diagram, which provides multiple benefits.


Firstly, we can do both linear traces and call graphs using the sunburst diagram. For linear traces, the radial axis would represent time, and each block in the rings around the center would represent a function being called. Outer rings represent functions called by functions in the inner rings. For call graphs, the radial axis would represent the total time, and blocks would represent the relative amount of that time spent in each code path.

Secondly, because the time axis is limited, we no longer have the potential for a horrendously long time axis. Durations will neatly be divvied up around the circle, which still maintains the most important property of helping the user understand the relative differences in time spent among code paths.

Lastly, we can do some interesting coloring to visualize general paths through libraries. Each function block could be colored based on the file in which it resides. This would provide an interesting insight into how segmented one’s code base is.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>