Department of Computing

CS344: Web Engineering

Lab 4: Interactive Graph

Date: 30th July 2015

Time: 09:00-12:00

Instructor: Fahad Ahmed Satti

CS213: Advanced Programming Page 1

Lab 4: Interactive Graph

IntroductionIn this lab, students will create an interactive weighted graph as a web application. The graph will allow the user to open or close any sub-graph and will display all the vertices and edges, as specified by the user. The students can use HTML5, CSS3, & Javascript(including Angular and JQuery) to build this web app. Students will use GitHub to manage their solutions.

Objectives1. Take user input to build the set of vertices and edges.2. Create a graph with the user provided data.3. Make the graph interactive, so it responds to user inputs.4. Display the data for each node, when the user clicks on it.5. Allow the user to hide or show a subgraph, when requested, via clicking a button inside

the nodes.6. Use a Version Control System (VCS) to manage your solutions.

Tools/Software Requirement1. Students should implement their solutions using HTML5, CSS3 and Javascript(including

Angular and JQuery) only.2. Besides LMS, Students must also use GitHub and upload their complete solutions on it.

Pitfalls Any exceptions or errors leading to non-execution of submitted code. Failure to upload the solution to GitHub or not sharing the public repo link on LMS. Failure to create graph Failure to take user input Failure to respond to user events

DeliverablesStudents must upload their solutions on GitHub and then share the following on LMS:

1. Description document2. All source code3. Link to public repo hosting the code

CS213: Advanced Programming Page 2