paulaanhaanen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Spinner experiment combining d3 symbols with chained transitions.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.diamond {
  stroke: #ccc;
  stroke-width:0.5px;
  fill: #333;
}

#base {
  fill: url(#gradient);
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.0.0-alpha.40.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    n = 264,
    diamondsPerRow = 12,
    diamondSize = 2200,
    diamondWidth = 85,
    diamondHeight = 48;

var diamonds = d3.range(n);

var symbol = d3.symbol()
  .type(d3.symbolDiamond)
  .size(diamondSize);

var diamondsToRaise = [
  53,64,65,66,67,75,76,77,78,79,87,88,89,90,91,92,99,100,101,102,103,111,112,
  113,114,115,116,122,123,124,125,126,127,128,135,136,137,138,139,140,147,148,
  149,150,151,159,160,161,162,163,164,171,172,173,174,175,184,185,186,187,197,
];

svg.append("linearGradient")
  .attr("id", "gradient")
  .attr("gradientUnits", "userSpaceOnUse")
  .selectAll("stop")
  .data([
    {offset: "0%", color: "#18FFFF"},
    {offset: "50%", color: "#7C4DFF"},
    {offset: "100%", color: "#FF4081"}
  ])
  .enter().append("stop")
  .attr("offset", function(d) { return d.offset; })
  .attr("stop-color", function(d) { return d.color; });

svg.append('rect')
  .attr("id", "base")
  .attr("width", "100%")
  .attr("height", "100%");

svg.selectAll('.diamond')
  .data(diamonds)
  .enter().append('path')
  .attr('class', 'diamond')
  .attr('transform', function(d){
    return positionDiamond(d, 0);
  })
  .attr('d', symbol)
  .transition()
  .duration(1500)
  .delay(function(d, i) {
      return (d % diamondsPerRow + Math.floor((d + 1) / diamondsPerRow)) * 100;
   })
  .on("start", function repeat(d) {
    d3.active(this)
      .attr('transform', function(d){
        return positionDiamond(d, diamondHeight);
      })
      .transition()
      .attr('transform', function(d){
        return positionDiamond(d, 0);
      })
      .transition()
      .on("start", repeat);
  });

function positionDiamond(d, raiseBy){
  var x = Math.floor(d / diamondsPerRow) % 2 ?
    d % diamondsPerRow * diamondWidth:
    d % diamondsPerRow * diamondWidth + diamondWidth / 2;
  var y = Math.floor(d / diamondsPerRow) * diamondHeight / 2;
  var raise = diamondsToRaise.indexOf(d) !== -1 ? raiseBy : 0;
  return 'translate(' + x + ',' + (y - raise) + ') rotate(90)';
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.diamond {
	stroke: #ccc;
	stroke-width:0.5px;
	fill: #333;
	}

	#base {
	fill: url(#gradient);
	}

	</style>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.0.0-alpha.40.js"></script>
	<script>

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	n = 264,
	diamondsPerRow = 12,
	diamondSize = 2200,
	diamondWidth = 85,
	diamondHeight = 48;

	var diamonds = d3.range(n);

	var symbol = d3.symbol()
	.type(d3.symbolDiamond)
	.size(diamondSize);

	var diamondsToRaise = [
	53,64,65,66,67,75,76,77,78,79,87,88,89,90,91,92,99,100,101,102,103,111,112,
	113,114,115,116,122,123,124,125,126,127,128,135,136,137,138,139,140,147,148,
	149,150,151,159,160,161,162,163,164,171,172,173,174,175,184,185,186,187,197,
	];

	svg.append("linearGradient")
	.attr("id", "gradient")
	.attr("gradientUnits", "userSpaceOnUse")
	.selectAll("stop")
	.data([
	{offset: "0%", color: "#18FFFF"},
	{offset: "50%", color: "#7C4DFF"},
	{offset: "100%", color: "#FF4081"}
	])
	.enter().append("stop")
	.attr("offset", function(d) { return d.offset; })
	.attr("stop-color", function(d) { return d.color; });

	svg.append('rect')
	.attr("id", "base")
	.attr("width", "100%")
	.attr("height", "100%");

	svg.selectAll('.diamond')
	.data(diamonds)
	.enter().append('path')
	.attr('class', 'diamond')
	.attr('transform', function(d){
	return positionDiamond(d, 0);
	})
	.attr('d', symbol)
	.transition()
	.duration(1500)
	.delay(function(d, i) {
	return (d % diamondsPerRow + Math.floor((d + 1) / diamondsPerRow)) * 100;
	})
	.on("start", function repeat(d) {
	d3.active(this)
	.attr('transform', function(d){
	return positionDiamond(d, diamondHeight);
	})
	.transition()
	.attr('transform', function(d){
	return positionDiamond(d, 0);
	})
	.transition()
	.on("start", repeat);
	});

	function positionDiamond(d, raiseBy){
	var x = Math.floor(d / diamondsPerRow) % 2 ?
	d % diamondsPerRow * diamondWidth:
	d % diamondsPerRow * diamondWidth + diamondWidth / 2;
	var y = Math.floor(d / diamondsPerRow) * diamondHeight / 2;
	var raise = diamondsToRaise.indexOf(d) !== -1 ? raiseBy : 0;
	return 'translate(' + x + ',' + (y - raise) + ') rotate(90)';
	}

	</script>