D3 badge for viSFest 2017

Badge for d3 viSFest unconf 2017

somewhat annoying cheap eye candy

tweaked for badgetron using blockbuilder

forked from kenpenn's block: D3 badge for viSFest 2016

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>viSFest 2017 badge</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>
      <path class="star" d="M32,64 C32,46.326888 46.326888,32 64,32 C46.326888,32 32,17.673112 32,0 C32,17.673112 17.673112,32 0,32 C17.673112,32 32,46.326888 32,64 Z"></path>
    </defs>
    <style>
      .star {
        fill: #fff;
        stroke: none;
      }
      .color-orbit {
        fill: none;
        stroke-width: 8px;
      }
      .star-orbit {
        fill: none;
        stroke: none;
      }
    </style>
    <rect id="p-n-1" class="bg-cycler" x="275" y="150" width="45" height="58"></rect>
    <rect id="p-n-0" class="bg-cycler" x="220" y="150" width="45" height="58"></rect>
    <rect id="p-e" class="bg-cycler" x="165" y="150" width="47" height="58"></rect>
    <rect id="p" class="bg-cycler" x="107" y="134" width="53" height="77"></rect>

<g id="orbital-grp"></g>
    <g id="stars-grp"></g>
  </svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  var svg = d3.select('svg');

var bgColors = ['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 bgx = 0;
  var bgLen = bgColors.length;
  var bgCyclers = d3.selectAll('.bg-cycler');
  var stopCycling = false;

setBgColors();

cycleBgColors();

var ctr = { x: 0, y: 802};
  var orbitRx;

var orbitalGrp = d3.select('#orbital-grp');
  var starDef = document.querySelector('svg defs .star');

setDims();

function setDims () {
    var svgDims = svg.node().getBoundingClientRect();
    var rectTopCR = document.querySelector('#rect-top-0').getBoundingClientRect();
    var rectBotCR = document.querySelector('#rect-bot-0').getBoundingClientRect();
    var orbitY = rectBotCR.top - rectTopCR.bottom;

ctr.x = svgDims.width * 0.5;
    orbitRx = (Math.min(ctr.x, orbitY) - 128);

var starDims = starDef.getBoundingClientRect();
  }

var starsGrp = d3.select('#stars-grp');
  var orbitColors = ['hsl(0, 100%, 50%)','hsl(28, 100%, 50%)','hsl(60, 100%, 50%)','hsl(90, 100%, 50%)','hsl(120, 100%, 50%)','hsl(216, 100%, 50%)','hsl(252, 100%, 50%)','hsl(272, 100%, 50%)','hsl(288, 100%, 50%)','hsl(314, 100%, 50%)'];
  var obx = 0;
  var obLen = orbitColors.length;
  var cycleMS = 200;

function ellipticalPath (cx, cy, rx, ry) {
    return 'M' + (cx - rx) + ',' + cy
        + ' a' + rx + ',' + ry
        + ' 0 1,0 ' + (rx * 2) + ',0'
        + ' a' + rx + ',' + ry
        + ' 0 1,0 -' + (rx * 2) + ',0 Z'
  }

function setOrbitTransform (idx) {
    return 'translate(' + ctr.x + ', ' + ctr.y + ')'
        + ' rotate(' + (idx * 18) + ') ' // 10 colors, 180 / 10
        + ' translate( -' + ctr.x + ', -' + ctr.y + ' )';
  }

var starGrps = d3.selectAll('.star-grp');

starGrps.each(function () {
      var starGrp = d3.select(this);
      var starOrbit = starGrp.select('.star-orbit');
      var len = starOrbit.node().getTotalLength();
      var stars = starGrp.selectAll('.star')
      stars.each(function () {
        var star = d3.select(this);
        var step = star.datum().step + 1 < 10 ? star.datum().step + 1 : 0;
        var pt = starOrbit.node().getPointAtLength(step * len * .1)
        star
          .attr('transform', 'translate(' + (pt.x - 32) + ',' + (pt.y - 32) + ')')
          .datum({ 'step': step});
      });
    });

setTimeout(cycleOrbits, cycleMS);
  }

function drawOrbits () {
    var colorOrbit, starGrp, starOrbit, star0, star1, len, cp5, pt0, pt1;

for (obx; obx < obLen; obx += 1) {

colorOrbit = orbitalGrp.append('path')
        .attr('id', 'orbit-' + obx)
        .attr('class', 'color-orbit')
        .attr('stroke', orbitColors[obx])
        .attr('d', ellipticalPath(ctr.x, ctr.y, orbitRx, 192))
        .datum({'color': obx});

starGrp = starsGrp.append('g')
        .attr('class', 'star-grp');

starOrbit = starGrp.append('path')
        .attr('id', 'star-orbit-' + obx)
        .attr('class', 'star-orbit')
        .attr('d', ellipticalPath(ctr.x, ctr.y, orbitRx, 192));

cp5 = obx + 5 < 10 ? obx + 5 : obx + 5 - 10;
      len = starOrbit.node().getTotalLength();

pt0 = starOrbit.node().getPointAtLength(len * obx * .1)
      pt1 = starOrbit.node().getPointAtLength(len * cp5 * .1)

star0 = d3.select(starGrp.node().appendChild(starDef.cloneNode(true)))
        .attr('id', 'star-' + obx + '-0' )
        .attr('transform', 'translate(' + (pt0.x - 32) + ',' + (pt0.y - 32) + ')')
        .datum({ 'step': obx});

star1 = d3.select(starGrp.node().appendChild(starDef.cloneNode(true)))
        .attr('id', 'star-' + obx + '-1')
        .attr('transform', 'translate(' + (pt1.x - 32) + ',' + (pt1.y - 32) + ')')
        .datum({ 'step': cp5});

colorOrbit.attr('transform', setOrbitTransform(obx))
      starGrp.attr('transform', setOrbitTransform(obx))
    }
  }

drawOrbits();

setTimeout(cycleOrbits, cycleMS);

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

https://d3js.org/d3.v4.min.js