D3 badge for viSFest 2016

Badge for d3 viSFest unconf 2016

uses forceSimulation and transitions.

tweaked for badgetron using blockbuilder

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>unconf d3</title>
  <style>
    body {margin:0;}
    svg { background: #000; }
  </style>
</head>
<body>
<div>
  <svg width="1050px" height="1500px" viewBox="0 0 1050 1500" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
    <defs>
      <linearGradient id="lg-dt" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0" stop-color="#f26d58"></stop>
        <stop offset="1" stop-color="#f9a03c"></stop>
      </linearGradient>
      <linearGradient id="lg-b" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0" stop-color="#f9a03c"></stop>
        <stop offset="1" stop-color="#f7974e"></stop>
      </linearGradient>
      <linearGradient id="lg-3t" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0" stop-color="#b84e51"></stop>
        <stop offset="1" stop-color="#f68e48"></stop>
      </linearGradient>
      <linearGradient id="lg-3m" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0" stop-color="#f68a49"></stop>
        <stop offset="1" stop-color="#f9a03C"></stop>
      </linearGradient>
    </defs>
    <rect id="p-n-1" class="cycler" x="497" y="79" width="55" height="71"></rect>
    <rect id="p-n-0" class="cycler" x="430" y="78" width="56" height="72"></rect>
    <rect id="p-e" class="cycler" x="364" y="79" width="59" height="71"></rect>
    <rect id="p" class="cycler" x="292" y="57" width="68" height="93"></rect>
    <rect id="k-n" class="cycler" x="195" y="79" width="55" height="71"></rect>
    <rect id="k-e" class="cycler" x="129" y="79" width="59" height="71"></rect>
    <rect id="k" class="cycler" x="61" y="57" width="68" height="93"></rect>

<polygon id="hex-5" class="cycler" points="411.013733 1378.90385 373.699893 1400.62824 374.228768 1354.1713"></polygon>
    <polygon id="hex-4" class="cycler" points="411.013733 1378.90385 411 1423.42719 373.555565 1400.32081"></polygon>
    <polygon id="hex-3" class="cycler" points="411.013733 1378.90385 446.684601 1399.91155 410.739929 1423.08614"></polygon>
    <polygon id="hex-2" class="cycler" points="411.013733 1378.90385 446.653956 1354.49653 447.378564 1400.59661"></polygon>
    <polygon id="hex-1" class="cycler" points="411.013733 1378.90385 411.013733 1331.59774 446.653956 1354.49653"></polygon>
    <polygon id="hex-0" class="cycler" points="411.013733 1378.90385 373.841256 1354.7496 411.013733 1331.59774"></polygon>
  </svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script>
  var start = Date.now();
  var svg = d3.select('svg');
  var cyclerColors = ['hsl(273, 100%, 50%)', 'hsl(212, 100%, 50%)', 'hsl(127, 100%, 50%)', 'hsl(52, 100%, 50%)', 'hsl(35, 100%, 50%)', 'hsl(341, 100%, 50%)'];
  var cyx = 0;
  var cyLen = cyclerColors.length;
  var cyclers = d3.selectAll('.cycler');
  var points = [[500.948995,905.346405], [395.340687,799.738097], [409.437025,773.544805], [417.43529,743.583227], [417.43529,711.753555], [417.43529,609.068457], [334.192571,525.825738], [231.507474,525.825738], [175,525.825738], [175,380], [231.507474,380], [414.729902,380], [563.261028,528.531126], [563.261028,711.753555], [563.261028,784.006278], [540.163333,850.864247], [500.948995,905.346405], [500.948995,905.276555], [440.721461,988.953248], [342.477178,1043.43726], [231.507474,1043.43726], [175,1043.43726], [175,897.61152], [231.507474,897.61152], [302.362898,897.61152], [363.961099,857.976633], [395.340687,799.668246], [500.948995,905.276555],[871.239524,876.842108], [881.607931,818.931422], [866.342126,758.316347], [827.595698,711.753555], [877.796722,651.425417], [888.581847,567.508324], [855.267199,496.446652], [821.95255,425.38498], [750.548548,379.999234], [672.065257,380], [438.744076,380], [438.744076,380], [496.156385,415.962562], [543.253253,466.20887], [575.429457,525.825738], [672.057966,525.825738], [692.246142,525.825738], [710.900786,536.596001], [720.994874,554.079475], [731.088963,571.562948], [731.088963,593.103476], [720.994874,610.586949], [710.900786,628.070422], [692.246142,638.840686], [672.057966,638.840685], [633.238095,638.840685], [871.239523,876.842113],[634.495842,638.840685], [871.475641,875.820485], [868.44033,893.290466], [863.075829,910.523553], [855.323111,927.060457], [822.008462,998.122129], [750.60446,1043.50788], [672.121169,1043.50711], [639.12732,1043.50711], [543.343182,947.722971], [555.269613,931.93619], [566.02272,915.214001], [575.485369,897.681371], [672.113878,897.681371], [692.302054,897.681371], [710.956698,886.911108], [721.050787,869.427634], [731.144875,851.944161], [731.144875,830.403633], [721.050787,812.92016], [710.956698,795.436687], [692.302054,784.666423], [672.113878,784.666424], [615.606404,784.666424], [624.739964,736.486894], [624.739964,687.020215], [615.606404,638.840685], [634.495842,638.840685]];
  var ptLen = points.length;
  var colors = ['hsl(341, 100%, 50%)', 'hsl(359, 100%, 50%)', 'hsl(18, 100%, 50%)', 'hsl(35, 100%, 50%)', 'hsl(52, 100%, 50%)', 'hsl(83, 100%, 50%)', 'hsl(127, 100%, 50%)', 'hsl(160, 100%, 50%)', 'hsl(190, 100%, 50%)', 'hsl(212, 100%, 50%)', 'hsl(227, 100%, 50%)', 'hsl(242, 100%, 50%)', 'hsl(259, 100%, 50%)', 'hsl(273, 100%, 50%)', 'hsl(296, 100%, 50%)'];
  var cLen = colors.length;
  var clx = 0;
  var circles = [];
  var stopCycling = false;

//console.log(cyclerColors.reverse());

setCycleColors();

cycleColors();

points.forEach(function(point) {
    clx = clx < cLen ? clx : 0;
    var circle = {};
    circle.reqX = point[0];
    circle.reqY = point[1];
    circle.fill = colors[clx];
    circles.push(circle);
    clx += 1;
  });

var sim = d3.forceSimulation()
        .force('charge', d3.forceManyBody().distanceMax(50))
        .force('center', d3.forceCenter( 525, 737 ))
        .alphaDecay(0.06);

var circs = svg.selectAll('circle')
        .data(circles)
        .enter()
        .append('circle')
          .attr('r', 5)
          .attr('fill', function(d) { return d.fill })
          .attr('transform', 'translate(525,750)')
          .attr('opacity', 1);

sim
    .nodes(circles)
    .on('tick', function() {
      circs
        .attr('transform', function(d) {
          return 'translate(' + d.x + ',' + d.y + ')';
        });
    })
    .on('end', function() {
      var elapsed = Date.now() - start;
      console.log('force end: ' + elapsed + 'ms');
      circs.each(function(p, i) {
        d3.select(this)
          .transition()
          .duration(300)
            .attr('transform', function(d) {
              return 'translate(' + d.reqX + ',' + d.reqY + ')';
            })
          .on('end', function () {
            var elapsed = Date.now() - start;
            if (i + 1 == cLen) {
              console.log('move end: ' + elapsed + 'ms');
              blowUpCircs();
              appendPaths();
            }
          });
      });
    });

paths.forEach(function(path) {
      var d = '';
      var logoEl;
      path.points.forEach(function(point){
        d += point[0] + ',' + point[1] + ' ';
      });
      d += ' Z';
      logoEl = svg.append('path')
        .attr('id', path.id)
        .attr('style', path.style)
        .attr('opacity', 0)
        .attr('d', d);

logoEl
        .transition()
        .delay(600)
        .duration(600)
          .attr('opacity', 1)
        .on('end', function() {
          var elapsed = Date.now() - start;
          pax += 1;
          if (pax == paLen) {
            console.log('logo end: ' + elapsed + 'ms');
            stopCycling = true;
          }
        });
    });
  }
</script>
</body>
</html>

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