peterlozano/index.html

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

## index.js
var circles = [
  { fill: "#000000", x: 84.308, y: 53.927, r: 2.614 },
  { fill: "#000000", x: 96.928, y: 50.545, r: 2.614 },
  { fill: "#000000", x: 90.165, y: 25.304, r: 2.614 },
  { fill: "#000000", x: 80.926, y: 41.306, r: 2.614 },
  { fill: "#EC008C", x: 75.069, y: 69.929, r: 2.613 },
  { fill: "#C4C4C3", x: 64.924, y: 32.067, r: 1.83 },
  { fill: "#C4C4C3", x: 52.303, y: 35.449, r: 1.83 },
  { fill: "#C4C4C3", x: 55.703, y: 48.14, r: 1.829 },
  { fill: "#C4C4C3", x: 59.066, y: 60.691, r: 1.829 },
  { fill: "#EC008C", x: 62.448, y: 73.312, r: 1.829 },
  { fill: "#EC008C", x: 87.689, y: 66.548, r: 1.829 },
  { fill: "#EC008C", x: 100.31, y: 63.166, r: 1.829 },
  { fill: "#C4C4C3", x: 71.687, y: 57.309, r: 1.829 },
  { fill: "#C4C4C3", x: 68.324, y: 44.758, r: 1.829 },
  { fill: "#C4C4C3", x: 93.566, y: 37.995, r: 1.829 },
  { fill: "#C4C4C3", x: 77.544, y: 28.686, r: 1.829 }
];

var h = 400, w = 400;

var svg = d3.select('body')
  .append('svg')
  .attr('height', h)
  .attr('width', w);

var g = svg.append('g')
.attr('transform', 'translate(30 30)');

var xlist = circles.map(function(d) { return d.x; });
var ylist = circles.map(function(d) { return d.y; });
var rlist = circles.map(function(d) { return d.r; });

var xcal = d3.scale.linear()
  .domain(d3.extent(xlist))
  .range([0, w - 60]);

var ycal = d3.scale.linear()
  .domain(d3.extent(ylist))
  .range([0, h - 60]);

var rcal = d3.scale.linear()
  .domain(d3.extent(rlist))
  .range([10,30]);

var ytop = d3.min(ylist);

var data = [];

var init_draw = function(c) {
     c.attr('r', 200)
     .attr('cx', (w-60)/2)
     .attr('cy', (h-60)/2)
     .style('fill', 'orange')
     .style('opacity', 0);
};

var final_draw = function(c) {
  c.attr('r', function(d) { return rcal(d.r); })
   .attr('cx', function(d) { return xcal(d.x); })
   .attr('cy', function(d) { return ycal(d.y); })
   .style('fill', function(d) {return d.fill; })
   .style('opacity', 1);
};

var interval = setInterval(function() {
  if (circles.length) {
    data.push(circles.pop());

    var c = g.selectAll('circle');

    c.data(data)
     .enter()
     .append('circle')
     .call(init_draw)
     .transition()
     .duration(2000)
     .ease('bounce')
     .call(final_draw);
  }
  else {
    clearInterval(interval);
  }
}, 100);


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Logo animation</title>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	</head>
	<body>
	</body>
	<script src="index.js"></script>
	</html>
	var circles = [
	{ fill: "#000000", x: 84.308, y: 53.927, r: 2.614 },
	{ fill: "#000000", x: 96.928, y: 50.545, r: 2.614 },
	{ fill: "#000000", x: 90.165, y: 25.304, r: 2.614 },
	{ fill: "#000000", x: 80.926, y: 41.306, r: 2.614 },
	{ fill: "#EC008C", x: 75.069, y: 69.929, r: 2.613 },
	{ fill: "#C4C4C3", x: 64.924, y: 32.067, r: 1.83 },
	{ fill: "#C4C4C3", x: 52.303, y: 35.449, r: 1.83 },
	{ fill: "#C4C4C3", x: 55.703, y: 48.14, r: 1.829 },
	{ fill: "#C4C4C3", x: 59.066, y: 60.691, r: 1.829 },
	{ fill: "#EC008C", x: 62.448, y: 73.312, r: 1.829 },
	{ fill: "#EC008C", x: 87.689, y: 66.548, r: 1.829 },
	{ fill: "#EC008C", x: 100.31, y: 63.166, r: 1.829 },
	{ fill: "#C4C4C3", x: 71.687, y: 57.309, r: 1.829 },
	{ fill: "#C4C4C3", x: 68.324, y: 44.758, r: 1.829 },
	{ fill: "#C4C4C3", x: 93.566, y: 37.995, r: 1.829 },
	{ fill: "#C4C4C3", x: 77.544, y: 28.686, r: 1.829 }
	];

	var h = 400, w = 400;

	var svg = d3.select('body')
	.append('svg')
	.attr('height', h)
	.attr('width', w);

	var g = svg.append('g')
	.attr('transform', 'translate(30 30)');

	var xlist = circles.map(function(d) { return d.x; });
	var ylist = circles.map(function(d) { return d.y; });
	var rlist = circles.map(function(d) { return d.r; });

	var xcal = d3.scale.linear()
	.domain(d3.extent(xlist))
	.range([0, w - 60]);

	var ycal = d3.scale.linear()
	.domain(d3.extent(ylist))
	.range([0, h - 60]);

	var rcal = d3.scale.linear()
	.domain(d3.extent(rlist))
	.range([10,30]);

	var ytop = d3.min(ylist);

	var data = [];

	var init_draw = function(c) {
	c.attr('r', 200)
	.attr('cx', (w-60)/2)
	.attr('cy', (h-60)/2)
	.style('fill', 'orange')
	.style('opacity', 0);
	};

	var final_draw = function(c) {
	c.attr('r', function(d) { return rcal(d.r); })
	.attr('cx', function(d) { return xcal(d.x); })
	.attr('cy', function(d) { return ycal(d.y); })
	.style('fill', function(d) {return d.fill; })
	.style('opacity', 1);
	};

	var interval = setInterval(function() {
	if (circles.length) {
	data.push(circles.pop());

	var c = g.selectAll('circle');

	c.data(data)
	.enter()
	.append('circle')
	.call(init_draw)
	.transition()
	.duration(2000)
	.ease('bounce')
	.call(final_draw);
	}
	else {
	clearInterval(interval);
	}
	}, 100);