More graph visualization!
Graph
, GraphVisualizer
Visualizing algorithms!
A geometric problem!
Mathematical abstraction of networks
If $(u, v) \in E$, we say $u$ and $v$ are neighbors
Adjacency list representation
Example
1: 2, 3, 4
2: 1, 4
3: 1, 5
4: 2, 5
5: 3, 4
Structure
Graph
Vertex
Edge
Graph
in JavaScriptfunction 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
...
}
push(elt)
appends elt
to endpop()
removes and returns last elementconst a = []; // make an array
a.push(1);
a.push(2);
a["name"] = "Alice";
let guess = a.pop(); // what does this do?
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.");
}
}
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 RoleGraph
specifies structure
GraphVisualizer
mediates interactions between user and Graph
Encapsulation:
Graph
does not reference any display attributesGraphVisualizer
handles all
GraphVisualizer
behaviorsVertex
and add to Graph
Edge
between Vertex
s in Graph
Input
Graph
(adjacency list representation)Vertex v
Output
v
Question How to do this?
What do we need to keep track of throughout execution?
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
add v to visited
else
pop cur off active
What should we show user? How to illustrate behavior?
Dfs
object type
Question. What should count as a single step?
Dfs
stores
Graph
to exploreGraphVisualizer
to updateDfs
tells GraphVisualizer
what to highlight/mute, etc
GraphVisualizer
decides how to update display in responseAlgorithm Visualization: Convex Hulls
Input:
Output:
Algorithms for finding the convex hull!
Your Task (Assignment 06):