index.html

## index.html
<!DOCTYPE html>
<html>
<head>

  <title>Spiral Printer</title>

  <style type="text/css">

    .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>

  <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="sweetalert.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://underscorejs.org/underscore-min.js"></script>

</head>
<body>

  <!-- ============== -->
  <!-- Spiral Area -->
  <!-- ============== -->
  <div id="spiral"></div>

  <!-- ========== -->
  <!-- JAVASCRIPT -->
  <!-- ========== -->

  <script>

    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>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png