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>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
 		var letters = [" ", " ", " ", "I", "t", "e", "m", " ", "e", "x", "p", "l", "o", "r", "e", "r", " ", " "];
    var letters2 = [" ", "b", "y", " ", "M", "i", "h", "a", "e", "l", " ", "A", "n", "k", "e", "r", "s", "t"]
    var indexLetters = d3.range(19);
    
    var margin = {top: 20, right: 20, bottom: 30, left: 20},
        width = 360 - margin.left - margin.right,
        height = 120 - margin.top - margin.bottom;

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

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(["#a50026","#d73027","#f46d43","#fdae61", "#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]);    
    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