zmaril/index.coffee

## readme.md

      
    Raw
  

              readme.md
            
          
    Fun challenge.
https://groups.google.com/forum/?fromgroups#!topic/d3-js/j32HB4b1mXw

  
## index.coffee
graphic = new Object
size = null
number = null

graphic.create = ()->
  width = $(document).width()/2
  height = $(document).height()*.85
  size = d3.min([width,height])
  graphic.svg = d3.select("#graphic")
    .append("svg")
      .attr("width",size)
      .attr("height",size)

  graphic.g = graphic.svg.append("g")

  number = 20
  data = _.range(size/number)
#  data = [1]
  graphic.rect = graphic.g.selectAll("rect")
    .data(data).enter()
    .append("rect")
      .attr("width",(d,i)->size-i*number*2)
      .attr("height",(d,i)->size-i*number*2)
      .attr("x",(d,i)->number*i)
      .attr("y",(d,i)->number*i)
      .attr("fill",(d,i)-> if i%2 is 0 then "black" else "white")

graphic.update = ()->
  graphic.rect.transition()
    .duration(2000)
    .attrTween("transform",(d,i,a)->
      i = d3.interpolateNumber(0,-d*90)
      center = size/2
      (t)->
        "rotate(#{i(t)} #{center} #{center})"
    )

graphic.destroy = ()->
  graphic.svg.remove()
  delete graphic.svg

$(document).ready ()->
  graphic.create()

  $(window).resize ()->
    graphic.destroy()
    graphic.create()
  setInterval(
    ()->
      graphic.update()
    ,2250)

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>

.background {
  fill: none;
  pointer-events: all;
}

#states {
  fill: #aaa;
  stroke: #fff;
  stroke-width: 1.5px;
}

#states path:hover {
  stroke: white;
}

</style>
<body>
    <div id="graphic"></div>
<script src="index.js"></script>
</body>
</html>

## index.js
var graphic, number, size;

graphic = new Object;

size = null;

number = null;

graphic.create = function() {
  var data, height, width;
  width = $(document).width() / 2;
  height = $(document).height() * .85;
  size = d3.min([width, height]);
  graphic.svg = d3.select("#graphic").append("svg").attr("width", size).attr("height", size);
  graphic.g = graphic.svg.append("g");
  number = 20;
  data = d3.range(size / number);
  return graphic.rect = graphic.g.selectAll("rect").data(data).enter().append("rect").attr("width", function(d, i) {
    return size - i * number * 2;
  }).attr("height", function(d, i) {
    return size - i * number * 2;
  }).attr("x", function(d, i) {
    return number * i;
  }).attr("y", function(d, i) {
    return number * i;
  }).attr("fill", function(d, i) {
    if (i % 2 === 0) {
      return "black";
    } else {
      return "white";
    }
  });
};

graphic.update = function() {
  return graphic.rect.transition().duration(2000).attrTween("transform", function(d, i, a) {
    var center;
    i = d3.interpolateNumber(0, -d * 90);
    center = size / 2;
    return function(t) {
      return "rotate(" + (i(t)) + " " + center + " " + center + ")";
    };
  });
};

graphic.destroy = function() {
  graphic.svg.remove();
  return delete graphic.svg;
};

$(document).ready(function() {
  graphic.create();
  $(window).resize(function() {
    graphic.destroy();
    return graphic.create();
  });
  return setInterval(function() {
    return graphic.update();
  }, 2250);
});
	graphic = new Object
	size = null
	number = null

	graphic.create = ()->
	width = $(document).width()/2
	height = $(document).height()*.85
	size = d3.min([width,height])
	graphic.svg = d3.select("#graphic")
	.append("svg")
	.attr("width",size)
	.attr("height",size)

	graphic.g = graphic.svg.append("g")

	number = 20
	data = _.range(size/number)
	# data = [1]
	graphic.rect = graphic.g.selectAll("rect")
	.data(data).enter()
	.append("rect")
	.attr("width",(d,i)->size-inumber2)
	.attr("height",(d,i)->size-inumber2)
	.attr("x",(d,i)->number*i)
	.attr("y",(d,i)->number*i)
	.attr("fill",(d,i)-> if i%2 is 0 then "black" else "white")

	graphic.update = ()->
	graphic.rect.transition()
	.duration(2000)
	.attrTween("transform",(d,i,a)->
	i = d3.interpolateNumber(0,-d*90)
	center = size/2
	(t)->
	"rotate(#{i(t)} #{center} #{center})"
	)

	graphic.destroy = ()->
	graphic.svg.remove()
	delete graphic.svg

	$(document).ready ()->
	graphic.create()

	$(window).resize ()->
	graphic.destroy()
	graphic.create()
	setInterval(
	()->
	graphic.update()
	,2250)
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v2.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style>

	.background {
	fill: none;
	pointer-events: all;
	}

	#states {
	fill: #aaa;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	#states path:hover {
	stroke: white;
	}

	</style>
	<body>
	<div id="graphic"></div>
	<script src="index.js"></script>
	</body>
	</html>
	var graphic, number, size;

	graphic = new Object;

	size = null;

	number = null;

	graphic.create = function() {
	var data, height, width;
	width = $(document).width() / 2;
	height = $(document).height() * .85;
	size = d3.min([width, height]);
	graphic.svg = d3.select("#graphic").append("svg").attr("width", size).attr("height", size);
	graphic.g = graphic.svg.append("g");
	number = 20;
	data = d3.range(size / number);
	return graphic.rect = graphic.g.selectAll("rect").data(data).enter().append("rect").attr("width", function(d, i) {
	return size - i * number * 2;
	}).attr("height", function(d, i) {
	return size - i * number * 2;
	}).attr("x", function(d, i) {
	return number * i;
	}).attr("y", function(d, i) {
	return number * i;
	}).attr("fill", function(d, i) {
	if (i % 2 === 0) {
	return "black";
	} else {
	return "white";
	}
	});
	};

	graphic.update = function() {
	return graphic.rect.transition().duration(2000).attrTween("transform", function(d, i, a) {
	var center;
	i = d3.interpolateNumber(0, -d * 90);
	center = size / 2;
	return function(t) {
	return "rotate(" + (i(t)) + " " + center + " " + center + ")";
	};
	});
	};

	graphic.destroy = function() {
	graphic.svg.remove();
	return delete graphic.svg;
	};

	$(document).ready(function() {
	graphic.create();
	$(window).resize(function() {
	graphic.destroy();
	return graphic.create();
	});
	return setInterval(function() {
	return graphic.update();
	}, 2250);
	});