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)

```js
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;
    });
}
```

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