D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mforando
Full window
Github gist
Dollar Bar Chart RED
Built with
blockbuilder.org
<!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>
https://d3js.org/d3.v4.min.js