dpvis: A Visual and Interactive Learning Tool for Dynamic Programming

Abstract

Dynamic programming (DP) is a fundamental and powerful algorithmic paradigm taught in most undergraduate (and many graduate) algorithms classes. DP problems are challenging for many computer science students because they require identifying unique problem structures and a refined understanding of recursion. In this paper, we present dpvis, a Python library that helps students understand DP through a frame-by-frame animation of dynamic programs. dpvis can easily generate animations of dynamic programs with as little as two lines of modifications compared to a standard Python implementation. For each frame, dpvis highlight the cells that have been read from and written to during an iteration. Moreover, dpvis allows users to test their understanding by prompting them with questions about the next operation performed by the algorithm. We deployed dpvis as a learning tool in an undergraduate algorithms class, and report on the results of a survey. The survey results suggest that dpvis is especially helpful for visualizing the recursive structure of DP. Although some students struggled with the installation of the tool (which has been simplified since the reported deployment), essentially all other students found the tool to be useful for understanding dynamic programs. dpvis is available at https://github.com/itsdawei/dpvis.

Figures (4)

• Figure 1: Python implementations of the Weighted Interval Scheduling dynamic program with and without dpvis visualizations enabled. dpvis visualizations can be enabled in two lines: the first line replaces the Python List object with the dpvis DPArray object, and the second line simply generates the visualization for the DParray object. Line changes from the standard Python implementation are highlighted.
• Figure 2: Each operation performed on the DPArray object is interpreted under one of three categories: READ , WRITE , and MAX/MIN ( MAX/MIN is not showcased in this diagram). Operations are broken down into sub-sequences such that each sub-sequence ends with a WRITE operation. All operations of a sub-sequence are visualized in the same frame of the animation.
• Figure 3: In testing mode, dpvis prompts the student with a question, and the student can respond by either clicking on the array or submitting a number in the input box. The set of questions can be modified with the question selectors. Once all questions are answered correctly, dpvis automatically advances to the next frame of the visualization and continues testing the student.
• Figure 4: Response frequency of some questions in the survey. The exact prompt is displayed in the title of the plots. The responses are scores on a 5-point Likert scale ranging from very negative (1) to very positive (5).