TodoMVC Vis

Timeline

This was a class project I did in Spring 2020 exploring the problem of visualizing the internal behavior of a UI at a high level of abstraction.

To gain initial traction on the problem, I tried visualizing the behavior of a TodoMVC app implemented with the Redux MVU library (similar to Elm). The key idea is that because the UI is already implemented with this architecture, it’s easy to extract a “semantic” timeline view, and then augment it with little sparkline visualizations. Further, this timeline acts as a minimap for time-travel debugging.

More info:

4 minute demo video