Learning Algorithms with Unified and Interactive Web-Based Visualization

Size: px

Start display at page:

Download "Learning Algorithms with Unified and Interactive Web-Based Visualization"

Junior Allison
5 years ago
Views:

1 Learning Algorithms with Unified and Interactive Web-Based Visualization S T E V E N H A L I M ( L E C T U R E S O C ) V I C T O R L O H B O H U A I ( N O W I N F A C E B O O K ) K O H ZI C H U N ( 3 R D Y E A R S T U D E N S O C ) F E L I X H A L I M ( N O W I N G O O G L E ) P L U S 6 M O R E F Y P S T U D E N T S

2 Why I started this project? On the spot illustration using a classic graph traversal algorithm: Breadth First Search (BFS)

3 Breadth First Search (BFS) Key ideas: Start from s If a vertex v is reachable from s, then all neighbors of v will also be reachable from s (recursive definition) BFS visits vertices of G in breadth-first manner (when viewed from source vertex s) How to maintain such order? Queue Q, initially, it contains only s How to differentiate visited versus unvisited vertices (to avoid cycle)? 1D array/vector visited of size V, visited[v] = 0 initially, and visited[v] = 1 when v is visited How to memorize the path? 1D array/vector p of size V, p[v] denotes the predecessor (or parent) of v

4 BFS Pseudo Code for all v in V // O(V) visited[v] 0 p[v] -1 Q {s} // start from s visited[s] 1 Initialization phase while Q is not empty // O(V+E) u Q.dequeue() for all v adjacent to u if visited[v] = 0 visited[v] 1 p[v] u Q.enqueue(v) Main loop // after BFS stops, we can use info stored in visited/p

5 Survey: Which sequence is better? 1. Engaging Story Visual Overview Visualization Code Proof/Analysis 2. Visual Overview Visualization Code Proof/Analysis 3. Code Proof/Analysis (what you saw just now) CS Competitive Programming, Steven Halim, SoC, NUS 1 2 3

Example (0) 0 1 2 3 Neighbors are listed

6 Example (0) Neighbors are listed in increasing order

7 Q = {5} Example (1) Neighbors are listed in increasing order 5

8 Q = {5} Q = {1, 6, 10} Example (2) Neighbors are listed in increasing order

9 Q = {5} Q = {1, 6, 10} Q = {6, 10, 0, 2} Q = {10, 0, 2, 11} Q = {0, 2, 11, 9} Example (3) Neighbors are listed in increasing order

10 Q = {5} Q = {1, 6, 10} Q = {6, 10, 0, 2} Q = {10, 0, 2, 11} Q = {0, 2, 11, 9} Q = {2, 11, 9, 4} Q = {11, 9, 4, 3} Q = {9, 4, 3, 12} Q = {4, 3, 12, 8} Example (4) Neighbors are listed in increasing order

11 Q = {5} Q = {1, 6, 10} Q = {6, 10, 0, 2} Q = {10, 0, 2, 11} Q = {0, 2, 11, 9} Q = {2, 11, 9, 4} Q = {11, 9, 4, 3} Q = {9, 4, 3, 12} Q = {4, 3, 12, 8} Q = {3, 12, 8} Q = {12, 8, 7} Q = {8, 7} Q = {7} Q = {} BFS spanning tree when BFS is started from vertex 5 Example (5) Neighbors are listed in increasing order

12 I (we?) need a tool Unified (contains > 1 algorithm visualization) Minimize inertia Web-based, for easy access HTML5, JavaScript, avoid Adobe Flash/Java Applet Has ability to enter our own (students ) input data Many other visualization websites do not have what I want to show

13 Hands On Demo We will show how the same explanation can be done better with our visualization tool: If you have iphone or ipad, we can do this together

14 Students Feedbacks So far, these visualizations have been used in: CS3233 Competitive Programming, Jan-Apr 2012, 24 students CS2020 Data Structures and Algorithms Accelerated, Jan-Apr 2012, 42 students CS2010 Data Structures and Algorithms II, Aug-Nov 2012, 136 students (specific feedback on visualization tool was not collected) CS3233 Competitive Programming, Jan-Apr 2013, 16 students

15 Does the visualization helpful? 2% From 56 Respondents 39% 59% Yes Neutral No Reasons for Neutral/No: Prefer analysis/proof Already understand the algorithm The visualization is not intuitive Reasons for Yes: Visual person Clarify concepts Can play with various usage scenarios Get initial feeling on how the algorithm works Used to draw all these manually by myself

16 When do you use the visualization? Before class From 56 Respondents Respondents can select all that are applicable to them In class After class Before test Others Responses Primary usage: For self learning and revision

17 How do you access the visualization? home From 56 Respondents Respondents can select all that are applicable to them school Tablet PC Responses Still rare at this point of time Smart Phone

18 What is your opinion about the tool? Positive Negative Always correct Simple interface Can set various usage scenarios by myself Help me understand the algorithm better Faster than manual drawing Lack of documentation or self-explanatory tutorial Still need more visualizations Make us lazier I am not using it

19 Closing Remarks Current Conclusion Good for students (> half in our case) who learn visually, and no negative impact for the other group of students This is still an ongoing project, our to-do list: Add a few more crucial algorithm visualizations Increase the user-friendliness of the tool Online assessment system (for the next TEG call)

20 Thank You Important take home message: Remember this URL: Or Google for: algorithm visualization steven Acknowledgements NUS Centre for Development Teaching and Learning (CDTL)

Computing & Telecommunications Services

Computing & Telecommunications Services Monthly Report September 214 CaTS Help Desk (937) 775-4827 1-888-775-4827 25 Library Annex helpdesk@wright.edu www.wright.edu/cats/ Table of Contents HEAT Ticket