Bars transitioning over text

forked from EE2dev's block: Bars transitioning over text

<!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 + ")");

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