Merge pull request #137 from raj-rathod/rajesh

feat:<Insertion sort> insertin sort flow chart and readme file add

Author: raj-rathod

README.md

@@ -59,7 +59,7 @@ graph TD;
 - ### Algorithms
   - **Sorting**
     - [Selection Sort](https://github.com/raj-rathod/DSA-visualisation-in-angular/tree/main/src/app/components/Algorithms/sorting/selection-sort/README.md)
-    - Insertion Sort
+    - [Insertion Sort](https://github.com/raj-rathod/DSA-visualisation-in-angular/tree/main/src/app/components/Algorithms/sorting/insertion-sort/README.md)
     - Merge Sort 
     - Quick Sort
     - Counting Sort

src/app/components/Algorithms/sorting/insertion-sort/README.md

@@ -0,0 +1,63 @@
+![GitHub Repo stars](https://img.shields.io/github/stars/raj-rathod/DSA-visualisation-in-angular?style=social)
+![GitHub forks](https://img.shields.io/github/forks/raj-rathod/DSA-visualisation-in-angular?style=social)
+![GitHub watchers](https://img.shields.io/github/watchers/raj-rathod/DSA-visualisation-in-angular?style=social)
+![GitHub contributors](https://img.shields.io/github/contributors/raj-rathod/DSA-visualisation-in-angular)
+![GitHub issues](https://img.shields.io/github/issues-raw/raj-rathod/DSA-visualisation-in-angular)
+
+<p align='center' >
+<img src="https://raw.githubusercontent.com/raj-rathod/DSA-visualisation-in-angular/main/src/assets/icons/dsa-logo.png"/>
+</p>
+
+# Data structure and algorithms visualization [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Visualization%20is%20the%20better%20way%20to%20understand%20of%20the%20things&url=https://raj-rathod.github.io/DSA-visualisation-in-angular/&via=Rajesh946055&hashtags=dsa,faang,datastructures,Algorithms,developers)
+> DSA Visualization is a project on **data structures and algorithms**. In this project all points of data structures and algorithms like as working approach, properties, operations, applications, advantages and disadvantages are well explained and visualize the operations for better understanding.
+
+```HTML
+Visualization  is the better way to understand of the things
+``` 
+
+## [Dsa visualization live 👈](https://raj-rathod.github.io/DSA-visualisation-in-angular/)
+
+_If you like this project, please leave me a star._ &#9733;
+
+## Insertion Sort | Insertion Sort Properties | Insertion Sort Applications | Insertion Sort Visualization | Insertion Sort Complexity | Insertion Sort Space Complexity
+
+### What is Insertion Sort ?
+
+>Insertion sort is a simple sorting algorithm that works similar to the way you sort playing cards in your hands. The array is virtually split into a sorted and an unsorted part. Values from the unsorted part are picked and placed at the correct position in the sorted part
+
+### Insertion Sort Flowchart 
+- Iterate from arr[1] to arr[N] over the array
+- Compare the current element (key) to its predecessor
+- If the key element is smaller than its predecessor, compare it to the elements before. Move the greater elements one position up to  make space for the swapped element
+
+<img src="https://github.com/raj-rathod/DSA-visualisation-in-angular/blob/main/src/assets/ds-image/insertion-sort-flowchart.jpg?raw=true">
+
+<br>
+
+### Insertion Sort Example
+
+<br>
+
+<img src="https://github.com/raj-rathod/DSA-visualisation-in-angular/blob/main/src/assets/ds-image/insertion-sort.jpg?raw=true">
+
+## [Learn More About Insertion Sort 👈](https://raj-rathod.github.io/DSA-visualisation-in-angular/)
+
+
+## Contributing
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+Please read the [Contribute guide](.github/CONTRIBUTING.md)
+
+
+## Connect with me ~Rajesh Rathore
+
+[![Linkedin Badge](https://img.shields.io/badge/-LinkedIn-0e76a8?style=flat-square&logo=Linkedin&logoColor=white)](https://www.linkedin.com/in/rajesh-rathore-0501/)
+[![Website Badge](https://img.shields.io/badge/Website-3b5998?style=flat-square&logo=google-chrome&logoColor=white)](https://linktr.ee/rajesh_rathore)
+[![Twitter Badge](https://img.shields.io/badge/-Twitter-00acee?style=flat-square&logo=Twitter&logoColor=white)](https://twitter.com/Rajesh946055)
+[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white)](https://www.instagram.com/raj_rathod1313/?hl=en)
+
+
+***Do star, fork and share the repo to show your support, it would help others too!***   <br>
+ <br>
+ Let me know your views or any changes or improvements or contribute to make better for others 
+ 
+ :heart: ***Thank you all for Forking this repository and contribute***  :heart:

src/app/components/Algorithms/sorting/insertion-sort/insertion-sort.component.html

@@ -1,9 +1,9 @@
 <h1 class="text-center">Insertion Sort</h1>
 <div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.defination"></div>
-<div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.explainImage"></div>
-<div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.properties"></div>
-<div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.flowChart"></div>
 <div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.workingProcedure"></div>
+<div class="mt-md-4 mt-3 col-md-7" [innerHtml]="insertionSortMetaData.flowChart"></div>
+<div class="mt-md-4 mt-3 col-md-7" [innerHtml]="insertionSortMetaData.explainImage"></div>
+<div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.properties"></div>
 <div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.applications"></div>
 <div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.other"></div>
 <div class="mt-md-4 mt-3" [innerHtml]="insertionSortMetaData.advantage"></div>

src/app/components/Algorithms/sorting/selection-sort/README.md

@@ -26,8 +26,6 @@ _If you like this project, please leave me a star._ ★
 >Selection sort is a simple sorting algorithm. This sorting algorithm is an in-place comparison-based algorithm in which the list is divided into two parts, the sorted part at the left end and the unsorted part at the right end. Initially, the sorted part is empty and the unsorted part is the entire list.
 The smallest element is selected from the unsorted array and swapped with the leftmost element, and that element becomes a part of the sorted array. This process continues moving unsorted array boundary by one element to the right
 
-<img src="https://github.com/raj-rathod/DSA-visualisation-in-angular/blob/main/src/assets/ds-image/selection-sort.jpg?raw=true">
-
 ### Selection Sort Flowchart 
 
 - Initialize minimum value(minValue) to location 0.
@@ -38,6 +36,14 @@ The smallest element is selected from the unsorted array and swapped with the le
 
 <img src="https://github.com/raj-rathod/DSA-visualisation-in-angular/blob/main/src/assets/ds-image/selection-sort-flowchart.jpg?raw=true">
 
+<br>
+
+### Selection Sort Example
+
+<br>
+
+<img src="https://github.com/raj-rathod/DSA-visualisation-in-angular/blob/main/src/assets/ds-image/selection-sort.jpg?raw=true">
+
 ## [Learn More About Selection Sort 👈](https://raj-rathod.github.io/DSA-visualisation-in-angular/)
 
 

src/app/core/algorithms/sorting-meta-data.ts

@@ -107,8 +107,8 @@ const insertionSortData = {
   defination: `Insertion sort is a simple sorting algorithm that works similar to the way you sort playing cards 
     in your hands. The array is virtually split into a sorted and an unsorted part. Values from the unsorted part 
     are picked and placed at the correct position in the sorted part`,
-  flowChart:"assets/ds-image/DSA-404.webp",
-  explainImage:"assets/ds-image/DSA-404.webp",
+  flowChart:"assets/ds-image/insertion-sort-flowchart.jpg",
+  explainImage:"assets/ds-image/insertion-sort.jpg",
   workingProcedure:[
     'Iterate from arr[1] to arr[N] over the array',
     'Compare the current element (key) to its predecessor',