Visualisation of sorting algorithms

Question

I'm trying to visualise sorting algorithms using d3.js but i'm kinda stuck. When i try to re draw the graphs by including it the sorting loop. the graph only shows the final value. Same thing happened after using the setInterval function. I have included the script without all timer functions below (didn't include the settime function)

var arr = new Array(10, 34, 66, 3, 56, 45, 67, 43, 45, 7);
var wi = 500;
var he = 500;
var temp = 0;

//Scaling
var canvas = d3.select("body")
  .append("svg")
  .attr("width", wi)
  .attr("height", he);

for (l = 9; l > 0; l--) {

    for( p=0;p<l; p++){
                      if(arr[p]>arr[p+1]){
                          swap(p,arr);
                       
                                 
                         }
                      
                  }
  updatevisualization(arr);
}

function swap(n, arr) {
  temp = arr[n];
  arr[n] = arr[n + 1];
  arr[n + 1] = temp;
}

//visualizaiton
function updatevisualization(xx) {
  var bars = canvas.selectAll("rect")
    .data(xx)
    .enter()
    .append("rect")
    .attr("height", function(d) {
      return (5 * d);
    })
    .attr("width", 10)
    .attr("x", function(d, i) {
      return i * 20;
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

Answer 1

var arr = new Array(10, 34, 66, 3, 56, 45, 67, 43, 45, 7);
var wi = 500;
var he = 500;
var temp = 0;

//Scaling
var canvas = d3.select("body")
  .append("svg")
  .attr("width", wi)
  .attr("height", he);
updatevisualization(arr);

setTimeout(function(){
  var nAr = arr.sort(function(a,b){return a>b;});//Sorting numbers in ascending order
  canvas.html('');//removing old bars('rect's)
  update(nAr);//Creating bar('rect')s with new sorted array.
}, 1000);


/*
for (l = 9; l > 0; l--) {

      var myVar = setTimeout(function(){  for( p=0;p<l; p++){
                      if(arr[p]>arr[p+1]){
                          swap(p,arr);
                       
                                 
                         }
                      
                  }}, 1000);
  updatevisualization(arr);
}
*/


function swap(n, arr) {
  temp = arr[n];
  arr[n] = arr[n + 1];
  arr[n + 1] = temp;
}

//visualizaiton
function updatevisualization(xx) {
  var bars = canvas.selectAll("rect")
    .data(xx)
    .enter()
    .append("rect")
    .attr("height", function(d) {
      return (5 * d);
    })
    .attr("width", 10)
    .attr("x", function(d, i) {
      return i * 20;
    });
}

function update(numbers) {
canvas.selectAll('bar').data(arr).exit().remove();
  var selection = canvas
    .selectAll("bar").data(numbers);

  selection.enter()
    .append("rect")
    .attr("height", function(d) {
      return (5 * d);
    })
    .attr("width", 10)
    .attr("x", function(d, i) {
      return i * 20;
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

I've just added little code to sort array and creating elements again. Try to observe the code.