--------------------------------------------------------------------------------------------------------------------
 
 
Realtime javascript visualization 
in the web browser
The project aims to give people who do not programm themselves,
an idea and an image of what happens behind the user interface
of a website. The goal is to let the user experience rather than explain
to him/her what happens when for example a button is clicked
or a page is scrolled.
 
Three visualizations show different aspects of the javascript
function-network that is build by the developers and executed when 
the user interacts with the website.

 
jnstrument is my bachelor thesis project for the school of arts in 
Basel, Switzerland created in summer '13. The project has been 
super-
vised by Indre Grumbnaite and Ludwig Zeller.
 
The Project is still work in progress. To learn more about the technical
side and the source code, have a look at Github.
 
--------------------------------------------------------------------------------------------------------------------

 
Try it yourself! 
Visit: jnstrument.com
 

--------------------------------------------------------------------------------------------------------------------


Installation
 
--------------------------------------------------------------------------------------------------------------------

 
Three Visualizations
Visualization 1:
Single functions can be selected to see where most of its
work load comes from and to 
which function it gets passed along.
 
Visualization 2:
This Visualization shows the activity of the called javascript functions
over time.
 A function rises on the graph when its active and
falls when its not, moving to the right for every time its executed.
 
Visualization 3:
right now. It shows the work load that gets processed even 
 
 
--------------------------------------------------------------------------------------------------------------------

 
Details
Function Network
Every function is connected to its caller and the functions it calls.
The origin of the call is marked by stronger line, whos length depends on
the amount of calls that go through that connection. Blue functions
call more functions than they are being called. Green functions are more
called then they call functions themselves.
Selected Function
When selecting a function, one can see where this function gets
called from and which functions it calls.
Selected Function Hightlight
When Selecting a function in the main visualization, this element gets
hightlighted on all open visualizations. This is valuable when all
three visualizations visible in the installation, so that the visualizations
of the selected 
function can easily be compared.