2020 IEEE International Conference on Big Data (Big Data)

Data Structure Visualization on the Web

Juan Lin Hui Zhang
Dept. of Comp Sci. & Eng. Dept. of Comp Sci. & Eng.
Speed School of Engineering Speed School of Engineering
University of Lousiville University of Lousiville
Louisville, USA Louisville, USA
2020 IEEE International Conference on Big Data (Big Data) | 978-1-7281-6251-5/20/$31.00 ©2020 IEEE | DOI: 10.1109/BigData50022.2020.9378249

juan.lin@louisville.edu hui.zhang@louisville.edu

Abstract—One challenge remains in teaching and learning data Our goal in this paper is to develop an dynamic visualization
structure is to facilitate students’ understanding of the dynamic tool that requires minimal operations from learner to provide
presentation from the collection of data elements in memory. the “visual snapshots” of the collection of data elements
Visualizing how each element points to the next, and how a
collection of nodes together represent a sequence with graphs belonging to the data structures being studies in a more
or linked-node diagram can help us understand not only the efficiency way. By applying run-time detection on the data
abstract data structure but also the dynamics of the data elements structures, we can visualize the data elements and their corre-
in the program execution. While printing (to a console) is a sponding structures to enhance students’ learning experiences.
very common technique for understanding and debugging data The major features of our data structure visualization tool
structures, we in this paper presents an interactive visualization
tool for data structure in Python. Our work focuses on visual include:
and interactive methods to facilitate the communication of data • Web-based Interface — Different from a few prior efforts
structure and associated data operations by dynamic graphing (see e.g., [1]–[4]), in our solution we adopt a web-
corresponding to the programming process. By using the inner based framework where only a web browser is required.
execution trace, our proposed method can monitor the run-time
data structure change and render the corresponding presentation Without any installations needed, we believe it is the right
in real-time. The resulting serial of key frames featuring major way to allow learners to access our tool in any learning
data structure transformation are available for review and environment and at any time desired.
analysis. All these combine to fill the gap between the abstract • Python-focused — Python is getting more and more
data representation and a dynamic learning-by-coding process. popular over the last decade. The traditional data struc-
Index Terms—Python, Data Structure Visualization, Web- ture courses using C/C++ Programming Language have
Based
been getting replaced by Python in many universities all
around the world. In spite of numerous data visualization
I. I NTRODUCTION productions presented with Python, there is little work
that truly focus on Python programming visualization.
In computer science education, data structure course (CS2) • Dynamic and run-time — Our solution to visualize data
is notoriously difficult for undergraduate students and junior structures captures and illustrates not only the static data
programming learners. As a fundamental course, CS2 em- structures but also the dynamics of the collection of the
phasizes a common data structures that are used in various data nodes in real-time, and in the way closest to the
computational problems, and it is crucial to help our students problem being studied.
to fully understand what is going on inside a particular built-in The rest of our paper is organized as follows. In section
implementation of a data structure and what to expect from it 2 we review related work and existing tools in dynamic data
in CS2. However, traditional ways to teach such important con- visualization. In section 3 we describe our methods to design
cepts has been heavily relying on PowerPoint slides assisted and implement the dynamic data structure presentation in our
with animations to demonstrate the data operations, which interface and we provide examples in details in section 4. In
is only useful for pre-designed (and often over-simplified) section 5 we present a preliminary user experience study, with
programs but still requires intensive preparation work for a conclusion in the final section.
instructors. The general tools available for learners to analyze
the dynamic behavior of programs are the debuggers and print II. R ELATED W ORK
commands, which are only useful for linear data structures. Dynamic data visualization allows us to get visual infor-
For those non-linear data structures, obtaining data sets in mation in an easy and compelling manner from data sets.
the debugger or displaying them on the console won’t simply It helps to uncovering new and useful insights which is
give us a useful presentation; understanding the actual data otherwise difficult to discover from piles of abstract data.
structure and associated data manipulations requires hands-on Visualization dynamics is too broad a topic to address as
exercises and manual drawings, which is often cumbersome a single unit. Important differences are found between user-
and error-prone. driven and data-driven changes [5]. For data-driven changes,

978-1-7281-6251-5/20/$31.00 ©2020 IEEE 3272

Authorized licensed use limited to: UNIVERSIDADE DE SAO PAULO. Downloaded on March 29,2024 at 23:30:13 UTC from IEEE Xplore. Restrictions apply.
Fig. 1. Web-Based Interactive Visualization for Data Structure in Python: our tools depicts and traces the input structure data correspond with dynamic
programming execution. The tool’s user interface elements include: a — The code edit panel to edit and execute Python program; b — the graphical
illustration panel to depict the real-time data structure; c — A snapshot viewer controller that provides trace the data structure change; and d — A result
output panel to show the overall statements.

the major task is to identify the corresponding connection [2]. DSI identifies the dynamic data structures in C programs
between the visualization and the dynamic data in a simplified during execution time with C heaps [7]. TRAVIOLI focuses
method [6]. For our CS2 courses, such a connection is essential on following the traversal operations in data structures within
for students to understand the abstract data types and then to execution contexts and access graphs [4].
apply the appropriate implementations. In the past few decades, several visualization tools have
In terms of data structure analysis, a large body of prior been developed to analyze data structure with dynamic an-
efforts have focused on navigating and visualizing the active imation expression. University of San Francisco provides a
presentation from different aspects. The *J shape analyzer in- series of classic data structures and algorithms with interactive
vestigates heap data through tracking the Java program execu- animations [8]. VisuAlgo was conceptualised in 2011 for
tion and visually illustrating the evolution of program data [1]. various CS2 and algorithm classes. The visualizations illustrate
Heapviz presents a heap snapshot by running Java programs, various structures with animations, and extra online quiz
with nodes to represent objects and edges to represent pointers component is also included [9]. UUhistle provides a software
for exploring objects detailed informations and connections tool for Python visualization [3]. It is written in Java and

3273
Authorized licensed use limited to: UNIVERSIDADE DE SAO PAULO. Downloaded on March 29,2024 at 23:30:13 UTC from IEEE Xplore. Restrictions apply.
needs to be downloaded and installed prior to usage therefore b) Graphical Illustration – The major visual panel to
it lacks the flexibility. Google designs Online Python Tutor for present the corresponding structure obtains from the program
teaching introductory Computer Science (CS) courses. After execution result. Wherever a data alternation happens, the
code execution, the website outputs the list of variables line resultant change directly presents to reflect the influence with
by line and allows users to trace back [10]. In spite of the each code line, and the current snapshot is saved for later
rich history of related work in this field, we found some check.
significant parts are still missing and current efforts fail to c) Snapshot Viewer – The “snapshot” view controller
provide a direct and instant visual feedback that can facilitate provides the access to summarize the structure transformations
a learner’s understanding about data structure. For example, arise from the code modification. Each snapshot can be
most of them can only use the embedded code, if some selected to backtrack the dynamic structure alteration.
changes happen, a reload operation must be given to refresh d) Result Output – The program output shows the overall
the contents [10] [4] [2] [7]. Some of them only provide their output of statements issued by the debugger at the current
own programs for visualization and have not interfaces for execution point, including the cumulative output of print
modification [8] [9]. The main difference between these tools statements and error message.
and our tool is that ours provides a direct and interactive IV. D ESIGN M ETHODOLOGY AND I MPLEMENTATION
means for data element operation, as shown in Fig 2. In most
prior work, after a complete source code input, a statistic Our purpose is to provide a direct and intuitive way for users
analysis work follows to derive a list of variables. Then a to follow their programs and investigate the data flow changes.
visual abstraction is render based on the values of the list of It is motivated by the painful learning experience from CS2,
variables. When modifications are desired, such a procedure where learners try harder to investigate each program line
has to be performed from the very beginning. In contract, our function by drawing messy lists, stacks, trees, and graphs etc.
tool directly transforms the static variable analysis in the back- with pencil and paper.
end and directly renders the resultant data elements using a In recent years, Python has been getting more attraction
linked-node diagram. Whenever a change in the data elements and designated as a programming language for CS2 course all
occurs, our tool will provide a updated visualization instantly round the world, therefore we choose Python as the supportive
with just a page refresh. language. Our tools can also be extended for multiply level
usage. For CS1 courses that main purpose is to learning a
specific programming language, our tool is equally easy for
them to use. The extra console print operation is replaced by
our colorful graphical present, which is more attractive and
easy to follow.
Overall, our tool is a web application designed with Flask
web framework written in Python, and a front-end rendered
with JavaScript, Bootstrap [11], and CodeMirror [12] for code
editor text input area.
A. Front-end
The front-end is a web site which is compatible with all
modern web browsers without extra extensions and plugins.
The user first pasts a Python program in code editor panel.
For each line end, the current content is submitted to the
Fig. 2. The road map comparison between the traditional visualization method back-end with a POST request. After parse and execution,
and our updated method. Our method skip the static variables analysis and the server sends back the rendered graphs and the results of
directly presents resultant data in real-time operation.
process, those are showed in graphical illustration panel and
result output panel separately.
III. OVERVIEW B. Back-end
Figure 1 shows the web-based interface in Google Chrome. After executing current program, the data-structure-based
Our tool derives from the familiar pencil-and-paper process classes and instances are recorded with their types and detailed
of printing and drawing abstract data structure, with input data. If the operation evolves any data alteration, the back-end
interface to allow the edit of program, the exploration of the parses the data structure type, and depicts it with the related
resultant intermediate outcomes, and a sequence of captured graphic structures. Current snapshot is also recorded for later
frames to reflect the continuous data alteration in the complete trace. If the execution fails, the graphical panel maintains the
execution. The four major user interface elements are listed as last successful presentation, with an error information prompt
follows: output in the result panel.
a) Code Editor Panel – The source code editor tool allows The inner set of data structure is a redesign version from
users to edit and debug their own program. [13], in which contains the common data structures. Wherever

3274
Authorized licensed use limited to: UNIVERSIDADE DE SAO PAULO. Downloaded on March 29,2024 at 23:30:13 UTC from IEEE Xplore. Restrictions apply.
comes to data alteration, an inner-packaged depiction function 2) Balanced parentheses problem: Here a balanced paren-
works to display and save the resultant structure graph. Pri- theses algorithm is given to show the detailed operation of
mary users can use these operations to build their own program our method. For balanced parentheses problem, given a string
or inherit them to further extension. contain some type of delimiters, for the parenthesis to be bal-
anced, each open parenthesis must match a close parenthesis
C. Presentation in a correct order. Fig 16 shows the solving approach with
stack and relative rendered graph. Each time, when an open
In this section, a wide range of examples comprise of the parenthesis is encountered, it is pushed in the stack, when an
very basic data structure elements are presented to show the closed one is encountered, the matching parenthesis on the
detailed functionality. Two practical algorithm examples are top of stack is popped. If the stack is empty at the end, return
also presented. True otherwise, False for unbalanced. Above process is clearly
1) Basic Structure Presentation: In data structure, there are illustrated with a serial of graphs in Fig 16.
four fundamental data structure types, namely linear structure, 3) Parse tree problem: Fig 17 shows the detailed steps of
linked list structure, trees and graphs. building a parse tree. Here we slightly change the general
a) Linear Structure Presentation: There are three general drawing method for using a special character “#” to represent
linear structures presented within the interface, namely Stack, the tree node with Null key value. When a expression string
Queue and Deque. is input, it breaks up into a list of tokens, those tokens are
Figure 3 shows the basic operation for Stack. It is a LIFO identified individually and handled with different operations:
(Last in First out) structure where the element is inserted When a left parenthesis is read, a new expression starts and
and removed on the top of stack. Such concept is usually a new tree is created to correspond to that expression. On
confusing for the beginners. With the sequences of snapshots the contrary, when a right parenthesis meets, one expression
that correspond each data change, the feature can easily be completes. An operand needs to be a leaf node and child of
captured and interpreted. it operator, and the operator must have both a left and a right
child. Fig 17 clearly illustrates the structure and contents for
Figure 4 shows the basic operation for Queue. It features
both parse tree and linking stack when each new token is
FIFO (First in First out) operation. Different from Stack, the
processed.
lasted element is always removed at the end. With the snapshot
sequences, beginning learners can easily see the difference V. P RELIMINARY U SABILITY T EST
between these two confusing basic data structures.
In order to evaluate our online visualization interface, we
Figure 5 shows the basic operation for Deque. With a
have performed a preliminary usability test by inviting a group
double-ended queue, it can add and remove elements from
of 10 participants to involve. The participants include two
either side. Such operation is clearly illustrated with the serial
teachers with one teaches Data Structure for the second year’
snapshots.
students, the other teaches Python for those students just begin
b) Linked List Structure Presentation: Linked list is usu- CS course. Four students are in their second year of university,
ally difficult to learn. Although they belong to linear structure, they are taking Data Structure course and have at least learned
the elements are not stored at contiguous memory. Three one programming language. The rest of four students are
different linked-lists are presented, including Stack linked-list freshmen and taking Python course for this semester.
(see Fig 6), Queue linked-list (see Fig 8), and Dubly linked-list The usability test covers the five quality components
(see Fig 9). These depictions clearly illustrate that the same based on the usability testing design principles [14] [15],
logic structures can be operated in a more flexible way with namely learnability,efficiency,memorability, errors, satis-
different stored structures. faction, they are assembled with 5-score scale with 5 for
c) Tree Presentation: For the tree structures, we are more strongly agree and 1 for strongly disagree. Table I summarizes
focus on using such structure to build up more complicated the results of this preliminary usability test. Most of partici-
function instead of structure’s change. Therefore here we only pants gave the highest score in Efficiency and Learnability.
provide generation and depiction for binary tree and general Particular for these students that are taking the programming
tree, with an argument to identify the number of branch. Fig 10 design and data structure at the very beginning. They found it
shows the process of binary tree construction. Fig 11 shows is very easy for they to operate and observe the results from
an operation error for insert excess branch in a binary tree. the interface. In terms of Memorability and Errors, the skillful
In our process, such operation will be detected and corrected users tend to be more comfortable to handle the operation. And
automatically. all of three groups agree current interface works well while
d) Graph Presentation: Similar to trees, more practical they expect for more additional functionality to be added to
application are expected with graph than the basic structure improve the Satisfaction.
creation. We therefore provide three type of graphs with
different arguments setting to identify them. These types VI. D ISCUSSION AND C ONCLUSIONS
include general graph (see Fig 13), directed graph (see Fig Our ultimate goal is to facilitate the understanding of data
14), and directed weighted graph (see Fig 15). structure and their operation. In order to achieve this goal, we

3275
Authorized licensed use limited to: UNIVERSIDADE DE SAO PAULO. Downloaded on March 29,2024 at 23:30:13 UTC from IEEE Xplore. Restrictions apply.
 Fig. 3. Stack basic operation. A serial of stack structure operation including creation, push and pop is presented.

Fig. 4. Queue basic operation. A serial of queue structure operation including creation, enqueue and dequeue is presented.

Fig. 5. Deque basic operation. A serial of Deque structure operation including creation, enqueue and dequeue is presented.

Fig. 6. Linked-list basic operation. A serial of linked-list structure operation including creation, insert and delete is presented.

Fig. 8. Queue linked list presentation.

Fig. 7. Stack linked list presentation.

have proposed an online data structure visualization tool to sentation. Originating from a complete Python data structure
express the various data structures with their graphical pre- package, our tool is able to depict the abstract data structures

3276
Authorized licensed use limited to: UNIVERSIDADE DE SAO PAULO. Downloaded on March 29,2024 at 23:30:13 UTC from IEEE Xplore. Restrictions apply.
 Fig. 9. Dubly linked list presentation.

Fig. 14. Directed graph presentation.

Fig. 10. Binary tree presentation.

Fig. 15. Directed Weighted Graph presentation.

without intermediate transform process so that a seamless trace

is offered during the programming execution.
Fig. 11. Binary tree with excess branch insert. The misoperation is corrected It is necessary to point out that our design shares some
with an automatic arrangement. similar features with Online Python Tutor mentioned in the
prior section. Both of tools apply online mode, target Python
as the visualization object, and visualize the elements within
the program. The major differences lie on two aspects: Online
Python Tutor requires pre-input and analyses the program later
after execution. Therefore any modification will cause a repeat
input and execution process. And it can only handle the simple
data types, more sophisticated data types have not imposed yet.
These two missing parts are filled with our tools.
Fig. 12. Multi-branch tree presentation.
Beginning with this primary framework, we plan to extend
to attack more complicated data structures entities in a more
flexible method. Animations are also expected to involve to
further reveal the abstruse concepts in the data structure and
the classical algorithms.

ACKNOWLEDGMENT

This work was supported in part by National Science

Foundation grant #1651581 and the 2016 ORAU’s Ralph E.
Fig. 13. General graph presentation. Powe Junior Faculty Enhancement grant.

TABLE I R EFERENCES
U SABILITY TESTING QUESTIONNAIRE RESULTS
[1] S. Pheng and C. Verbrugge, “Dynamic data structure analysis for
java programs,” in Proceedings of the 14th IEEE International
Group 1 Group 2 Group 3 Overall Rating
Conference on Program Comprehension, ser. ICPC ’06. USA:
Learnability 5 3 4 4
IEEE Computer Society, 2006, pp. 191–201. [Online]. Available:
Efficiency 4 5 5 4.7
https://doi.org/10.1109/ICPC.2006.20
Memorability 4 4 3 3.7
[2] E. E. Aftandilian, S. Kelley, C. Gramazio, N. Ricci, S. L. Su, and
Errors 4 4 3 3.7 S. Z. Guyer, “Heapviz: Interactive heap visualization for program
Satisfaction 3 3 3 3 understanding and debugging,” in Proceedings of the 5th International
Symposium on Software Visualization, ser. SOFTVIS ’10. New York,
NY, USA: Association for Computing Machinery, 2010, pp. 53–62.
[Online]. Available: https://doi.org/10.1145/1879211.1879222

3277
Authorized licensed use limited to: UNIVERSIDADE DE SAO PAULO. Downloaded on March 29,2024 at 23:30:13 UTC from IEEE Xplore. Restrictions apply.
 Fig. 16. Balanced parentheses problem with stack solution presentation.

Fig. 17. Parse tree problem with stack solution presentation.

[3] J. Sorva and T. Sirkiä, “Uuhistle: A software tool for visual program [Online]. Available: https://doi.org/10.1109/ICSE.2017.50
simulation,” in Proceedings of the 10th Koli Calling International [5] J. A. Cottam, A. Lumsdaine, and C. Weaver, “Watch this: A taxonomy
Conference on Computing Education Research, ser. Koli Calling ’10. for dynamic data visualization,” in 2012 IEEE Conference on Visual
New York, NY, USA: Association for Computing Machinery, 2010, pp. Analytics Science and Technology (VAST), 2012, pp. 193–202.
49–54. [Online]. Available: https://doi.org/10.1145/1930464.1930471 [6] F. Beck, M. Burch, S. Diehl, and D. Weiskopf, “The State of the
[4] R. Padhye and K. Sen, “Ravioli: A dynamic analysis for detecting Art in Visualizing Dynamic Graphs,” in EuroVis - STARs, R. Borgo,
data-structure traversals,” in Proceedings of the 39th International R. Maciejewski, and I. Viola, Eds. The Eurographics Association, 2014.
Conference on Software Engineering. IEEE Press, 2017, pp. 473–483. [7] D. H. White, T. Rupprecht, and G. Lüttgen, “Dsi: An evidence-based

3278
Authorized licensed use limited to: UNIVERSIDADE DE SAO PAULO. Downloaded on March 29,2024 at 23:30:13 UTC from IEEE Xplore. Restrictions apply.
 approach to identify dynamic data structures in c programs,” in
Proceedings of the 25th International Symposium on Software Testing
and Analysis, ser. ISSTA 2016. New York, NY, USA: Association
for Computing Machinery, 2016, pp. 259–269. [Online]. Available:
https://doi.org/10.1145/2931037.2931071
[8] D. Galles, “Data structure visualization,” [EB/OL], https://www.cs.usfca.
edu/∼galles/visualization/about.html/ Accessed Oct 15, 2020.
[9] S. Halim, “Visualgo,” [EB/OL], https://visualgo.net/en Accessed Oct 15,
2020.
[10] P. J. Guo, “Online python tutor: Embeddable web-based program
visualization for cs education,” in Proceeding of the 44th ACM Technical
Symposium on Computer Science Education, ser. SIGCSE ’13. New
York, NY, USA: Association for Computing Machinery, 2013, pp.
579–584. [Online]. Available: https://doi.org/10.1145/2445196.2445368
[11] B. team, “Bootstrap,” [EB/OL], https://getbootstrap.com// Accessed Oct
15, 2020.
[12] M. license, “Codemirror,” [EB/OL], https://codemirror.net/ Accessed Oct
15, 2020.
[13] Miller and BradleyN, Problem Solving with Algorithms and Data
Structures Using Python SECOND EDITION. Franklin, Beedle Asso-
ciates, 2011.
[14] J. Lucia Alonso-Virgsa, Jordn PascualEspada and R. G. Crespo, “Test
usability guidelines and follow conventions. useful recommendations
from web developers,” Computer Standards and Interfaces, vol. 70, pp.
1–19, 2020.
[15] J. Nielsen, “Usability 101: Introduction to usability,” [EB/OL], https://
www.nngroup.com/articles/usability-101-introduction-to-usability// Ac-
cessed Sep 30, 2020.

3279
Authorized licensed use limited to: UNIVERSIDADE DE SAO PAULO. Downloaded on March 29,2024 at 23:30:13 UTC from IEEE Xplore. Restrictions apply.