'

PyCodeViz: An Interactive Visualization Tool to Facilitate Program Comprehension


Tool Description

PyCodeViz helps in enhanced visualization of programs exhibiting granular changes in constructs such as iterative, conditional, and recursive statements for Python. It helps the user to keep track of changing variables which makes the code easy to debug and understand.

See GitHub repository

Installation

From Github

Clone or download this github repository:

git clone https://github.com/rishalab/PyCodeViz.git

Install the requirements:

pip install bottle

Get into the v5-unity directory:

cd PyCodeViz/v5-unity

To start the server use the following command:

bottle_server.py

Then, open your browser to 'http://localhost:8000/visualize.html'

Architecture diagram

PyCodeViz has an Execution Visualizer at the front-end. The Execution Visualiser handles the front-end's four main sections: the Navigation Controller, the Data Visualiser, the Code Display Box, and the Output Box. The Data Visualiser section has four sections: Classes and Functions renderer to display the classes and functions, Stack renderer to display function calls and global frame, Heap renderer to display complex data types like lists, maps and tuples and the Flow structures renderer to render loops and if conditions.

elegant icons

Features

PyCodeViz has the following features:

  • Code Display Box: It displays the code entered by the user and colour-codes the lines during runtime. It also visualizes the code frequency by adding darker colour to the line numbers of the lines that run more times.
    elegant icons

  • Data Visualizer: It displays all the data of the program like functions, classes, variables, objects, loops and conditions. It has separate columns for flow structures like loops and if conditions. It also shows the iteration number of the loops.
    elegant icons
    It also displays the previous value of the changed variables and shows the recursive stack of recursive functions.
    It has a separate column for classes and functioms where the user can see all information about the classes and functions.
    It color-codes the variables with different data types according to the legend provided below the code display box. This helps the user to understand type casting easily.
    elegant icons

    elegant icons

  • OutputBox: Here, the user can see the program output generated by print statements. He can hide the box or show it at his wish.
    elegant icons

Uses

  • Novie developers often find it difficult to comprehend basic programming constructs such as iterative statements, if conditions and recursive functions. This tool can be used to have a better visualization of these statements.
  • PyCodeViz provides more granular details like the previous value of the changed variable. This allows the user to track the variables and have easy debugging.
  • It can be used to understand step-step execution of the code snippet. The novice developers can use this tool to comprehend standard algorithms easily.

Results

We have evaluated the tool with 11 undergraduate students. Each of them was given different code snippets to test, try and understand the code. They could also write their own code and check. Results

Contributors

Anush Mangal, A Eashaan Rao, Sridhar Chimalakonda

Preprint