Vertical bars revealing text

forked from EE2dev's block: Vertical bars revealing 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:10;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:40%; height: 80px; border: 1px solid blue; position:fixed; right:300px; background-color: lightgrey;  font-family: "Operator Mono", sans-serif; }
  </style>
</head>

<body>
  <script>
 		var letters = ["  ", "I", "n", "a", "n", "i", "m", "a", "t", "e", "d", "  ", "O", "b", "j", "e", "c", "t", "s"];
    var letters2 = ["  ", "g", "e","t","   ","in","*","a","n","i","m","a","t","e","d","!"]
    var indexLetters = d3.range(letters.length + 1);
    var indexBars = d3.range(49);
    
    var margin = {top: 5, right: 0, bottom: 10, left: -10},
        width = 400 - margin.left - margin.right,
        height = 120 - margin.top - margin.bottom;

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

var x1 = d3.scale.ordinal()
      .domain(indexBars).rangeRoundBands([0, width], 0);
    
    var y = d3.scale.linear()
      .domain([0, 100]).range([0, height]);
     
    var colorScale1 = d3.scale.ordinal()
      .domain([0,3]).range(["cornflowerblue","midnightblue", "cyan", "dodgerblue"]); 
      
    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://d3js.org/d3.v5.min.js

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