Spiral Print

<!DOCTYPE html>
<html>
<head>

<title>Spiral Printer</title>

.circle {
      cursor : pointer;
    }

#search{
      margin-top:20px;
      width: 50%;
      height:30px;
      background-color:#fee;
      font-size:25px;
    }

#spiral {
      margin: 0px auto;
      text-align: center;
    }

svg {
      margin-left:5px;
    }

</style>

</head>
<body>

<div id="spiral"></div>

var divs = d3.select("#spiral");

var height = $(window).height();

var svg = divs.append('svg')
                  .attr("id", "crosswordSVG")
                  .attr('height', height)
                  .attr('width', "100%");

/**
    *
    * Charting Variables
    *
    **/

var strokeWidth   = 4;
    var circleRadius  = 15;
    var circlePadding = 2;
    //stroke radius is drawn centered on the circle radius, not outside wrapping around it.
    var totalRadius  = circleRadius + strokeWidth/2 + circlePadding/2;
    var shrinkRadius = 10;
    var fontSize = "25px";

var windowWidth = $("#crosswordSVG").width();
    //calculate number of circles based on window width;
    var maxColumns = Math.floor(windowWidth / (2*totalRadius) );

//2D array
    //numRows is height/diamter
    var numRows = Math.floor(height/(totalRadius*2));
    var data = _.range(numRows-1).map(function(){
            return _.range(maxColumns).map(getCharacter);
    });

var color = d3.scale.category10();

var row = svg.selectAll('g.row')
                 .data(data)
                 .enter()
                 .append('g').attr("class", "row")
                 //vertical offset
                 .attr('transform', function(d, i){return 'translate(0,'+ (((i+1) * totalRadius * 2)) +')';});

//each group will consists of a circle & its text.
    var circleGroups = row.selectAll("g.circle")
                           .data(function(d){ return d; })
                           .enter()
                           .append("g").attr("class", "circle")
                           //horizontal offset, transform is offset by totalRadius as default position is circles center.
                           .attr('transform', function(d, i){return 'translate('+ (((i+1) * totalRadius * 2) - totalRadius) +',0)';});

//save this variable to perform styling changes on circles later on.
    //CIRCLES
    var circles = circleGroups
         .append('circle')
         .style("stroke", "white")
         .style("stroke-width", strokeWidth )
         .style("fill", function(d,i) {
            return "#2274A5";
          })
         .attr('r', circleRadius);

//use spiral print to get array of indexes
    //this will be used to calculate the animation delay offset.
    var indexes = [];
    var addToIndex = function(x,y){
      indexes.push([x,y]);
    }
    printSpiral(data, addToIndex);

var animateIndex = function(indexes) {

var eachNodeDelay = 20;
      var duration = 100;

circles
         .transition()
         .duration(duration)
         .delay(function(d,j,i){
             return eachNodeDelay * getIndex(indexes,[i,j]);
         })
         .style("fill", "#E83F6F")
         .transition()
         .duration(duration)
         .style("fill", function(d,i,j){
            return "#FFBF00";
         });

}

setTimeout(animateIndex.bind(null,indexes), 1000);

/*=================================================
    =            Charting Helper Functions            =
    =================================================*/

//random character generator.
    function getCharacter(){
      var character = "";
      character = String.fromCharCode(Math.floor( Math.random() * 26) + "a".charCodeAt(0));
      return character;
    }

/*====================================
    =            Spiral Print            =
    ====================================*/

function getIndex(array,value) {
      for (var i = 0; i < array.length; i ++) {
        if (_.isEqual(array[i],value)){
          return i;
        }
      }
    }

function printSpiral(matrix, printFunc) {

var layers = Math.ceil(Math.min(matrix.length, matrix[0].length)/2);
       var baseWidth = matrix[1].length;
       var baseHeight = matrix.length;
       for (var i = 0; i < layers; i++) {
           printLayer(i,i, baseWidth - 2*i, baseHeight - 2*i);
       }

//print layer via 4 parts using 8 indexes.
       function printLayer(x,y,w,h) {

//right
           var rightStart = [x,y];
           var rightEnd = [x,y+w-1];

for (var a = rightStart[1]; a <= rightEnd[1]; a++ ) {
               printFunc(rightStart[0],a);
           }
           //down
           var downStart = [x+1, y+w-1];
           var downEnd = [x+h-1, y+w-1];

for (var a = downStart[0]; a <= downEnd[0]; a++ ) {
               printFunc(a,downStart[1]);
           }
           //left
           var leftStart = [x+h-1, y+w-2]
           var leftEnd = [x+h-1, y];

for (var a = leftStart[1]; a >= leftEnd[1]; a-- ) {
               printFunc(leftStart[0],a);
           }
           //up
           var upStart = [x+h-2, y];
           var upEnd = [x+1, y];

for (var a = upStart[0]; a >= upEnd[0]; a-- ) {
               printFunc(a,upStart[1]);
           }

}

</script>

</body>
</html>

Modified http://underscorejs.org/underscore-min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://code.jquery.com/jquery-2.1.4.min.js

https://underscorejs.org/underscore-min.js