Untitled

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 1900;
         var height = 700;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //draw rectangles with nested loops
         let brightness=0;
         for (y=0; y<20; y++){
           let blue1=Math.floor(y/20*255).toString(16)
           let blue2='00'.substring(0,2-blue1.length)+blue1
           svg.append("a")
             .attr("xlink:href", "http://en.wikipedia.org/")
             .append("rect")
             .attr("xlink:href", "http://google.com")
             .attr("x", 10)
             .attr("y", y*30)
             .attr("width", 200)
             .attr("height", 20)
             .attr("fill", '#'+'00'+'00'+blue2);
           //svg.append("a")
           //  .attr("xlink:href", "http://en.wikipedia.org/")
           //  .append("text")
           //   .attr("x", x+5)
           //    .attr("y", y+17)
           //    .style("fill", "white")
           //    .style("font-size", "20px")
           //    .text("thing "+step);
           //brightness+=1;
         }
      </script>
   </body>
</html>