spiral data 2

by Igor Cuckovic

HTML

<div>
<div class="left">

Number of columns:<br/>
<input id="width"/><br/>

Number of rows:<br/>    
<input id="height"/><br/>
   

<button id="button">Create table</button>
</div>    

<div class="svg"> 
</div>   
</div>

CSS

body {
    background-color: #3E3E40;
}

.left {
 width: 100px;
}

.svg {
    float: right;
}

JavaScript

//http://stackoverflow.com/questions/726756/print-two-dimensional-array-in-spiral-order

console.clear();

var svg = d3.select(".svg").append("svg").attr({
    "width": "860",
        "height": "500",
});





var placeRectangle = function (data) {
    
    d3.selectAll(".table").remove();
    
    var groups = svg.selectAll("g")
        .data(data).enter()
        .append("g")
        .attr("transform", function (d, i) {
        var x = 44 * d[0] + 20;
        var y = (44 * d[1]) + 100;
        // console.log([x, y]);

        return "translate(" + [x, y] + ")";
    }).attr("class", "table");

    groups.append("rect").attr({
        "x": 0,
            "y": 0,
            "width": 44,
            "height": 44,
            "rx": 2,
            "ry": 2,
            "fill": "none",
            "stroke": "#000"
    }).transition()
        .attr("stroke", "#ffffff")
        .duration(500)
        .delay(function (d, i) {
        return i * 100;
    });


    groups.append("text").text(function (d, i) {
        return i + 1;
    }).attr("transform", "translate(17,25)")
        .attr("opacity", 0)
        .transition()
        .attr("opacity", 1)
        .duration(500)
        .delay(function (d, i) {
        return i * 100;
    });

};



var calculatePositions = function (width, height) {
    var myArray = [];
    var generateBottomLeft = function (x1, y1, x2, y2) {

        for (i = x2; i >= x1; i -= 1) {
            myArray.push([i, y2]);
        }

        for (j = y2 - 1; j >= y1; j--) {
            myArray.push([x1, j]);
        }


        if ((x2 - x1) && (y2 - y1) > 0) {
            generateTopRight(x1 + 1, y1, x2, y2 - 1);
        }

    };


    var generateTopRight = function (x1, y1, x2, y2) {

        for (i = x1; i <= x2; i++) {
            myArray.push([i, y1]);
        }

        for (j = y1 + 1; j <= y2; j++) {
            myArray.push([x2, j]);
        }

        if ((x2 - x1) && (y2 - y1) > 0) {
            generateBottomLeft(x1, y1 + 1, x2 - 1,...