D3 Examples - Dollar Bar Chart RED

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:30;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    div{
      font-family:Franklin Gothic Book;
      
    }
    
    #imgcont1{
        width:400px;      
        position:relative;          
    }
    
    #imgcont2{
        width:400px;      
        position:relative; 
      
    }
    
    #imgcont1 img{
        width:400px;
        height:auto;
        outline:1px solid rgba(0,0,0,.5);;
    }
    #imgcont2 img{
        width:400px; 
        outline:1px solid rgba(0,0,0,.5);;
    }
    
    #overlay1{
      left:93%;
      width:7%;
      top:-1.5px; 
      right:1px;
      height:174px;
      background:rgba(255,0,0,.55);
      border:1px solid rgba(0,0,0,.5);
      border-left:1px solid white;
      position:absolute;
​
    }
    
     #overlay2{
      left:73%;
      top:-1.5px; right:1px;
      width:27%;
      height:175px;
      background:rgba(255,0,0,.55);
      border:1px solid rgba(0,0,0,.5);;
      border-left:1px solid white;
      position:absolute;
    }
    
    #bracket1{
      width:93%;
      height:10px;
      margin-bottom:2px;
      border-bottom:1px solid black;
      border-left:1px solid black;
      border-right:1px solid black;
    }
    
    #bracket2{
      width:73%;
      height:10px;
      margin-bottom:2px;
      border-bottom:1px solid black;
      border-left:1px solid black;
      border-right:1px solid black;
    }
    
  </style>
</head>
​
<div id="imgcont1">
  <image src="https://upload.wikimedia.org/wikipedia/commons/2/23/US_one_dollar_bill%2C_obverse%2C_series_2009.jpg">
  </image>
  <div id="overlay1">
  </div>
  <div id="bracket1">
  </div>
  <div id="brackettext">
    Medicare pays 96 cents on the dollar
  </div>
</div>
<br>
<div id="imgcont2">
  <image src="https://upload.wikimedia.org/wikipedia/commons/2/23/US_one_dollar_bill%2C_obverse%2C_series_2009.jpg">
  </image>
  <div id="overlay2">
  </div>
  <div id="bracket2">
  </div>
  <div id="brackettext">
    Medicaid pays 73 cents on the dollar
  </div>
</div>
<body>
  <script>
​
  </script>
</body>
​
    