| dc.description.abstract | Certain algorithms (such as those for dynamic programming (DP)) lack visualizations that can exhaustively explain each step while delivering intuitive animations, in part due to rigid layouts in the designs. In this paper, we show that these problems can be addressed using modern web technologies—namely HTML5/CSS3 and Javascript—by demonstrating an animation framework that lets developers create a timeline of animations that easily integrates into the flow of frontend web development. We also put forth and discuss design rationale and recommendations for algorithm visualizations in general. The framework supports typical playback features like rewinding, changing playback speed, skipping, etc., and it allows developers to specify various parameters that let them fine-tune the animation sequences. Outside of that, we are free to incorporate any UI/UX designs that would aid students’ overall comprehension, allowing a closer relationship between text explanations and graphics as well as connections between elements that would normally be isolated in panels. To test the framework, we created a visualization of a DP algorithm for memoized weighted interval scheduling (WIS). WIS is tedious to solve by hand, so instructors typically skip iterations and expect students to have internalized the in-between steps. Our approach, however, takes user input and procedurally generates the visualization, including text explanations at every single step of the way. Repetition can be crucial to understanding concepts in full, so by showing all of the parts that a professor would never have time to write down and providing an interface that supports useful playback controls, we have created a way to visualize algorithms that boosts intuitive design and supports different learning paces. | |
