# Lecture 08: Objects, Graphs, and DFS

## Annoucements

1. No new assignment next week
• clean up and resubmit old assignments
2. Assignment 05 due date 03/06
3. Assignment 06 due 03/24 (after break!)
• pair assignment!
• posted next week

## Outline

1. Graphs and DFS
2. Objects and Visualization
3. DFS Demo
4. Convex Hulls

## Last Time

• JavaScript Events
• event listeners
• responding to events
• Intro to JavaScript Objects
• constructors, fields, methods
• Graphs
• vertices and edges

## Today

More graph visualization!

• better Graph, GraphVisualizer

Visualizing algorithms!

• depth-first search

A geometric problem!

• convex hulls

# Graphs

## Graphs

Mathematical abstraction of networks

• set $V$ of vertices a.k.a. nodes
• set $E$ of edges
• each edge $e \in E$ is a pair of nodes

If $(u, v) \in E$, we say $u$ and $v$ are neighbors

## Representing Graphs

• list (e.g., array) of vertices
• for each vertex, store a list of its neighbors

Example

• $V = \{1,2,3,4,5\}$
• $E = \{(1, 2), (1, 3), (1, 4), (2, 4), (3, 5), (4, 5)\}$

1: 2, 3, 4

2: 1, 4

3: 1, 5

4: 2, 5

5: 3, 4

## Representing a Graph with Objects

Structure

• Graph
• stores sets of vertices, edges
• Vertex
• stores ID, list of neighbors
• Edge
• stores pair of endpoints

## Graph in JavaScript

function Graph(id) {
this.id = id;            // (unique) ID of this graph
this.vertices = [];      // set of vertices in this graph
this.edges = [];         // set of edges in this graph
this.nextVertexID = 0;   // ID to be assigned to next vtx
this.nextEdgeID = 0;     // ID to be assigned to next edge
...
}


## Notes on JavaScript Arrays

• no specified datatypes
• self resizing
• support stack operations
• push(elt) appends elt to end
• pop() removes and returns last element
• associative arrays indices need not be numbers!
const a = [];        // make an array
a.push(1);
a.push(2);
a["name"] = "Alice";
let guess = a.pop(); // what does this do?


## Graph Interactions

    this.createVertex = function (x, y) {
const vtx = new Vertex(this.nextVertexID, this, x, y);
this.nextVertexID++;
return vtx;
}

    this.addVertex = function(vtx) {
if (!this.vertices.includes(vtx)) {
this.vertices.push(vtx);
console.log("added vertex with id " + vtx.id);
} else {
console.log("vertex with id " + vtx.id + " not added because it is already a vertex in the graph.");
}
}


## Building Graphs Interactively

GraphVisualizer object

function GraphVisualizer (graph, svg, text) {
this.graph = graph;      // the graph we are visualizing
this.svg = svg;          // the svg element we are drawing on
this.text = text;        // a text box

...
}


## GraphVisualizer’s Role

Graph specifies structure

GraphVisualizer mediates interactions between user and Graph

• visualization/display
• interaction

Encapsulation:

• Graph does not reference any display attributes
• GraphVisualizer handles all
• display (e.g., DOM elements)
• interactions (e.g. clicks)
• styling

## GraphVisualizer behaviors

1. Respond to clicks
• click to empty space adds a vertex
• create/style DOM element, add to SVG image
• create a Vertex and add to Graph
• click to first vertex
• highlights vertex
• click to next vertex
• adds Edge between Vertexs in Graph
• draws line between corresponding vertices
2. Other visual modifications
• highlight/mute vertices/edges

## Future Work

• “import” an existing graph
• automated graph drawing
• given just vertices/edges of a graph, determine how graph should be displayed
• this is a major challenge!

## Depth-first Strategy

1. Start at starting vertex
2. Until stuck at starting vertex:
• look for an unvisited neighbor
• if found, move to unvisited neighbor
• otherwise backtrack to vertex w/ unvisited neighbor

## Implementing DFS

What do we need to keep track of throughout execution?

## DFS Pseudo-code

visited = [start]; // set
active = [start];  // stack

while active is not empty
cur = top of active
if cur has unvisited neighbor v
push v to active
else
pop cur off active


## Visualizing DFS

What should we show user? How to illustrate behavior?

## Implementing DFS in JavaScript

1. Define a Dfs object type
• what should it store?
2. Implement DFS procedure as steps
• start procedure
• individual actions to be visualized

Question. What should count as a single step?

## Design Notes

Dfs stores

• Graph to explore
• GraphVisualizer to update
• local info for algorithm execution

Dfs tells GraphVisualizer what to highlight/mute, etc

• GraphVisualizer decides how to update display in response

## Lab 06

Algorithm Visualization: Convex Hulls

## Convex Hull Problem

Input:

• set of points in plane
• $(x, y)$-coordinates of each point

Output:

• a sequence of points $(x_1, y_1), (x_2, y_2), \ldots, (x_k, y_k)$ that define the “boundary” of the set of points
• path around $(x_1, y_1), (x_2, y_2), \ldots, (x_k, y_k)$ surrounds all points
• the bounded region is convex

## Next Week

Algorithms for finding the convex hull!