added traversing and smallest element color animation

Author: Bappy4u

function.js

@@ -1,23 +1,24 @@
 var data, svg, bandScale, text;
 data = [];
+var time = 700;
 for (var i = 0; i < 15; i++) {
   data.push(Math.floor(Math.random() * 100) + 1);
 }
+var h = 100,
+  w = 800;
+var heightScale = d3
+  .scaleLinear()
+  .domain([0, d3.max(data)])
+  .range([0, h]);
+
 createChart();
 
 function createChart() {
   svg = d3.select("#chart").append("svg");
 
-  var h = 100,
-    w = 800;
-
   //var bandWidth = w / data.length - 1;
 
   bandScale = d3.scaleBand().domain(data).range([0, w]).padding(0.1);
-  var heightScale = d3
-    .scaleLinear()
-    .domain([0, d3.max(data)])
-    .range([0, h]);
 
   svg.attr("width", w).attr("height", h);
 
@@ -78,33 +79,40 @@ function selectionSort() {
   const timer = (ms) => new Promise((res) => setTimeout(res, ms));
   async function sort() {
     // We need to wrap the loop into an async function for this to work
+    var traverseColor = "#ffcaa1";
+    var smallestColor = "#ab87ff";
+    var unsortedColor = "#add8e6";
     for (var i = 0; i < data.length; i++) {
       smallest = data[i];
       pos = i;
+      forColorAnimation(smallest, smallestColor);
+      await timer(time);
       for (var j = i + 1; j < data.length; j++) {
+        forColorAnimation(data[j], traverseColor);
         if (smallest > data[j]) {
+          await timer(time);
+          forColorAnimation(smallest, unsortedColor);
           smallest = data[j];
           pos = j;
         }
+
+        forColorAnimation(smallest, smallestColor);
+        await timer(time);
+        forColorAnimation(data[j], unsortedColor);
       }
       if (data[i] != smallest) {
         temp = data[i];
         data[i] = smallest;
         data[pos] = temp;
-        var smi = bandScale(smallest);
-        svg.selectAll("rect").each(function (d, i) {
-          console.log(d3.select(this).attr("height"));
-          if (smi == d3.select(this).attr("height")) {
-            console.log(smi);
-          }
-        });
+
         var swooshAudio = new Audio(
           "/algorithm-visualizer/sound-effects/swoosh.mp3"
         );
         swooshAudio.play();
       }
+      forColorAnimation(smallest, "#56b4d3");
       sortAnimate(data);
-      await timer(1000); // then the created Promise can be awaited
+      await timer(time); // then the created Promise can be awaited
     }
     svg.selectAll("rect").style("fill", "green");
     var completeAudio = new Audio(
@@ -139,3 +147,12 @@ function sortAnimate(data) {
       return bandScale(d) + 5;
     });
 }
+
+function forColorAnimation(d, color) {
+  var smi = heightScale(d);
+  svg.selectAll("rect").each(function (d, i) {
+    if (smi == d3.select(this).attr("height")) {
+      d3.select(this).style("fill", color);
+    }
+  });
+}

index.html

@@ -17,7 +17,7 @@ <h1>Sorting Visualizer</h1>
         <button id="selection-sort">Sort</button>
       </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+    <script src="https://d3js.org/d3.v4.min.js"></script>
     <script src="function.js"></script>
   </body>
 </html>