eskimoblood · March 14, 2013 20:38
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>

 </head>
 <body>


 <script>
  var width = 900;
  var height = 900;
  var range = d3.range(500);
  var TWO_PI = 2 * Math.PI;
  var colorCount = 500;
  var translate = 'translate(' + (width / 2) + ',' + (height / 2) + ')';

  var svg = d3.select("body")
      .append("svg:svg")
      .attr("width", width)
      .attr("height", height);

  svg.append("svg:path");

  var path = svg.selectAll('path');

  // power scale
  var color = d3.scale
      .pow()
      .exponent(.5)
      .domain([0, colorCount / 4, colorCount / 2, colorCount / 2 + colorCount / 4, colorCount])
      .range(['#490A3D', '#BD1550', '#E97F02', '#F8CA00', '#8A9B0F']);

  d3.timer(function(time) {
    var vertices = updateData(time);
    path = path.data(d3.geom.voronoi(vertices).map(function(d) {
      return "M" + d.join("L") + "Z";
    }), String);
    path.exit().remove();
    path.enter().append("path").attr("fill", selectColor).attr("d", String)
        .attr('transform', translate);
    path.order();
  });

  function selectColor(d, i) {
    var j = i % (2 * colorCount);
    if (j > colorCount) {
      j = 2 * colorCount - j;
    }
    return color(j);
  }

  function updateData(time) {
    var time1 = TWO_PI / 30000 * (time % 1000000);
    var minorR = 40 ;
    var diff = 200 - minorR+time1;
    var s = diff / minorR;
    var theta = 0;
    var angleMultiplier = 200 - time1;
    var radiusEffect = time1 + minorR;
    return range.map(function() {
      theta += Math.sin(Math.PI * 4 /5000)*time1/100;
      var mult = angleMultiplier * theta;
      return   [
        diff * Math.sin(mult) + radiusEffect * Math.sin(mult * s),
        diff * Math.cos(mult) - radiusEffect * Math.cos(mult * s)
      ];
    });
  }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>

	</head>
	<body>


	<script>
	var width = 900;
	var height = 900;
	var range = d3.range(500);
	var TWO_PI = 2 * Math.PI;
	var colorCount = 500;
	var translate = 'translate(' + (width / 2) + ',' + (height / 2) + ')';

	var svg = d3.select("body")
	.append("svg:svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("svg:path");

	var path = svg.selectAll('path');

	// power scale
	var color = d3.scale
	.pow()
	.exponent(.5)
	.domain([0, colorCount / 4, colorCount / 2, colorCount / 2 + colorCount / 4, colorCount])
	.range(['#490A3D', '#BD1550', '#E97F02', '#F8CA00', '#8A9B0F']);

	d3.timer(function(time) {
	var vertices = updateData(time);
	path = path.data(d3.geom.voronoi(vertices).map(function(d) {
	return "M" + d.join("L") + "Z";
	}), String);
	path.exit().remove();
	path.enter().append("path").attr("fill", selectColor).attr("d", String)
	.attr('transform', translate);
	path.order();
	});

	function selectColor(d, i) {
	var j = i % (2 * colorCount);
	if (j > colorCount) {
	j = 2 * colorCount - j;
	}
	return color(j);
	}

	function updateData(time) {
	var time1 = TWO_PI / 30000 * (time % 1000000);
	var minorR = 40 ;
	var diff = 200 - minorR+time1;
	var s = diff / minorR;
	var theta = 0;
	var angleMultiplier = 200 - time1;
	var radiusEffect = time1 + minorR;
	return range.map(function() {
	theta += Math.sin(Math.PI * 4 /5000)*time1/100;
	var mult = angleMultiplier * theta;
	return [
	diff * Math.sin(mult) + radiusEffect * Math.sin(mult * s),
	diff * Math.cos(mult) - radiusEffect * Math.cos(mult * s)
	];
	});
	}

	</script>
	</body>
	</html>