Old school D3 from simpler times

All examples By author By category About

nthitz

Full window Github gist

blocks_party

hello markdown

forked from anonymous's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <style>
    html,body {
			font-family: 'Open Sans', sans-serif;    
    }
    text {
      text-transform:uppercase;
      text-anchor:middle;
    }
  </style>
</head>

<body>

<script>
    var input = 'buildingblocks & enjalot ❤'.split('');
    var w = window.outerWidth,
        h = window.outerHeight,
        w = 960,
        h = 460,
        svg = d3.select('body').append('svg')
    			.attr('width', w)
    			.attr('height', h);
  	var letters = svg.selectAll('text').data(input);
    letters.enter().append('text').text(String);
    
    
    reset();
    function reset() { 
      letters.attr('y', h - 80)
        .attr('x', w + 20)
        .style('font-size', '32px');
        var duration = 1000;
        var delay = duration * 0.7;
        letters.transition()
          .duration(duration)
          .delay(function(d,i) { return i * delay; })
          .attr('x', w/2)
          .style('font-size', '500px')
        	
          .each('end', function() {
          d3.select(this).transition().duration(duration)
            .attr('x', -12)
            .style('font-size', '16px');
        });
			setTimeout(reset, delay * input.length + duration);
    }
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js