block by kenpenn 29bc81483a274afec6e440f14c9b51ac

D3 badge for viSFest 2017

Full Screen

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

index.html

<!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="//www.w3.org/2000/svg" xmlns:xlink="//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>

    <rect id="k-n" class="bg-cycler" x="220" y="60" width="45" height="62"></rect>
    <rect id="k-e" class="bg-cycler" x="164" y="60" width="47" height="62"></rect>
    <rect id="k" class="bg-cycler" x="107" y="42" width="57" height="79"></rect>

    <ellipse id="circ-5" class="bg-cycler" cx="1001.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
    <ellipse id="circ-4" class="bg-cycler" cx="901.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
    <ellipse id="circ-3" class="bg-cycler" cx="801.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
    <ellipse id="circ-2" class="bg-cycler" cx="701.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
    <ellipse id="circ-1" class="bg-cycler" cx="601.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
    <ellipse id="circ-0" class="bg-cycler" cx="501.5" cy="248.5" rx="27.5" ry="28.5"></ellipse>
    <ellipse id="@-bg" class="bg-cycler" cx="131.5" cy="248.5" rx="29.5" ry="28.5"></ellipse>

    <rect id="rect-top-11" class="bg-cycler" x="819" y="300" width="56" height="30"></rect>
    <rect id="rect-top-10" class="bg-cycler" x="760" y="300" width="56" height="30"></rect>
    <rect id="rect-top-9" class="bg-cycler" x="701" y="300" width="56" height="30"></rect>
    <rect id="rect-top-8" class="bg-cycler" x="642.5" y="300" width="56" height="30"></rect>
    <rect id="rect-top-7" class="bg-cycler" x="584" y="300" width="56" height="30"></rect>
    <rect id="rect-top-6" class="bg-cycler" x="526" y="300" width="56" height="30"></rect>
    <rect id="rect-top-5" class="bg-cycler" x="467.5" y="300" width="56" height="30"></rect>
    <rect id="rect-top-4" class="bg-cycler" x="409.5" y="300" width="56" height="30"></rect>
    <rect id="rect-top-3" class="bg-cycler" x="351.5" y="300" width="56" height="30"></rect>
    <rect id="rect-top-2" class="bg-cycler" x="292.5" y="300" width="56" height="30"></rect>
    <rect id="rect-top-1" class="bg-cycler" x="234" y="300" width="56" height="30"></rect>
    <rect id="rect-top-0" class="bg-cycler" x="175" y="300" width="56" height="30"></rect>

    <rect id="rect-bot-11" class="bg-cycler" x="819" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-10" class="bg-cycler" x="760" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-9" class="bg-cycler" x="701" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-8" class="bg-cycler" x="642.5" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-7" class="bg-cycler" x="584" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-6" class="bg-cycler" x="526" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-5" class="bg-cycler" x="467.5" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-4" class="bg-cycler" x="409.5" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-3" class="bg-cycler" x="351.5" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-2" class="bg-cycler" x="292.5" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-1" class="bg-cycler" x="234" y="1278" width="56" height="30"></rect>
    <rect id="rect-bot-0" class="bg-cycler" x="175" y="1278" width="56" height="30"></rect>

    <rect id="conf-r-paren" class="bg-cycler" x="853" y="1353" width="22" height="75"></rect>
    <rect id="conf-7" class="bg-cycler" x="799" y="1353" width="39" height="66"></rect>
    <rect id="conf-1" class="bg-cycler" x="752" y="1353" width="37" height="66"></rect>
    <rect id="conf-0" class="bg-cycler" x="702" y="1353" width="39" height="66"></rect>
    <rect id="conf-2" class="bg-cycler" x="654" y="1353" width="37" height="66"></rect>
    <rect id="conf-l-paren" class="bg-cycler" x="616" y="1353" width="22" height="75"></rect>
    <rect id="conf-f" class="bg-cycler" x="560" y="1353" width="35" height="66"></rect>
    <rect id="conf-n-1" class="bg-cycler" x="502" y="1369" width="44" height="50"></rect>
    <rect id="conf-o" class="bg-cycler" x="458" y="1369" width="44" height="50"></rect>
    <rect id="conf-c" class="bg-cycler" x="412" y="1369" width="42" height="50"></rect>
    <rect id="conf-n-0" class="bg-cycler" x="363" y="1370" width="44" height="49"></rect>
    <rect id="conf-u" class="bg-cycler" x="314" y="1370" width="45" height="49"></rect>
    <rect id="conf-dot" class="bg-cycler" x="280" y="1398" width="18" height="18"></rect>
    <rect id="conf-3" class="bg-cycler" x="222" y="1353" width="35" height="66"></rect>
    <rect id="conf-d" class="bg-cycler" x="172" y="1353" width="44" height="66"></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;

  function setBgColors() {
    bgCyclers.each(function() {
      bgx = bgx < bgLen ? bgx : 0;
      d3.select(this)
        .attr('fill', bgColors[bgx])
        .datum({'bgx': bgx});
      bgx += 1;
    });
  }

  setBgColors();

  function cycleBgColors() {
    if(stopCycling) { return; }
    bgCyclers.each(function(d) {
      var idx = d.bgx + 1 < bgLen ? d.bgx + 1 : 0;
      d3.select(this)
        .attr('fill', bgColors[idx])
        .datum({'bgx': idx});
    });
    setTimeout(cycleBgColors, cycleMS);
  }

  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 + ' )';
  }

  function cycleOrbits () {
    if(stopCycling) { return; }
    var orbits = orbitalGrp.selectAll('.color-orbit');
    orbits.each(function () {
      var orbit = d3.select(this);
      var nextColor = orbit.datum().color - 1 < 0 ?  obLen - 1 : orbit.datum().color - 1;
      orbit
        .attr('stroke', orbitColors[nextColor])
        .datum({'color': nextColor});
    });

    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>