Skip to content

Commit e0b1d94

Browse files
amejiarosarioamejiarosario
committedOct 17, 2018
move graph to asciidoc
1 parent 1991d5d commit e0b1d94

File tree

6 files changed

+245
-268
lines changed

6 files changed

+245
-268
lines changed
 

‎book/chapters/graph.adoc

Lines changed: 236 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,241 @@
11
= Graph
22

3-
Non-linear data structure organize data differently. Instead of one data point leading to the next one, it would lead to many others forming graphs and trees.
3+
Graphs is one of my favorite data structures. They have a lot of cool
4+
applications and are used in more places than you can imagine. First,
5+
let’s start with the basics.
6+
7+
A graph is a non-linear data structure where a node can have zero or
8+
more linked nodes.
9+
10+
You can think of graph like an extension of a Linked List. Instead of
11+
having only a next or previous linked node, you can have as many as you
12+
want. Actually, you can an array of linked nodes.
13+
14+
.Node's constructor
15+
[source, javascript]
16+
----
17+
include::{codedir}/data-structures/graphs/node.js[tag=constructor]
18+
}
19+
----
20+
21+
As you can see, it’s pretty similar to the Linked List node indeed. The
22+
only difference is that uses an *array* of the linked nodes instead.
23+
24+
Other difference between a linked list and graph is that linked list
25+
have a start/first/root node, while the graph doesn’t. You can start
26+
traversing a graph from anywhere and there might be circular references
27+
as well. Let’s study this graph properties!
28+
29+
== Graph Properties
30+
31+
The connection between two nodes is called *edge*. Also, nodes might be
32+
called *vertex*.
33+
34+
.Graph is composed of vertices/nodes and edges
35+
image:image42.png[image,width=305,height=233]
36+
37+
=== Directed Graph vs Undirected
38+
39+
A graph can *directed* and *undirected*.
40+
41+
.Graph: directed vs undirected
42+
image:image43.jpg[image,width=469,height=192]
43+
44+
45+
A *directed graph (digraph)* has edges that are *one-way street*. E.g.
46+
On the directed example, you can only go from green node to orange and
47+
not the other way around. When one node has an edge to itself is called
48+
a *self-loop*.
49+
50+
An *undirected graph* has edges that are *two-way street*. E.g. On the
51+
undirected example, you can traverse from the green node to the orange
52+
and vice versa.
53+
54+
=== Graph Cycles
55+
56+
A graph can have *cycles* or not.
57+
58+
.Cyclic vs Acyclic Graphs.
59+
image:image44.jpg[image,width=444,height=194]
60+
61+
62+
A *cyclic graph* is the one that you can pass through a node more than.
63+
E.g. On the cyclic illustration, if you start in the green node, then go
64+
the orange and purple, finally, you could come back to green again.
65+
Thus, it has a *cycle*.
66+
67+
All *undirected* graphs are cyclic but not all *directed* graphs are
68+
cyclic.
69+
70+
An acyclic graph is the one that you can’t pass through a node more than
71+
once. E.g. in the acyclic illustration, can you to find a path where you
72+
can pass through the same vertex more than one?
73+
74+
*Directed Acyclic Graphs (DAG)* are also known as a *Tree* when each
75+
node has only *one parent*.
76+
77+
=== Connected vs Disconnected vs Complete Graphs
78+
79+
.Different kinds of graphs: disconnected, connected, and complete.
80+
image:image45.png[image,width=1528,height=300]
81+
82+
A *disconnected graph* is one that have one or more subgraph. In other
83+
words, a graph is *disconnected* if there are two nodes that doesn’t
84+
have a path between them.
85+
86+
A *connected graph* is the opposite to disconnected, there’s a path
87+
between every node.
88+
89+
A *complete graph* is where every node is adjacent to all the other
90+
nodes in the graph. E.g. If there are 7 nodes, every node has 6 edges.
91+
92+
=== Weighted Graphs
93+
94+
Weighted graphs have labels in the edges. The label is called *weight*
95+
or *cost*. The weight can represent many things like distance, travel
96+
time, or anything else.
97+
98+
.Weighted Graph representing USA airports distance in miles.
99+
image:image46.png[image,width=528,height=337]
100+
101+
For instance, a weighted graph can have the distance between nodes. So,
102+
algorithms can use the weight and optimize the path between them.
103+
104+
== Exciting Graph applications in real-world
105+
106+
Now that we know what graphs are and some of their properties let’s
107+
discuss about some real-life usages of graphs.
108+
109+
Graphs become a metaphor where nodes and edges model something from our
110+
physical world. Just to name a few:
111+
112+
* Optimizing Plane traveling
113+
** Nodes = Airport
114+
** Edges = Direct flights between two airports
115+
** Weight = miles between airports | cost | time
116+
117+
* GPS Navigation System
118+
** Node = road intersection
119+
** Edge = road
120+
** Weight = time between intersections
121+
122+
* Network routing
123+
** Node = server
124+
** Edge = data link
125+
** Weight = connection speed
126+
127+
There are endless applications for graphs in electronics, social
128+
networks, recommendation systems and many more. That’s cool and all, but
129+
how do we represent graphs in code? Let’s see that in the next section.
130+
131+
== Representing Graphs
132+
133+
There are two main ways to graphs one is:
134+
135+
* Adjacency Matrix
136+
* Adjacency List
137+
138+
=== Adjacency Matrix
139+
140+
Representing graphs as adjacency matrix is done using a two-dimensional
141+
array. For instance, let’s say we have the following graph:
142+
143+
.Graph and its adjacency matrix.
144+
image:image47.png[image,width=438,height=253]
145+
146+
The size of the matrix is given by the number of vertices |V|, in the
147+
example we have 5 vertices so we have a 5x5 matrix.
148+
149+
To fill up the matrix, we go row by row. Mark with 1 (or any other
150+
weight) when you find an edge. E.g.
151+
152+
* Row 0: It has a self-loop, so it has a 1 in the intersection of 0,0.
153+
The node 0 also has an edge to 1 and 4 so we mark it.
154+
* Row 1: The node 1 has one edge to 3 so we mark it.
155+
* Row 2: Node 2 goes to Node 4, so we mark the insertion with 1.
156+
* And so on…
157+
158+
The example graph above is a directed graph (digraph). In case of
159+
undirected graph, the matrix would be symmetrical by the diagonal.
160+
161+
If we represent the example graph in code, it would be something like
162+
this:
163+
164+
[source, javascript]
165+
----
166+
const digraph = [
167+
[1, 1, 0, 0, 1],
168+
[0, 0, 0, 1, 0],
169+
[0, 0, 0, 0, 1],
170+
[0, 0, 1, 0, 0],
171+
[0, 1, 0, 0, 0],
172+
];
173+
----
174+
175+
It would be very easy to tell if two nodes are connected. Let’s query if
176+
node 2 is connected to 3:
177+
178+
[source, javascript]
179+
----
180+
digraph[2][3]; //=> 0
181+
digraph[3][2]; //=> 1
182+
----
183+
184+
As you can see we don’t have a link from node 2 to 3, but we do in the
185+
opposite direction. Querying arrays is constant time *O(1)*, so no bad
186+
at all.
187+
188+
The issue with the adjacency matrix is the space it takes. Let’s say you
189+
want to represent the entire Facebook network on a digraph. You would
190+
have a huge matrix of 1.2 billion x 1.2 billion. The worst part is that
191+
most of it would be empty (zeros) since people are connected to at most
192+
few thousands.
193+
194+
When the graph has few connections compared to the number of nodes we
195+
say that we have a *sparse graph*. On the opposite, if we have almost
196+
complete graphs we say we have a *dense graph*.
197+
198+
The space complexity of adjacency matrix is *O(|V|^2^)*, where |V| is
199+
the number of vertices/nodes.
200+
201+
=== Adjacency List
202+
203+
Another way to represent a graph is using an adjacency list. This time
204+
instead of using an array (matrix) we use a list.
205+
206+
.Graph represented as an Adjacency List.
207+
image:image48.png[image,width=528,height=237]
208+
209+
210+
Body
211+
212+
== Adding a vertex
213+
214+
Body text
215+
216+
== Adding an edge
217+
218+
Body text
219+
220+
== Querying Adjacency
221+
222+
Body text
223+
224+
== Deleting a vertex
225+
226+
Body text
227+
228+
== Deleting an edge
229+
230+
Body text
231+
232+
== Graph Complexity
233+
234+
Graph search has its own chapter
235+
236+
= Summary
237+
238+
Body text
4239

5240
== Depth First Search
6241

‎book/chapters/output.adoc

Lines changed: 0 additions & 263 deletions
Original file line numberDiff line numberDiff line change
@@ -1,266 +1,3 @@
1-
2-
3-
= Graph Data Structure
4-
5-
Graphs is one of my favorite data structures. They have a lot of cool
6-
applications and are used in more places than you can imagine. First,
7-
let’s start with the basics.
8-
9-
A graph is a non-linear data structure where a node can have zero or
10-
more linked nodes.
11-
12-
You can think of graph like an extension of a Linked List. Instead of
13-
having only a next or previous linked node, you can have as many as you
14-
want. Actually, you can an array of linked nodes.
15-
16-
/**
17-
18-
* Graph node/vertex that hold adjacencies nodes
19-
20-
*/
21-
22-
class Node \{
23-
24-
constructor(value) \{
25-
26-
this.value = value;
27-
28-
this.adjacents = []; // adjacency list
29-
30-
}
31-
32-
}
33-
34-
As you can see, it’s pretty similar to the Linked List node indeed. The
35-
only difference is that uses an *array* of the linked nodes instead.
36-
37-
Other difference between a linked list and graph is that linked list
38-
have a start/first/root node, while the graph doesn’t. You can start
39-
traversing a graph from anywhere and there might be circular references
40-
as well. Let’s study this graph properties!
41-
42-
== Graph Properties
43-
44-
The connection between two nodes is called *edge*. Also, nodes might be
45-
called *vertex*.
46-
47-
image:extracted-media/media/image42.png[image,width=305,height=233]
48-
49-
Figure 26 - Graph is composed of vertices/nodes and edges
50-
51-
=== Directed Graph vs Undirected
52-
53-
A graph can *directed* and *undirected*.
54-
55-
image:extracted-media/media/image43.jpg[image,width=469,height=192]
56-
57-
Figure 27 - Graph: directed vs undirected
58-
59-
A *directed graph (digraph)* has edges that are *one-way street*. E.g.
60-
On the directed example, you can only go from green node to orange and
61-
not the other way around. When one node has an edge to itself is called
62-
a *self-loop*.
63-
64-
An *undirected graph* has edges that are *two-way street*. E.g. On the
65-
undirected example, you can traverse from the green node to the orange
66-
and vice versa.
67-
68-
=== Graph Cycles
69-
70-
A graph can have *cycles* or not.
71-
72-
image:extracted-media/media/image44.jpg[image,width=444,height=194]
73-
74-
Figure 28 - Cyclic vs Acyclic Graphs.
75-
76-
A *cyclic graph* is the one that you can pass through a node more than.
77-
E.g. On the cyclic illustration, if you start in the green node, then go
78-
the orange and purple, finally, you could come back to green again.
79-
Thus, it has a *cycle*.
80-
81-
All *undirected* graphs are cyclic but not all *directed* graphs are
82-
cyclic.
83-
84-
An acyclic graph is the one that you can’t pass through a node more than
85-
once. E.g. in the acyclic illustration, can you to find a path where you
86-
can pass through the same vertex more than one?
87-
88-
*Directed Acyclic Graphs (DAG)* are also known as a *Tree* when each
89-
node has only *one parent*.
90-
91-
=== Connected vs Disconnected vs Complete Graphs
92-
93-
image:extracted-media/media/image45.emf[image,width=528,height=176]
94-
95-
Figure 29 - Different kinds of graphs: disconnected, connected, and
96-
complete.
97-
98-
A *disconnected graph* is one that have one or more subgraph. In other
99-
words, a graph is *disconnected* if there are two nodes that doesn’t
100-
have a path between them.
101-
102-
A *connected graph* is the opposite to disconnected, there’s a path
103-
between every node.
104-
105-
A *complete graph* is where every node is adjacent to all the other
106-
nodes in the graph. E.g. If there are 7 nodes, every node has 6 edges.
107-
108-
=== Weighted Graphs
109-
110-
Weighted graphs have labels in the edges. The label is called *weight*
111-
or *cost*. The weight can represent many things like distance, travel
112-
time, or anything else.
113-
114-
image:extracted-media/media/image46.png[image,width=528,height=337]
115-
116-
Figure 30 - Weighted Graph representing USA airports distance in miles.
117-
118-
For instance, a weighted graph can have the distance between nodes. So,
119-
algorithms can use the weight and optimize the path between them.
120-
121-
== Exciting Graph applications in real-world
122-
123-
Now that we know what graphs are and some of their properties let’s
124-
discuss about some real-life usages of graphs.
125-
126-
Graphs become a metaphor where nodes and edges model something from our
127-
physical world. Just to name a few:
128-
129-
* Optimizing Plane traveling
130-
131-
* Nodes = Airport
132-
* Edges = Direct flights between two airports
133-
* Weight = miles between airports | cost | time
134-
135-
* GPS Navigation System
136-
137-
* Node = road intersection
138-
* Edge = road
139-
* Weight = time between intersections
140-
141-
* Network routing
142-
143-
* Node = server
144-
* Edge = data link
145-
* Weight = connection speed
146-
147-
There are endless applications for graphs in electronics, social
148-
networks, recommendation systems and many more. That’s cool and all, but
149-
how do we represent graphs in code? Let’s see that in the next section.
150-
151-
== Representing Graphs
152-
153-
There are two main ways to graphs one is:
154-
155-
* Adjacency Matrix
156-
* Adjacency List
157-
158-
=== Adjacency Matrix
159-
160-
Representing graphs as adjacency matrix is done using a two-dimensional
161-
array. For instance, let’s say we have the following graph:
162-
163-
image:extracted-media/media/image47.png[image,width=438,height=253]
164-
165-
Figure 31 - Graph and its adjacency matrix.
166-
167-
The size of the matrix is given by the number of vertices |V|, in the
168-
example we have 5 vertices so we have a 5x5 matrix.
169-
170-
To fill up the matrix, we go row by row. Mark with 1 (or any other
171-
weight) when you find an edge. E.g.
172-
173-
* Row 0: It has a self-loop, so it has a 1 in the intersection of 0,0.
174-
The node 0 also has an edge to 1 and 4 so we mark it.
175-
* Row 1: The node 1 has one edge to 3 so we mark it.
176-
* Row 2: Node 2 goes to Node 4, so we mark the insertion with 1.
177-
* And so on…
178-
179-
The example graph above is a directed graph (digraph). In case of
180-
undirected graph, the matrix would be symmetrical by the diagonal.
181-
182-
If we represent the example graph in code, it would be something like
183-
this:
184-
185-
_const_ digraph = [
186-
187-
[1, 1, 0, 0, 1],
188-
189-
[0, 0, 0, 1, 0],
190-
191-
[0, 0, 0, 0, 1],
192-
193-
[0, 0, 1, 0, 0],
194-
195-
[0, 1, 0, 0, 0],
196-
197-
];
198-
199-
It would be very easy to tell if two nodes are connected. Let’s query if
200-
node 2 is connected to 3:
201-
202-
digraph[2][3]; _//=> 0_
203-
204-
digraph[3][2]; _//=> 1_
205-
206-
As you can see we don’t have a link from node 2 to 3, but we do in the
207-
opposite direction. Querying arrays is constant time *O(1)*, so no bad
208-
at all.
209-
210-
The issue with the adjacency matrix is the space it takes. Let’s say you
211-
want to represent the entire Facebook network on a digraph. You would
212-
have a huge matrix of 1.2 billion x 1.2 billion. The worst part is that
213-
most of it would be empty (zeros) since people are connected to at most
214-
few thousands.
215-
216-
When the graph has few connections compared to the number of nodes we
217-
say that we have a *sparse graph*. On the opposite, if we have almost
218-
complete graphs we say we have a *dense graph*.
219-
220-
The space complexity of adjacency matrix is *O(|V|^2^)*, where |V| is
221-
the number of vertices/nodes.
222-
223-
=== Adjacency List
224-
225-
Another way to represent a graph is using an adjacency list. This time
226-
instead of using an array (matrix) we use a list.
227-
228-
image:extracted-media/media/image48.png[image,width=528,height=237]
229-
230-
Figure 32 – Graph represented as an Adjacency List.
231-
232-
Body
233-
234-
== Adding a vertex
235-
236-
Body text
237-
238-
== Adding an edge
239-
240-
Body text
241-
242-
== Querying Adjacency
243-
244-
Body text
245-
246-
== Deleting a vertex
247-
248-
Body text
249-
250-
== Deleting an edge
251-
252-
Body text
253-
254-
== Graph Complexity
255-
256-
Graph search has its own chapter
257-
258-
= Summary
259-
260-
Body text
261-
262-
4
263-
2641
[[_Toc525822218]]Learning Fast Sorting Algorithms
2652

2663
Introduction.

‎book/chapters/output.adoc.zip

34.6 KB
Binary file not shown.

‎book/images/image45.png

78.8 KB
Loading

‎src/data-structures/graphs/graph.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,8 @@ const HashMap = require('../maps/hash-maps/hash-map');
1919
* - Find path (between two vertices)
2020
* - Find all paths (between two vertices)
2121
* - Find shortest paths (between two vertices)
22-
*
23-
* https://repl.it/@amejiarosario/graphpy
24-
* http://www.pythontutor.com/visualize.html#mode=edit - https://goo.gl/Xp7Zpm
25-
*
2622
*/
23+
// tag::constructor[]
2724
class Graph {
2825
/**
2926
* Initialize the nodes map
@@ -34,6 +31,7 @@ class Graph {
3431
this.nodes = new Map();
3532
this.edgeDirection = edgeDirection;
3633
}
34+
// end::constructor[]
3735

3836
/**
3937
* Add a node to the graph.
@@ -261,3 +259,8 @@ Graph.UNDIRECTED = Symbol('directed graph'); // one-way edges
261259
Graph.DIRECTED = Symbol('undirected graph'); // two-ways edges
262260

263261
module.exports = Graph;
262+
263+
/*
264+
* https://repl.it/@amejiarosario/graphpy
265+
* http://www.pythontutor.com/visualize.html#mode=edit - https://goo.gl/Xp7Zpm
266+
*/

‎src/data-structures/graphs/node.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// tag::constructor[]
12
/**
23
* Graph node/vertex that hold adjacencies nodes
34
*/
@@ -6,6 +7,7 @@ class Node {
67
this.value = value;
78
this.adjacents = []; // adjacency list
89
}
10+
// end::constructor[]
911

1012
/**
1113
* Add node to adjacency list

0 commit comments

Comments
 (0)
Please sign in to comment.