fix images for github

Author: amejiarosario

Find-the-largest-sum.png

@@ -1,11 +1,16 @@
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
+
 === Fundamentals of Algorithms Analysis
 
 Probably you are reading this book because you want to write better and faster code.
 How can you do that? Can you time how long it takes to run a program? Of course, you can!
 [big]#⏱#
 However, if you run the same program on a smartwatch, cellphone or desktop computer, it will take different times.
 
-image:images/image3.png[image,width=528,height=137]
+image:image3.png[image,width=528,height=137]
 
 Wouldn't it be great if we can compare algorithms regardless of the hardware where we run them?
 That's what *time complexity* is for!
@@ -88,7 +93,7 @@ Time complexity, in computer science, is a function that describes the number of
 How do you get a function that gives you the number of operations that will be executed? Well, we count line by line and mind code inside loops. Let's do an example to explain this point. For instance, we have a function to find the minimum value on an array called `getMin`.
 
 .Translating lines of code to an approximate number of operations
-image:images/image4.png[Operations per line]
+image:image4.png[Operations per line]
 
 Assuming that each line of code is an operation, we get the following:
 

Recursive-Fibonacci-call-tree-with-dp.png

@@ -1,3 +1,8 @@
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
+
 === Big O examples
 
 There are many kinds of algorithms. Most of them fall into one of the eight of the time complexities that we are going to explore in this chapter.
@@ -17,7 +22,7 @@ We a going to provide examples for each one of them.
 Before we dive in, here’s a plot with all of them.
 
 .CPU operations vs. Algorithm runtime as the input size grows
-image:images/image5.png[CPU time needed vs. Algorithm runtime as the input size increases]
+image:image5.png[CPU time needed vs. Algorithm runtime as the input size increases]
 
 The above chart shows how the running time of an algorithm is related to the amount of work the CPU has to perform. As you can see O(1) and O(log n) are very scalable. However, O(n^2^) and worst can make your computer run for years [big]#😵# on large datasets. We are going to give some examples so you can identify each one.
 
@@ -33,7 +38,7 @@ Represented as *O(1)*, it means that regardless of the input size the number of
 Let's implement a function that finds out if an array is empty or not.
 
 //.is-empty.js
-//image:images/image6.png[image,width=528,height=401]
+//image:image6.png[image,width=528,height=401]
 
 [source, javascript]
 ----
@@ -56,7 +61,7 @@ indexterm:[Runtime, Logarithmic]
 
 The binary search only works for sorted lists. It starts searching for an element on the middle of the array and then it moves to the right or left depending if the value you are looking for is bigger or smaller.
 
-// image:images/image7.png[image,width=528,height=437]
+// image:image7.png[image,width=528,height=437]
 
 [source, javascript]
 ----
@@ -78,7 +83,7 @@ Linear algorithms are one of the most common runtimes. It’s represented as *O(
 
 Let’s say that we want to find duplicate elements in an array. What’s the first implementation that comes to mind? Check out this implementation:
 
-// image:images/image8.png[image,width=528,height=383]
+// image:image8.png[image,width=528,height=383]
 
 [source, javascript]
 ----
@@ -105,7 +110,7 @@ An algorithm with a linearithmic runtime is represented as _O(n log n)_. This on
 
 The ((Merge Sort)), like its name indicates, has two functions merge and sort. Let’s start with the sort function:
 
-// image:images/image9.png[image,width=528,height=383]
+// image:image9.png[image,width=528,height=383]
 
 .Sort part of the mergeSort
 [source, javascript]
@@ -116,7 +121,7 @@ include::{codedir}/algorithms/sorting/merge-sort.js[tag=splitSort]
 <2> We divide the array into two halves.
 <3> Merge the two parts recursively with the `merge` function explained below
 
-// image:images/image10.png[image,width=528,height=380]
+// image:image10.png[image,width=528,height=380]
 
 .Merge part of the mergeSort
 [source, javascript]
@@ -127,7 +132,7 @@ include::{codedir}/algorithms/sorting/merge-sort.js[tag=merge]
 The merge function combines two sorted arrays in ascending order. Let’s say that we want to sort the array `[9, 2, 5, 1, 7, 6]`. In the following illustration, you can see what each function does.
 
 .Mergesort visualization. Shows the split, sort and merge steps
-image:images/image11.png[Mergesort visualization,width=500,height=600]
+image:image11.png[Mergesort visualization,width=500,height=600]
 
 How do we obtain the running time of the merge sort algorithm? The mergesort divides the array in half each time in the split phase, _log n_, and the merge function join each splits, _n_. The total work we have *O(n log n)*. There more formal ways to reach to this runtime like using the https://adrianmejia.com/blog/2018/04/24/analysis-of-recursive-algorithms/[Master Method] and https://www.cs.cornell.edu/courses/cs3110/2012sp/lectures/lec20-master/lec20.html[recursion trees].
 
@@ -144,7 +149,7 @@ Usually, they have double-nested loops that where each one visits all or most el
 
 If you remember we have solved this problem more efficiently on the <<part01-algorithms-analysis#linear, Linear>> section. We solved this problem before using an _O(n)_, let’s solve it this time with an _O(n^2^)_:
 
-// image:images/image12.png[image,width=527,height=389]
+// image:image12.png[image,width=527,height=389]
 
 .Naïve implementation of has duplicates function
 [source, javascript]
@@ -171,7 +176,7 @@ _3x + 9y + 8z = 79_
 
 A naïve approach to solve this will be the following program:
 
-//image:images/image13.png[image,width=528,height=448]
+//image:image13.png[image,width=528,height=448]
 
 .Naïve implementation of multi-variable equation solver
 [source, javascript]
@@ -196,7 +201,7 @@ Let’s do an example.
 
 Finding all distinct subsets of a given set can be implemented as follows:
 
-// image:images/image14.png[image,width=528,height=401]
+// image:image14.png[image,width=528,height=401]
 
 .Subsets in a Set
 [source, javascript]
@@ -238,7 +243,7 @@ A factorial is the multiplication of all the numbers less than itself down to 1.
 One classic example of an _O(n!)_ algorithm is finding all the different words that can be formed with a given set of letters.
 
 .Word's permutations
-// image:images/image15.png[image,width=528,height=377]
+// image:image15.png[image,width=528,height=377]
 [source, javascript]
 ----
 include::{codedir}/runtimes/08-permutations.js[tag=snippet]

Words-Permutations.png

@@ -1,3 +1,8 @@
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
+
 === Array vs. Linked List & Queue vs. Stack
 
 In this part of the book, we explored the most used linear data structures such as Arrays, Linked Lists, Stacks and Queues. We implemented them and discussed the runtime of their operations.

book/content/part01/algorithms-analysis.asc

@@ -1,7 +1,7 @@
-// ifndef::imagesdir[]
-// :imagesdir: ../images
-// :codedir: ../../src
-// endif::[]
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
 
 [[array]]
 === Array
@@ -23,7 +23,7 @@ Some programming languages have fixed size arrays like Java and C++. Fixed size
 Arrays look like this:
 
 .Array representation: each value is accessed through an index.
-image:images/image16.png[image,width=388,height=110]
+image:image16.png[image,width=388,height=110]
 
 Arrays are a sequential collection of elements that can be accessed randomly using an index. Let’s take a look into the different operations that we can do with arrays.
 

book/content/part01/big-o-examples.asc

@@ -1,7 +1,8 @@
-// ifndef::imagesdir[]
-// :imagesdir: ../images
-// :codedir: ../../src
-// endif::[]
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
+
 [[linked-list]]
 === Linked List
 (((Linked List)))
@@ -20,7 +21,7 @@ A list (or Linked List) is a linear data structure where each node is "linked" t
 Each element or node is *connected* to the next one by a reference. When a node only has one connection it's called *singly linked list*:
 
 .Singly Linked List Representation: each node has a reference (blue arrow) to the next one.
-image:images/image19.png[image,width=498,height=97]
+image:image19.png[image,width=498,height=97]
 
 Usually, a Linked List is referenced by the first element in called *head* (or *root* node). For instance, if you want to get the `cat` element from the example above, then the only way to get there is using the `next` field on the head node. You would get `art` first, then use the next field recursively until you eventually get the `cat` element.
 
@@ -30,7 +31,7 @@ Usually, a Linked List is referenced by the first element in called *head* (or *
 When each node has a connection to the `next` item and also the `previous` one, then we have a *doubly linked list*.
 
 .Doubly Linked List: each node has a reference to the next and previous element.
-image:images/image20.png[image,width=528,height=74]
+image:image20.png[image,width=528,height=74]
 
 With a doubly list you can not only move forward but also backward. If you keep the reference to the last element (`cat`) you can step back and reach the middle part.
 
@@ -120,7 +121,7 @@ Similar to the array, with a linked list you can add elements at the beginning,
 We are going to use the `Node` class to create a new element and stick it at the beginning of the list as shown below.
 
 .Insert at the beginning by linking the new node with the current first node.
-image:images/image23.png[image,width=498,height=217]
+image:image23.png[image,width=498,height=217]
 
 
 To insert at the beginning, we create a new node with the next reference to the current first node. Then we make first the new node. In code, it would look something like this:
@@ -139,7 +140,7 @@ As you can see, we create a new node and make it the first one.
 Appending an element at the end of the list can be done very effectively if we have a pointer to the `last` item in the list. Otherwise, you would have to iterate through the whole list.
 
 .Add element to the end of the linked list
-image:images/image24.png[image,width=498,height=208]
+image:image24.png[image,width=498,height=208]
 
 .Linked List's add to the end of the list implementation
 [source, javascript]
@@ -170,7 +171,7 @@ art <-> dog <-> cat
 We want to insert the `new` node in the 2^nd^ position. For that we first create the "new" node and update the references around it.
 
 .Inserting node in the middle of a doubly linked list.
-image:images/image25.png[image,width=528,height=358]
+image:image25.png[image,width=528,height=358]
 
 Take a look into the implementation of https://github.com/amejiarosario/dsa.js/blob/master/src/data-structures/linked-lists/linked-list.js#L83[LinkedList.add]:
 
@@ -198,7 +199,7 @@ Deleting is an interesting one. We don’t delete an element; we remove all refe
 Deleting the first element (or head) is a matter of removing all references to it.
 
 .Deleting an element from the head of the list
-image:images/image26.png[image,width=528,height=74]
+image:image26.png[image,width=528,height=74]
 
 For instance, to remove the head (“art”) node, we change the variable `first` to point to the second node “dog”. We also remove the variable `previous` from the "dog" node, so it doesn't point to the “art” node. The garbage collector will get rid of the “art” node when it seems nothing is using it anymore.
 
@@ -215,7 +216,7 @@ As you can see, when we want to remove the first node we make the 2nd element th
 Removing the last element from the list would require to iterate from the head until we find the last one, that’s O(n). But, If we have a reference to the last element, which we do, We can do it in _O(1)_ instead!
 
 .Removing last element from the list using the last reference.
-image:images/image27.png[image,width=528,height=221]
+image:image27.png[image,width=528,height=221]
 
 
 For instance, if we want to remove the last node “cat”. We use the last pointer to avoid iterating through the whole list. We check `last.previous` to get the “dog” node and make it the new `last` and remove its next reference to “cat”. Since nothing is pointing to “cat” then is out of the list and eventually is deleted from memory by the garbage collector.
@@ -234,7 +235,7 @@ The code is very similar to `removeFirst`, but instead of first we update `last`
 To remove a node from the middle, we make the surrounding nodes to bypass the one we want to delete.
 
 .Remove the middle node
-image:images/image28.png[image,width=528,height=259]
+image:image28.png[image,width=528,height=259]
 
 
 In the illustration, we are removing the middle node “dog” by making art’s `next` variable to point to cat and cat’s `previous` to be “art” totally bypassing “dog”.

book/content/part02/array-vs-list-vs-queue-vs-stack.asc

@@ -1,7 +1,7 @@
-// ifndef::imagesdir[]
-// :imagesdir: ../images
-// :codedir: ../../src
-// endif::[]
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
 
 [[queue]]
 === Queue
@@ -12,7 +12,7 @@
 A queue is a linear data structure where the data flows in a *First-In-First-Out* (FIFO) manner.
 
 .Queue data structure is like a line of people: the First-in, is the First-out
-image:images/image30.png[image,width=528,height=171]
+image:image30.png[image,width=528,height=171]
 
 A queue is like a line of people at the bank; the person that arrived first is the first to go out as well.
 

book/content/part02/array.asc

@@ -1,7 +1,7 @@
-// ifndef::imagesdir[]
-// :imagesdir: ../images
-// :codedir: ../../src
-// endif::[]
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
 
 [[stack]]
 === Stack
@@ -14,7 +14,7 @@ The stack is a data structure that restricts the way you add and remove data. It
 An analogy is to think the stack is a rod and the data are discs. You can only take out the last one you put in.
 
 .Stack data structure is like a stack of disks: the last element in is the first element out
-image:images/image29.png[image,width=240,height=238]
+image:image29.png[image,width=240,height=238]
 
 // #Change image from https://www.khanacademy.org/computing/computer-science/algorithms/towers-of-hanoi/a/towers-of-hanoi[Khan Academy]#
 

book/content/part02/linked-list.asc

@@ -1,7 +1,7 @@
-// ifndef::imagesdir[]
-// :imagesdir: ../images
-// :codedir: ../../src
-// endif::[]
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
 
 === Binary Tree Traversal
 (((Binary Tree Traversal)))

book/content/part02/queue.asc

@@ -1,7 +1,7 @@
-// ifndef::imagesdir[]
-// :imagesdir: ../images
-// :codedir: ../../src
-// endif::[]
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
 
 === Binary Search Tree
 (((Binary Search Tree)))
@@ -57,7 +57,7 @@ With the methods `add` and `remove` we have to guarantee that our tree always ha
 For instance, let’s say that we want to insert the values 19, 21, 10, 2, 8 in a BST:
 
 .Inserting values on a BST.
-image:images/image36.png[image,width=528,height=329]
+image:image36.png[image,width=528,height=329]
 
 In the last box of the image above, when we are inserting node 18, we start by the root (19). Since 18 is less than 19, then we move left. Node 18 is greater than 10, so we move right. There’s an empty spot, and we place it there. Let’s code it up:
 
@@ -95,7 +95,7 @@ Deleting a node from a BST have three cases.
 Deleting a leaf is the easiest; we look for their parent and set the child to null.
 
 .Removing node without children from a BST.
-image:images/image37.png[image,width=528,height=200]
+image:image37.png[image,width=528,height=200]
 
 
 Node 18, will be hanging around until the garbage collector is run. However, there’s no node referencing to it so it won’t be reachable from the tree anymore.
@@ -105,7 +105,7 @@ Node 18, will be hanging around until the garbage collector is run. However, the
 Removing a parent is not as easy since you need to find new parents for its children.
 
 .Removing node with 1 children from a BST.
-image:images/image38.png[image,width=528,height=192]
+image:image38.png[image,width=528,height=192]
 
 
 In the example, we removed node `10` from the tree, so its child (node 2) needs a new parent. We made node 19 the new parent for node 2.
@@ -115,7 +115,7 @@ In the example, we removed node `10` from the tree, so its child (node 2) needs
 Removing a parent of two children is the trickiest of all cases because we need to find new parents for two children. (This sentence sounds tragic out of context 😂)
 
 .Removing node with two children from a BST.
-image:images/image39.png[image,width=528,height=404]
+image:image39.png[image,width=528,height=404]
 
 
 In the example, we delete the root node 19. This deletion leaves two orphans (node 10 and node 21). There are no more parents because node 19 was the *root* element. One way to solve this problem is to *combine* the left subtree (Node 10 and descendants) into the right subtree (node 21). The final result is node 21 is the new root.
@@ -163,7 +163,7 @@ That’s all we need to remove elements from a BST. Check out the complete BST i
 As we insert and remove nodes from a BST we could end up like the tree on the left:
 
 .Balanced vs. Unbalanced Tree.
-image:images/image40.png[image,width=454,height=201]
+image:image40.png[image,width=454,height=201]
 
 The tree on the left is unbalanced. It looks like a Linked List and has the same runtime! Searching for an element would be *O(n)*, yikes! However, on a balanced tree, the search time is *O(log n)*, which is pretty good! That’s why we always want to keep the tree balanced. In further chapters, we are going to explore how to keep a tree balanced after each insert/delete.
 

book/content/part02/stack.asc

@@ -1,7 +1,7 @@
-// ifndef::imagesdir[]
-// :imagesdir: ../images
-// :codedir: ../../src
-// endif::[]
+ifndef::imagesdir[]
+:imagesdir: ../../
+:codedir: ../../../src
+endif::[]
 
 === Graph Search
 
@@ -11,7 +11,7 @@ WARNING:  Graph search is very similar to <<Tree Search & Traversal>>. So, if yo
 
 There are two ways to navigate the graph, one is using Depth-First Search (DFS) and the other one is Breadth-First Search (BFS). Let's see the difference using the following graph.
 
-image::images/directed-graph.png[directed graph]
+image::directed-graph.png[directed graph]
 
 // [graphviz, directed graph, png]
 // ....