Scoped: Evaluating A Composite Visualisation of the Scope Chain Hierarchy Within Source Code

This paper presents two studies that evaluate the effectiveness of a software visualisation tool which uses a com-posite visualisation to encode the scope chain and information related to the scope chain within source code. The first study evaluates the effectiveness of adding the composite visualisation to a source code editor to help programmers understand scope relationships within source code. The second study evaluates the effectiveness of each individual component within the composite visualisation. The composite visualisation is composed of a packed circle tree diagram (overview component) and a list view (detail view component). The packed circle tree functions as an abstract mini-map to provide viewers with a high-level overview of the scope chain hierarchy within a source code document. The list view provides additional information about identifiers (variables, functions, and parameters) that are accessible from the scope within which the cursor is located, in the source code document. Both studies utilise a between-subject design, in which groups of participants were presented with source code fragments and asked to answer a series of code understanding questions. The results of the studies indicate that adding a composite visualisation to a source code editor can have a positive effect on code understanding, especially when the textual representation of the code no longer corresponds to the actual behaviour of the code (as is the case, for example, in languages such as JavaScript that implement variable hoisting).