dlwjiang/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
	<!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 - 2i, baseHeight - 2i);
	}

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