I ♡ D3

Displays the text "I ♡ D3" with a slide effect obtained via d3-timer (d3.interval).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    svg {
      background-color: #4d4d4d;
      width: 560px;
      height: 180px;
    }
    circle {
      fill: #B40431;
    }
    .letter {
      fill: #ffff33;
    }
  </style>
</head>
<body>
<svg></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script type="text/javascript">
  function isLetter(x, y) {
    // Coordinates of circles representing the letters
    if ((x == 2 & y == 2) || (x == 3 & y == 2) || (x == 4 & y == 2) || (x == 3 & y == 3) || (x == 3 & y == 4) || (x == 3 & y == 5) || (x == 3 & y == 6) || (x == 2 & y == 6) || (x == 4 & y == 6)
        || (x == 7 & y == 2) || (x == 8 & y == 1) || (x == 9 & y == 1) || (x == 10 & y == 2) || (x == 11 & y == 1) || (x == 12 & y == 1) || (x == 13 & y == 2) || (x == 7 & y == 3)
        || (x == 13 & y == 3)
        || (x == 8 & y == 4) || (x == 12 & y == 4) || (x == 9 & y == 5) || (x == 11 & y == 5) || (x == 10 & y == 6)
        || (x == 16 & y == 2) || (x == 16 & y == 3) || (x == 16 & y == 4) || (x == 16 & y == 5) || (x == 16 & y == 6) || (x == 17 & y == 2) || (x == 17 & y == 6) || (x == 18 & y == 2)
        || (x == 18 & y == 6) || (x == 19 & y == 3) || (x == 19 & y == 4) || (x == 19 & y == 5)
        || (x == 22 & y == 3) || (x == 23 & y == 2) || (x == 24 & y == 2) || (x == 25 & y == 3) || (x == 24 & y == 4) || (x == 25 & y == 5) || (x == 24 & y == 6) || (x == 23 & y == 6)
        || (x == 22 & y == 5)
      ) {
      return true
    }
    else {
      return false
    }
  }

var svg = d3.select("svg")
  var coordsX = [10, 30, 50, 70, 90, 110, 130, 150, 170, 190,
                 210, 230, 250, 270, 290, 310, 330,350, 370,
                 390, 410, 430, 450, 470, 490, 510, 530, 550]

var coordsY = [10, 30, 50, 70, 90, 110, 130, 150, 170, 190]

// Create the circles
  for (var y = 0; y < coordsY.length ; y++) {
    for (var x = 0; x < coordsX.length ; x++) {
      var circles = svg.append("circle")
         circles.attr("cx", coordsX[x])
         .attr("cy", coordsY[y])
         .attr("r", 10)
         .classed("letter", isLetter(x, y))   
    }
  }

var circles = d3.selectAll('circle')

var t = d3.interval(function(elapsed) {
  circles.each(function(d,i) {
    if (this.attributes.cx.value == 10) {
      // If circle is in the first column (cx =10), move it to the last column (cx = 550)
      d3.select(this).attr("cx", 550)
    } else {
      // Move circle 20px to the left
      d3.select(this).attr("cx", this.attributes.cx.value - 20)
    }
  })
}, 200);
</script>
</html>

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

https://d3js.org/d3-timer.v1.min.js