Bars transitioning over text by jwilber

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Comfortaa');
    body { margin:0;top:0;right:50;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .intro-text {
      font-family: 'Comfortaa';
    }
  </style>
</head>

<body>
  <br><br><br><br><br><br>
  <script>
 		var letters = [" ", " ", " ", " ", " ", " ", "", " ", " ", " ", " ", " ", " ", " "];
    var letters2 = [" ", " ", "j", "a", "r", "e", "d", " ", "w", "i", "l", "b", "e", "r"]
    var indexLetters = d3.range(16);
    
    var margin = {top: 20, right: 20, bottom: 30, left:50},
        width = 360 - margin.left - margin.right,
        height = 120 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
      .domain(indexLetters).rangeRoundBands([0, width], .2);

    var y = d3.scale.linear()
      .domain([0, 100]).range([height, 0]);
      
    var colorScale1 = d3.scale.ordinal()
      .domain([0,3]).range([]); 
      
    var colorScale = d3.scale.ordinal()
      .domain(indexLetters).range(["coral","#67c7d3","#dbb64b","rgb(141, 211, 199)", "coral","#67c7d3","#dbb64b","rgb(141, 211, 199)","#67c7d3","coral","#67c7d3"]);    
    var svg = d3.select("body").append("svg")
        .attr("class", "ie")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var text1 = svg.selectAll("text")
        .data(indexLetters)
      .enter().append("text")
        .attr("class", "intro-text")
        .attr("x", function(d) { return x(d) + x.rangeBand()/2; })
        .attr("y", height - 40)
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text(function(d) { return letters[d];});
        
    svg.selectAll(".bar")
        .data(indexLetters)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d); })
        .attr("width", x.rangeBand())
        .attr("y", y(0))
        .attr("height", height - y(0))
        .style("fill", function(d) {return colorScale(d);})
      	.transition()
        .duration(900)
        .delay(function(d, i) {return i*100;})
        .each(slide); 
 
    
      function slide() {
        var bar = d3.select(this);
        var grey = true;
        (function repeat() {
          grey = !grey;
          bar.each(function(d) {
            text1.filter(function(dt) {return dt === d;})
              .text(function(d) { return (grey) ? letters2[d] : letters[d];})
            });
              
          bar = bar.transition()            
              .attr("y", function(d) { return y(0); })
              .attr("height", function(d) {              
                return height - y(0); })
            .transition()
              .attr("y", function(d) { return y(100); })
              .attr("height", function(d) { return height; })
              .style("fill", (d) => colorScale(d))
              .each("end", repeat)
        })();
      }
  </script>
</body>